SlideShare a Scribd company logo
1 of 218
Download to read offline
Dynamic
websites
for artists.
David Newbury
@workergnome
Dynamic websites for artists.
David Newbury — @workergnome 1
Who am I?
Lead Developer, Art Tracks, Carnegie Museums.
Ex-Lead Developer, American Eagle Outfitters.
Ex-Lead Developer, Iontank.
Dynamic websites for artists.
David Newbury — @workergnome 2
Who am I?
Lead Developer, Art Tracks, Carnegie Museums.
Ex-Lead Developer, American Eagle Outfitters.
Ex-Lead Developer, Iontank.
11 years of freelance web development.
18 years as a professional developer.
Dynamic websites for artists.
David Newbury — @workergnome 3
I can make a
real website.
Dynamic websites for artists.
David Newbury — @workergnome 4
Who am I?
I have BA in film production.
I build art installations.
I make robots that make cookies.
Dynamic websites for artists.
David Newbury — @workergnome 5
Who am I?
I have BA in film production.
I build art installations.
I make robots that make cookies.
I'm an artist.
Dynamic websites for artists.
David Newbury — @workergnome 6
This is not how to
make a real website.
Dynamic websites for artists.
David Newbury — @workergnome 7
This is not how to
make a real website.
This is how to
fake a website.
Dynamic websites for artists.
David Newbury — @workergnome 8
This is not how to
make a real website.
This is how to
fake a website.
Ya know, for art.
Dynamic websites for artists.
David Newbury — @workergnome 9
What we're going to do:
Teach you the fast, dirty, mostly free way
to build a website that can save user's data.
Dynamic websites for artists.
David Newbury — @workergnome 10
What we're going to do:
Show you how to:
—Use Sinatra
Dynamic websites for artists.
David Newbury — @workergnome 11
What we're going to do:
Show you how to:
—Use Sinatra
—Set up a local server
Dynamic websites for artists.
David Newbury — @workergnome 12
What we're going to do:
Show you how to:
—Use Sinatra
—Set up a local server
—Deploy to Heroku
Dynamic websites for artists.
David Newbury — @workergnome 13
What we're going to do:
Show you how to:
—Use Sinatra
—Set up a local server
—Deploy to Heroku
—Use Redis to store data
Dynamic websites for artists.
David Newbury — @workergnome 14
What we're NOT going to do:
—Learn HTML / CSS / Javascript
Dynamic websites for artists.
David Newbury — @workergnome 15
What we're NOT going to do:
—Learn HTML / CSS / Javascript
—Talk about relational databases
Dynamic websites for artists.
David Newbury — @workergnome 16
What we're NOT going to do:
—Learn HTML / CSS / Javascript
—Talk about relational databases
—Talk about security
Dynamic websites for artists.
David Newbury — @workergnome 17
What we're NOT going to do:
—Learn HTML / CSS / Javascript
—Talk about relational databases
—Talk about security
—Save personal, identifying information
Dynamic websites for artists.
David Newbury — @workergnome 18
Read along with me.
The code:
http://github.com/workergnome/dynamic-workshop
The slides:
http://www.slideshare.net/workergnome
Dynamic websites for artists.
David Newbury — @workergnome 19
Got your computer?
Dynamic websites for artists.
David Newbury — @workergnome 20
Get ready.
1. Get a dropbox account.
http://www.dropbox.com
2. Get a heroku account.
http://www.heroku.com
3. Download Sublime Text 3 (optional)
http://www.sublimetext.com/3
Dynamic websites for artists.
David Newbury — @workergnome 21
Get set.
1. Install Ruby
* OSX 10.9/10.10 - !
* Old OSX - http://brew.sh
* Windows - http://rubyinstaller.org
2. Install Bundler
gem install bundler
Dynamic websites for artists.
David Newbury — @workergnome 22
Go.
1. Create a Heroku app
2. Link it to Dropbox
3. Open the app directory in Sublime Text
Dynamic websites for artists.
David Newbury — @workergnome 23
3 files.
Dynamic websites for artists.
David Newbury — @workergnome 24
File #1
Gemfile
source 'https://rubygems.org'
ruby '2.1.2'
gem 'sinatra'
Dynamic websites for artists.
David Newbury — @workergnome 25
File #2
config.ru
require './hello'
run Sinatra::Application
Dynamic websites for artists.
David Newbury — @workergnome 26
File #3
hello.rb
require 'sinatra'
get '/' do
"Hello World!"
end
Dynamic websites for artists.
David Newbury — @workergnome 27
In the terminal:
cd ~/Dropbox/Apps/Heroku/[your_app_name]
bundle install
bundle exec rackup
In a browser:
http://localhost:9292
Dynamic websites for artists.
David Newbury — @workergnome 28
Blammo.
You now have a locally deployed server, hosting your
content.
Dynamic websites for artists.
David Newbury — @workergnome 29
Blammo.
You now have a locally deployed server, hosting your
content.
control-c will quit it.
Dynamic websites for artists.
David Newbury — @workergnome 30
Potential Problems:
on Windows, this error:
SSLv3 read server certificate B: certificate verify failed
Can be fixed with this:
http://git.io/AEqB
Dynamic websites for artists.
David Newbury — @workergnome 31
Deploy to the web.
This is the hard part.
Dynamic websites for artists.
David Newbury — @workergnome 32
Deploy to the web.
Go to:
https://dashboard.heroku.com/apps
Dynamic websites for artists.
David Newbury — @workergnome 33
Deploy to the web.
Click on your app.
Dynamic websites for artists.
David Newbury — @workergnome 34
Deploy to the web.
Click on .
Dynamic websites for artists.
David Newbury — @workergnome 35
Deploy to the web.
Type a message:
Dynamic websites for artists.
David Newbury — @workergnome 36
Deploy to the web.
Click
Dynamic websites for artists.
David Newbury — @workergnome 37
Deploy to the web.
Go to:
https://[your-app-name].herokuapp.com
Dynamic websites for artists.
David Newbury — @workergnome 38
Blammo.You're on the internet.
Dynamic websites for artists.
David Newbury — @workergnome 39
A quiet round of applause
for you.
Dynamic websites for artists.
David Newbury — @workergnome 40
A quiet round of applause
for you.
! ! ! ! ! ! ! ! !
Dynamic websites for artists.
David Newbury — @workergnome 41
Explanations.
Gemfile
source 'https://rubygems.org'
ruby '2.1.2'
gem 'sinatra'
Dynamic websites for artists.
David Newbury — @workergnome 42
Explanations.
Gemfile
source 'https://rubygems.org'
ruby '2.1.2'
gem 'sinatra'
A Gemfile lists dependencies.
Dynamic websites for artists.
David Newbury — @workergnome 43
Explanations.
Gemfile
source 'https://rubygems.org'
ruby '2.1.2'
gem 'sinatra'
A Gemfile lists dependencies.
External libraries that you'd like to use.
Dynamic websites for artists.
David Newbury — @workergnome 44
Explanations.
Gemfile
source 'https://rubygems.org'
ruby '2.1.2'
gem 'sinatra'
A Gemfile lists dependencies.
External libraries that you'd like to use.
In ruby, these are called Gems.
Dynamic websites for artists.
David Newbury — @workergnome 45
Explanations.
Gemfile
source 'https://rubygems.org'
ruby '2.1.2'
gem 'sinatra'
A Gemfile lists dependencies.
External libraries that you'd like to use.
In ruby, these are called Gems.
Gemfiles are managed by Bundler.
Dynamic websites for artists.
David Newbury — @workergnome 46
http://bundler.io
Dynamic websites for artists.
David Newbury — @workergnome 47
Explanations.
Bundler
Bundler makes sure that the dependencies of your
dependencies don't conflict.
Dynamic websites for artists.
David Newbury — @workergnome 48
Gemfile.lock
...
rack (1.6.0)
rack-protection (1.5.3)
rack
sinatra (1.4.5)
rack (~> 1.4)
rack-protection (~> 1.4)
tilt (~> 1.3, >= 1.3.4)
tilt (1.4.1)
...
Dynamic websites for artists.
David Newbury — @workergnome 49
Explanations.
We want sinatra. sinatra wants rack.
sinatra also wants rack-protection.
rack-protection also wants rack.
We only want one copy of rack.
Dynamic websites for artists.
David Newbury — @workergnome 50
Don't worry about
all of this.
Dynamic websites for artists.
David Newbury — @workergnome 51
Don't worry about
all of this.
There's only 2 things you need to know:
Dynamic websites for artists.
David Newbury — @workergnome 52
#1Heroku uses the Gemfile to setup the server for you.
Dynamic websites for artists.
David Newbury — @workergnome 53
#2If you want to use a library, add it to Gemfile.
Dynamic websites for artists.
David Newbury — @workergnome 54
in Gemfile:
source 'https://rubygems.org'
ruby '2.1.2'
gem 'sinatra'
Dynamic websites for artists.
David Newbury — @workergnome 55
in Gemfile:
source 'https://rubygems.org'
ruby '2.1.2'
gem 'sinatra'
gem 'my-awesome-library'
Dynamic websites for artists.
David Newbury — @workergnome 56
from the terminal, type:
bundle install
Dynamic websites for artists.
David Newbury — @workergnome 57
Explanations.
config.ru
require './hello'
run Sinatra::Application
Dynamic websites for artists.
David Newbury — @workergnome 58
Ignore this file.
Dynamic websites for artists.
David Newbury — @workergnome 59
Ignore this file.
It's a Rack configuration file that handles the
interface between the webserver and the
framework while allowing middleware applications.
For more information, go to http://rack.github.io.
Dynamic websites for artists.
David Newbury — @workergnome 60
Ignore this file.
As long as it has the line
require './hello'
and you have a file named hello.rb
you're !
Dynamic websites for artists.
David Newbury — @workergnome 61
Explanations.
Back to Sinatra.
Dynamic websites for artists.
David Newbury — @workergnome 62
http://www.sinatrarb.com
Dynamic websites for artists.
David Newbury — @workergnome 63
Sinatra is a small DSL for
creating web sites.
— Frank Sinatra
Dynamic websites for artists.
David Newbury — @workergnome 64
Explanations.
Hello.rb:
require 'sinatra'
get '/' do
"Hello World!"
end
Dynamic websites for artists.
David Newbury — @workergnome 65
Explanations.
Hello.rb:
require 'sinatra'
Load the Sinatra library.
Dynamic websites for artists.
David Newbury — @workergnome 66
Explanations.
Hello.rb:
get '/' do
"Hello World!"
end
when there's a GET request to /,
return the string "Hello World!"
Dynamic websites for artists.
David Newbury — @workergnome 67
Two notes about Ruby:
1. Ruby uses do...end instead of {...}
2. Ruby returns the last line by default.
get '/' do
"Hello World!"
end
in Javascript:
function getIndex() {
return "Hello World!";
}
Dynamic websites for artists.
David Newbury — @workergnome 68
Let's make this more folksy.
in the terminal:
bundle exec rackup
in hello.rb:
require 'sinatra'
get '/' do
"Howdy, World!"
end
Dynamic websites for artists.
David Newbury — @workergnome 69
What happened?
Dynamic websites for artists.
David Newbury — @workergnome 70
What happened?
The server is still running the original code.
Dynamic websites for artists.
David Newbury — @workergnome 71
What happened?
The server is still running the original code.
We could fix this by quitting and restarting.
Dynamic websites for artists.
David Newbury — @workergnome 72
What happened?
The server is still running the original code.
We could fix this by quitting and restarting.
BOOOORING.
Dynamic websites for artists.
David Newbury — @workergnome 73
Let's install a library.
Gemfile:
source 'https://rubygems.org'
ruby '2.1.2'
gem 'sinatra'
Dynamic websites for artists.
David Newbury — @workergnome 74
Let's install a library.
Gemfile:
source 'https://rubygems.org'
ruby '2.1.2'
gem 'sinatra'
gem 'sinatra-contrib'
Dynamic websites for artists.
David Newbury — @workergnome 75
Let's install a library.
Gemfile:
source 'https://rubygems.org'
ruby '2.1.2'
gem 'sinatra'
gem 'sinatra-contrib'
in the terminal:
bundle install
Dynamic websites for artists.
David Newbury — @workergnome 76
Let's install a library.
hello.rb:
require 'sinatra'
get '/' do
str = "Howdy, World!"
end
Dynamic websites for artists.
David Newbury — @workergnome 77
Let's install a library.
hello.rb:
require 'sinatra'
require "sinatra/reloader"
get '/' do
str = "Howdy, World!"
end
Dynamic websites for artists.
David Newbury — @workergnome 78
Let's install a library.
hello.rb:
require 'sinatra'
require "sinatra/reloader" if development?
get '/' do
str = "Howdy, World!"
end
Dynamic websites for artists.
David Newbury — @workergnome 79
Let's install a library.
in the terminal:
bundle exec rackup
and http://localhost:9292
Dynamic websites for artists.
David Newbury — @workergnome 80
Dynamic websites for artists.
David Newbury — @workergnome 81
Let's make this MORE folksy.
hello.rb:
require 'sinatra'
get '/' do
"Howdy, world!"
end
Dynamic websites for artists.
David Newbury — @workergnome 82
Let's make this MORE folksy.
hello.rb:
require 'sinatra'
get '/' do
"Howdy, all y'all."
end
Dynamic websites for artists.
David Newbury — @workergnome 83
Automatic refreshing.
You've installed your first gem.
Dynamic websites for artists.
David Newbury — @workergnome 84
Another quiet round of
applause for you.
Dynamic websites for artists.
David Newbury — @workergnome 85
Another quiet round of
applause for you.
! ! ! ! ! ! ! ! !
Dynamic websites for artists.
David Newbury — @workergnome 86
Plain text is boring.
Dynamic websites for artists.
David Newbury — @workergnome 87
Plain text is boring.
(Says the man with hevetica slides)
Dynamic websites for artists.
David Newbury — @workergnome 88
Create a public folder
within your application's folder
and put an image in it.
Dynamic websites for artists.
David Newbury — @workergnome 89
Create a public folder
within your application's folder
and put an image in it.
Dynamic websites for artists.
David Newbury — @workergnome 90
Create a public folder
within your application's folder
and put an image in it.
Dynamic websites for artists.
David Newbury — @workergnome 91
Let's make this EVEN MORE folksy.
hello.rb:
require 'sinatra'
require "sinatra/reloader" if development?
get '/' do
"Howdy, all y'all."
end
Dynamic websites for artists.
David Newbury — @workergnome 92
Let's make this EVEN MORE folksy.
hello.rb:
require 'sinatra'
require "sinatra/reloader" if development?
get '/' do
"Howdy, all y'all. <br> <img src='cowboy.png'>"
end
Dynamic websites for artists.
David Newbury — @workergnome 93
Dynamic websites for artists.
David Newbury — @workergnome 94
And if we want another URL?
hello.rb:
require 'sinatra'
require "sinatra/reloader" if development?
get '/' do
"Howdy, all y'all. <br> <img src='cowboy.png'>"
end
get '/goodbye' do
"So long, partner."
end
Dynamic websites for artists.
David Newbury — @workergnome 95
Dynamic websites for artists.
David Newbury — @workergnome 96
Your HTML is bad
and you should feel bad.
Dynamic websites for artists.
David Newbury — @workergnome 97
Dynamic websites for artists.
David Newbury — @workergnome 98
Move our pages out of the code:
require 'sinatra'
require "sinatra/reloader" if development?
get '/' do
"Howdy, all y'all. <br> <img src='cowboy.png'>"
end
get '/goodbye' do
"So long, partner."
end
Dynamic websites for artists.
David Newbury — @workergnome 99
Move our pages out of the code:
require 'sinatra'
require "sinatra/reloader" if development?
get '/' do
erb :index
end
get '/goodbye' do
erb :goodbye
end
Dynamic websites for artists.
David Newbury — @workergnome 100
And add them to a views folder:
views/index.erb:
<p>
Howdy, all y'all. <br>
<img src='cowboy.png'>
</p>
views/goodbye.erb:
<p>So long, partner.</p>
Dynamic websites for artists.
David Newbury — @workergnome 101
Let's make it dynamic!
Dynamic websites for artists.
David Newbury — @workergnome 102
Dynamic Websites
views/goodbye.erb:
<p>So long, partner.</p>
Dynamic websites for artists.
David Newbury — @workergnome 103
Dynamic Websites
views/goodbye.erb:
<p>
So long, partner, see you on
<%= (Date.today + 1).strftime('%A') %>!
</p>
Dynamic websites for artists.
David Newbury — @workergnome 104
Dynamic websites for artists.
David Newbury — @workergnome 105
And let's add a layout.
views/layout.erb:
<!DOCTYPE html>
<html>
<head>
<title>Cowboys</title>
</head>
<body>
<%= yield %>
</body>
</html>
Dynamic websites for artists.
David Newbury — @workergnome 106
Dynamic websites for artists.
David Newbury — @workergnome 107
Are you feeling
accomplished?
Dynamic websites for artists.
David Newbury — @workergnome 108
Are you feeling
accomplished?
! ! ! ! ! ! ! ! !
Dynamic websites for artists.
David Newbury — @workergnome 109
The web is stateless.
Every webpage
a new adventure.
Dynamic websites for artists.
David Newbury — @workergnome 110
Sometimes we want
statefullness.
Dynamic websites for artists.
David Newbury — @workergnome 111
Sometimes we want
statefullness.
We want a session.
Dynamic websites for artists.
David Newbury — @workergnome 112
Sometimes we want
statefullness.
We want a session.
Dynamic websites for artists.
David Newbury — @workergnome 113
Sometimes we want
statefullness.
We want a session.
Really, we just want a cookie.
Dynamic websites for artists.
David Newbury — @workergnome 114
Sometimes we want
statefullness.
We want a session.
Really, we just want a cookie.
!
Dynamic websites for artists.
David Newbury — @workergnome 115
Let's add jQuery
layout.erb:
<!DOCTYPE html>
<html>
<head>
<title>Cowboys</title>
</head>
<body>
<%= yield %>
</body>
</html>
Dynamic websites for artists.
David Newbury — @workergnome 116
Cookies let the
client and the server talk.
Dynamic websites for artists.
David Newbury — @workergnome 117
Cookies let the
client and the server talk.
!
Dynamic websites for artists.
David Newbury — @workergnome 118
For the client, we need jQuery...
layout.erb:
<!DOCTYPE html>
<html>
<head>
<title>Cowboys</title>
<script src='//code.jquery.com/jquery-1.11.2.min.js'></script>
</head>
<body>
<%= yield %>
</body>
</html>
Dynamic websites for artists.
David Newbury — @workergnome 119
We also need jQuery Cookie.
Download this:
http://git.io/AEq1
and save it as this:
/public/jquery.cookie.js
Dynamic websites for artists.
David Newbury — @workergnome 120
...and add it to the layout.
layout.erb:
<!DOCTYPE html>
<html>
<head>
<title>Cowboys</title>
<script src='//code.jquery.com/jquery-1.11.2.min.js'></script>
<script src='/jquery.cookie.js'></script>
</head>
<body>
<%= yield %>
</body>
</html>
Dynamic websites for artists.
David Newbury — @workergnome 121
And our own javascript file
layout.erb:
<!DOCTYPE html>
<html>
<head>
<title>Cowboys</title>
<script src='//code.jquery.com/jquery-1.11.2.min.js'></script>
<script src='/jquery.cookie.js'></script>
<script src='/application.js'></script>
</head>
<body>
<%= yield %>
</body>
</html>
Dynamic websites for artists.
David Newbury — @workergnome 122
Which we'll stick in /public
public/application.js:
$(function() {
$.cookie('you_seen_me', true);
});
Dynamic websites for artists.
David Newbury — @workergnome 123
For the server, we need "sinatra/cookies"
hello.rb:
require 'sinatra'
require "sinatra/reloader" if development?
get '/' do
erb :index
end
get '/goodbye' do
erb :goodbye
end
Dynamic websites for artists.
David Newbury — @workergnome 124
For the server, we need "sinatra/cookies"
hello.rb:
require 'sinatra'
require "sinatra/reloader" if development?
require "sinatra/cookies"
get '/' do
erb :index
end
get '/goodbye' do
erb :goodbye
end
Dynamic websites for artists.
David Newbury — @workergnome 125
For the server, we need "sinatra/cookies"
hello.rb:
require 'sinatra'
require "sinatra/reloader" if development?
require "sinatra/cookies"
get '/' do
@you_seen_me = cookies[:you_seen_me]
erb :index
end
get '/goodbye' do
erb :goodbye
end
Dynamic websites for artists.
David Newbury — @workergnome 126
An aside: @variables
@something is a Ruby instance variable.
They exist in the ruby method and the view.
Dynamic websites for artists.
David Newbury — @workergnome 127
hello.rb:
get '/' do
@you_seen_me = cookies[:you_seen_me]
erb :index
end
index.erb:
<p>
Howdy, all y'all. <br>
<% if @you_seen_me %> Welcome back! <% end %>
<br>
<img src='cowboy.png'>
</p>
Dynamic websites for artists.
David Newbury — @workergnome 128
First time you come to the site:
Dynamic websites for artists.
David Newbury — @workergnome 129
Second time you come to the site:
Dynamic websites for artists.
David Newbury — @workergnome 130
hello.rb:
get '/' do
@you_seen_me = cookies[:you_seen_me]
erb :index
end
index.erb:
<p>
Howdy, all y'all. <br>
<% if @you_seen_me %> Welcome back! <% end %>
<br>
<img src='cowboy.png'>
</p>
application.js:
$(function() {
$.cookie('you_seen_me', true);
});
Dynamic websites for artists.
David Newbury — @workergnome 131
That's a dynamic website
that saves user data.
Dynamic websites for artists.
David Newbury — @workergnome 132
Let's push this to the internet.
Click
Dynamic websites for artists.
David Newbury — @workergnome 133
Done.
Dynamic websites for artists.
David Newbury — @workergnome 134
I'm proud of you.
Dynamic websites for artists.
David Newbury — @workergnome 135
I'm proud of you.
! ! ! ! ! ! ! ! !
Dynamic websites for artists.
David Newbury — @workergnome 136
Redis.
Dynamic websites for artists.
David Newbury — @workergnome 137
http://redis.io
Dynamic websites for artists.
David Newbury — @workergnome 138
Redis is a Key/Value Store.
Dynamic websites for artists.
David Newbury — @workergnome 139
Redis is a Key/Value Store.
@redis.set("key","value") #saves the data
Dynamic websites for artists.
David Newbury — @workergnome 140
Redis is a Key/Value Store.
@redis.set("key","value") #saves the data
val = @redis.get("key") #val = "value"
Dynamic websites for artists.
David Newbury — @workergnome 141
Redis is a Key/Value Store.
@redis.set("key","value") #saves the data
val = @redis.get("key") #val = "value"
That's it.
Dynamic websites for artists.
David Newbury — @workergnome 142
Redis is a Key/Value Store.
$redis.set("key","value") #saves the data
val = $redis.get("key") #val = "value"
That's it.
(Not really. But pretend with me.)
Dynamic websites for artists.
David Newbury — @workergnome 143
Installing Redis on your computer
OSX:
brew install redis
Dynamic websites for artists.
David Newbury — @workergnome 144
Installing Redis on your computer
OSX:
brew install redis
Windows:
Dynamic websites for artists.
David Newbury — @workergnome 145
Installing Redis on your computer
OSX:
brew install redis
Windows:
http://git.io/AEq7
Dynamic websites for artists.
David Newbury — @workergnome 146
Installing Redis on Heroku
https://addons.heroku.com/rediscloud
Dynamic websites for artists.
David Newbury — @workergnome 147
Installing Redis on Heroku
Install it to your app.
Dynamic websites for artists.
David Newbury — @workergnome 148
Installing Redis on Heroku
Install it to your app.
Dynamic websites for artists.
David Newbury — @workergnome 149
Let's install a library.
Gemfile:
source 'https://rubygems.org'
ruby '2.1.2'
gem 'sinatra'
gem 'sinatra-contrib'
Dynamic websites for artists.
David Newbury — @workergnome 150
Let's install a library.
Gemfile:
source 'https://rubygems.org'
ruby '2.1.2'
gem 'sinatra'
gem 'sinatra-contrib'
gem 'redis'
Dynamic websites for artists.
David Newbury — @workergnome 151
Let's install a library.
Gemfile:
source 'https://rubygems.org'
ruby '2.1.2'
gem 'sinatra'
gem 'sinatra-contrib'
gem 'redis'
in the terminal:
bundle install
Dynamic websites for artists.
David Newbury — @workergnome 152
hello.rb:
require "sinatra/cookies"
#...
Dynamic websites for artists.
David Newbury — @workergnome 153
hello.rb:
require "sinatra/cookies"
require 'redis'
configure do
if development?
uri = URI.parse("redis://localhost:6379")
else
uri = URI.parse(ENV["REDISCLOUD_URL"])
end
$redis = Redis.new(host: uri.host,
port: uri.port,
password: uri.password)
end
Dynamic websites for artists.
David Newbury — @workergnome 154
hello.rb:
get '/' do
@you_seen_me = cookies[:you_seen_me]
erb :index
end
Dynamic websites for artists.
David Newbury — @workergnome 155
hello.rb:
get '/' do
@visitors = $redis.get( 'number_of_visitors' ).to_i
@you_seen_me = cookies[:you_seen_me]
erb :index
end
Dynamic websites for artists.
David Newbury — @workergnome 156
hello.rb:
get '/' do
@visitors = $redis.get( 'number_of_visitors' ).to_i
$redis.set( 'number_of_visitors', (@visitors + 1).to_s)
@you_seen_me = cookies[:you_seen_me]
erb :index
end
Dynamic websites for artists.
David Newbury — @workergnome 157
index.erb:
<p>
Howdy, all y'all. <br>
<% if @you_seen_me %> Welcome back! <% end %>
<br>
<img src='cowboy.png'>
</p>
Dynamic websites for artists.
David Newbury — @workergnome 158
index.erb:
<p>
Howdy, all y'all. <br>
<% if @you_seen_me %> Welcome back! <% end %>
<br>You're visitor <%= @visitors %>!
<br>
<img src='cowboy.png'>
</p>
Dynamic websites for artists.
David Newbury — @workergnome 159
Start up Redis:
on OSX:
in a NEW terminal window:
redis-server /usr/local/etc/redis.conf
on Windows:
open the redis-srv.exe file you downloaded.
Dynamic websites for artists.
David Newbury — @workergnome 160
in the OLD terminal window:
bundle exec rackup
Dynamic websites for artists.
David Newbury — @workergnome 161
Dynamic websites for artists.
David Newbury — @workergnome 162
Let's push this to the internet.
Click
Dynamic websites for artists.
David Newbury — @workergnome 163
Done.
Dynamic websites for artists.
David Newbury — @workergnome 164
I think you're
quite wonderful.
Dynamic websites for artists.
David Newbury — @workergnome 165
I think you're
quite wonderful.
! ! ! ! ! ! ! ! !
Dynamic websites for artists.
David Newbury — @workergnome 166
Saving explicit
user data.
Dynamic websites for artists.
David Newbury — @workergnome 167
Saving explicit
user data.
That doesn't sound right.
Dynamic websites for artists.
David Newbury — @workergnome 168
Saving explicitly
provided user data.
Dynamic websites for artists.
David Newbury — @workergnome 169
Let's create a form.
index.erb:
<img src='cowboy.png'>
</p>
<!--...-->
Dynamic websites for artists.
David Newbury — @workergnome 170
Let's create a form.
index.erb:
<img src='cowboy.png'>
</p>
<p>Let's play the classic Cowboy game Finger Guns!</p>
<p>Choose how many fingers to show, and you'll fire at the last person to play.</p>
<p>If the total number of fingers is odd, you win!</p>
<form action="/fire_at_will" method="post">
How Many Fingers?
<input id="fingers" type="text" name="fingers">
<input id='kaboom' type="submit" value="Kaboom">
</form>
Dynamic websites for artists.
David Newbury — @workergnome 171
Dynamic websites for artists.
David Newbury — @workergnome 172
Dynamic websites for artists.
David Newbury — @workergnome 173
Our post route.
hello.rb:
get '/goodbye' do
erb :goodbye
end
Dynamic websites for artists.
David Newbury — @workergnome 174
Our post route. rural, of course.
hello.rb:
get '/goodbye' do
erb :goodbye
end
post '/fire_at_will' do
params[:fingers]
end
Dynamic websites for artists.
David Newbury — @workergnome 175
Let's try again.
Dynamic websites for artists.
David Newbury — @workergnome 176
Best. Website. Ever.
Dynamic websites for artists.
David Newbury — @workergnome 177
We can do better.
hello.rb:
post '/fire_at_will' do
fingers = params[:fingers].to_i
end
Dynamic websites for artists.
David Newbury — @workergnome 178
We can do better.
hello.rb:
post '/fire_at_will' do
fingers = params[:fingers].to_i
last_fingers = $redis.get('last_fingers').to_i
end
Dynamic websites for artists.
David Newbury — @workergnome 179
We can do better.
hello.rb:
post '/fire_at_will' do
fingers = params[:fingers].to_i
last_fingers = $redis.get('last_fingers').to_i
$redis.set('last_fingers',fingers)
end
Dynamic websites for artists.
David Newbury — @workergnome 180
We can do better.
hello.rb:
post '/fire_at_will' do
fingers = params[:fingers].to_i
last_fingers = $redis.get('last_fingers').to_i
$redis.set('last_fingers',fingers)
if (fingers + last_fingers).odd?
"you win!"
else
"you lose!"
end
end
Dynamic websites for artists.
David Newbury — @workergnome 181
Let's try again.
Dynamic websites for artists.
David Newbury — @workergnome 182
I'm a creep.
Dynamic websites for artists.
David Newbury — @workergnome 183
We've just made a game.
Dynamic websites for artists.
David Newbury — @workergnome 184
We've just made a game.
A terrible, terrible game.
Dynamic websites for artists.
David Newbury — @workergnome 185
We've just made a game.
A terrible, terrible game.
How could we make it better?
Dynamic websites for artists.
David Newbury — @workergnome 186
We've just made a game.
A terrible, terrible game.
How could we make it better?
Analytics.
Dynamic websites for artists.
David Newbury — @workergnome 187
hello.rb:
if (fingers + last_fingers).odd?
"you win!"
else
"you lose!"
end
Dynamic websites for artists.
David Newbury — @workergnome 188
hello.rb:
if (fingers + last_fingers).odd?
@result = "you win!"
else
@result = "you lose!"
end
erb :score
Dynamic websites for artists.
David Newbury — @workergnome 189
hello.rb:
if (fingers + last_fingers).odd?
@result = "you win!"
else
@result = "you lose!"
end
erb :score
views/score.erb:
<p><%= @result %></p>
<a href="/">Play again?</a>
Dynamic websites for artists.
David Newbury — @workergnome 190
Let's try again.
Dynamic websites for artists.
David Newbury — @workergnome 191
Things are looking up.
Dynamic websites for artists.
David Newbury — @workergnome 192
Let's add some math.
views/score.rb
<p><%= @result %></p>
<a href="/">Play again?</a>
Dynamic websites for artists.
David Newbury — @workergnome 193
Let's add some math.
views/score.rb
<p><%= @result %></p>
<p>
<%=@wins%> have won,
<%=@losses%> have lost.
</p>
<a href="/">Play again?</a>
Dynamic websites for artists.
David Newbury — @workergnome 194
Let's add some math.
hello.rb:
if (fingers + last_fingers).odd?
@result = "you win!"
else
@result = "you lose!"
end
erb :score
Dynamic websites for artists.
David Newbury — @workergnome 195
Let's add some math.
hello.rb:
if (fingers + last_fingers).odd?
@result = "you win!"
$redis.incr("wins")
else
@result = "you lose!"
$redis.incr("losses")
end
@wins = $redis.get('wins')
@losses = $redis.get('losses')
erb :score
Dynamic websites for artists.
David Newbury — @workergnome 196
This:
$redis.incr("wins")
Dynamic websites for artists.
David Newbury — @workergnome 197
This:
$redis.incr("wins")
Is the same as this:
wins = $redis.get("wins")
wins = wins + 1
$redis.set("wins", wins)
Dynamic websites for artists.
David Newbury — @workergnome 198
This:
$redis.incr("wins")
Is the same as this:
wins = $redis.get("wins")
wins = wins + 1
$redis.set("wins", wins)
Just shorter.
Dynamic websites for artists.
David Newbury — @workergnome 199
Let's add some math.
hello.rb:
if (fingers + last_fingers).odd?
@result = "you win!"
$redis.incr("wins")
else
@result = "you lose!"
$redis.incr("losses")
end
@wins = $redis.get('wins')
@losses = $redis.get('losses')
erb :score
Dynamic websites for artists.
David Newbury — @workergnome 200
Let's try again.
Dynamic websites for artists.
David Newbury — @workergnome 201
A quantifiable success.
Dynamic websites for artists.
David Newbury — @workergnome 202
Let's push this to the internet.
Click
Dynamic websites for artists.
David Newbury — @workergnome 203
And done.
Dynamic websites for artists.
David Newbury — @workergnome 204
A big hand, everybody.
Dynamic websites for artists.
David Newbury — @workergnome 205
A big hand, everybody.
! ! ! ! ! ! ! ! !
Dynamic websites for artists.
David Newbury — @workergnome 206
What now?
Dynamic websites for artists.
David Newbury — @workergnome 207
What now?
Whatever you like.
Dynamic websites for artists.
David Newbury — @workergnome 208
CSS
Dynamic websites for artists.
David Newbury — @workergnome 209
CSS
AJAX
Dynamic websites for artists.
David Newbury — @workergnome 210
CSS
AJAX
User counts
Dynamic websites for artists.
David Newbury — @workergnome 211
CSS
AJAX
User counts
Personal scores
Dynamic websites for artists.
David Newbury — @workergnome 212
CSS
AJAX
User counts
Personal scores
Cheat detection
Dynamic websites for artists.
David Newbury — @workergnome 213
CSS
AJAX
User counts
Personal scores
Cheat detection
Completely new experiences
Dynamic websites for artists.
David Newbury — @workergnome 214
CSS
AJAX
User counts
Personal scores
Cheat detection
Completely new experiences
Go out and make cool things.
Dynamic websites for artists.
David Newbury — @workergnome 215
CSS
AJAX
User counts
Personal scores
Cheat detection
Completely new experiences
Go out and make cool things.
(And show them to me.)
Dynamic websites for artists.
David Newbury — @workergnome 216
David Newbury
@workergnome
The code: http://github.com/workergnome/dynamic-
workshop
The slides: http://www.slideshare.net/workergnome/
dynamic-websites-for-artists
Dynamic websites for artists.
David Newbury — @workergnome 217
David Newbury
@workergnome
The code: http://github.com/workergnome/dynamic-
workshop
The slides: http://www.slideshare.net/workergnome/
dynamic-websites-for-artists
Thank you.
Dynamic websites for artists.
David Newbury — @workergnome 218

More Related Content

Similar to Dynamic websites for artists.

Your first sinatra app
Your first sinatra appYour first sinatra app
Your first sinatra app
Rubyc Slides
 
Your fist RubyMotion Application
Your fist RubyMotion ApplicationYour fist RubyMotion Application
Your fist RubyMotion Application
toamitkumar
 
Frontera распределенный робот для обхода веба в больших объемах / Александр С...
Frontera распределенный робот для обхода веба в больших объемах / Александр С...Frontera распределенный робот для обхода веба в больших объемах / Александр С...
Frontera распределенный робот для обхода веба в больших объемах / Александр С...
Ontico
 
Last fm api_overview
Last fm api_overviewLast fm api_overview
Last fm api_overview
yuliang
 
Socket applications
Socket applicationsSocket applications
Socket applications
João Moura
 
DevOps for Opensource Geospatial Applications
DevOps for Opensource Geospatial ApplicationsDevOps for Opensource Geospatial Applications
DevOps for Opensource Geospatial Applications
tlpinney
 
ChefConf 2012 Spiceweasel
ChefConf 2012 SpiceweaselChefConf 2012 Spiceweasel
ChefConf 2012 Spiceweasel
Matt Ray
 

Similar to Dynamic websites for artists. (19)

"Deploying Multi-OS Applications with Docker Swarm" with Docker's David Yu
"Deploying Multi-OS Applications with Docker Swarm" with Docker's David Yu"Deploying Multi-OS Applications with Docker Swarm" with Docker's David Yu
"Deploying Multi-OS Applications with Docker Swarm" with Docker's David Yu
 
Maglev Rubyfuza, Cape Town, 2012
Maglev Rubyfuza, Cape Town, 2012Maglev Rubyfuza, Cape Town, 2012
Maglev Rubyfuza, Cape Town, 2012
 
Your first sinatra app
Your first sinatra appYour first sinatra app
Your first sinatra app
 
Your fist RubyMotion Application
Your fist RubyMotion ApplicationYour fist RubyMotion Application
Your fist RubyMotion Application
 
Frontera распределенный робот для обхода веба в больших объемах / Александр С...
Frontera распределенный робот для обхода веба в больших объемах / Александр С...Frontera распределенный робот для обхода веба в больших объемах / Александр С...
Frontera распределенный робот для обхода веба в больших объемах / Александр С...
 
"The Web Is Broken" by Bipin Upadhyay
"The Web Is Broken" by Bipin Upadhyay"The Web Is Broken" by Bipin Upadhyay
"The Web Is Broken" by Bipin Upadhyay
 
Last fm api_overview
Last fm api_overviewLast fm api_overview
Last fm api_overview
 
Socket applications
Socket applicationsSocket applications
Socket applications
 
DevOps for Opensource Geospatial Applications
DevOps for Opensource Geospatial ApplicationsDevOps for Opensource Geospatial Applications
DevOps for Opensource Geospatial Applications
 
How To Internet: The Magic Words
How To Internet:  The Magic WordsHow To Internet:  The Magic Words
How To Internet: The Magic Words
 
RubyConfBD 2013 decouple, bundle and share with ruby gems
RubyConfBD 2013   decouple, bundle and share with ruby gems RubyConfBD 2013   decouple, bundle and share with ruby gems
RubyConfBD 2013 decouple, bundle and share with ruby gems
 
Rapid API Development with LoopBack/StrongLoop
Rapid API Development with LoopBack/StrongLoopRapid API Development with LoopBack/StrongLoop
Rapid API Development with LoopBack/StrongLoop
 
Flog << Test.new
Flog << Test.newFlog << Test.new
Flog << Test.new
 
flog << Test.new
flog << Test.newflog << Test.new
flog << Test.new
 
Hybrid Apps with Ionic Framework
Hybrid Apps with Ionic FrameworkHybrid Apps with Ionic Framework
Hybrid Apps with Ionic Framework
 
From Docker to Production - SunshinePHP 2017
From Docker to Production - SunshinePHP 2017From Docker to Production - SunshinePHP 2017
From Docker to Production - SunshinePHP 2017
 
#CNX14 - Using Ruby for Reliability, Consistency, and Speed
#CNX14 - Using Ruby for Reliability, Consistency, and Speed#CNX14 - Using Ruby for Reliability, Consistency, and Speed
#CNX14 - Using Ruby for Reliability, Consistency, and Speed
 
ChefConf 2012 Spiceweasel
ChefConf 2012 SpiceweaselChefConf 2012 Spiceweasel
ChefConf 2012 Spiceweasel
 
Making Glance tasks work for you - OpenStack Summit May 2015 Vancouver
Making Glance tasks work for you - OpenStack Summit May 2015 VancouverMaking Glance tasks work for you - OpenStack Summit May 2015 Vancouver
Making Glance tasks work for you - OpenStack Summit May 2015 Vancouver
 

More from David Newbury

More from David Newbury (20)

Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
The LOD Gateway: Open Source Infrastructure for Linked Data
The LOD Gateway: Open Source Infrastructure for Linked DataThe LOD Gateway: Open Source Infrastructure for Linked Data
The LOD Gateway: Open Source Infrastructure for Linked Data
 
Linked Data on a Budget
Linked Data on a BudgetLinked Data on a Budget
Linked Data on a Budget
 
USE ME: progressive integration of IIIF with new software services at the Getty
USE ME: progressive integration of IIIF with new software services at the GettyUSE ME: progressive integration of IIIF with new software services at the Getty
USE ME: progressive integration of IIIF with new software services at the Getty
 
IIIF Across Platforms | IIIF Community Call, January 2021
IIIF Across Platforms | IIIF Community Call, January 2021IIIF Across Platforms | IIIF Community Call, January 2021
IIIF Across Platforms | IIIF Community Call, January 2021
 
IIIF Canvases as First Class Citizens
IIIF Canvases as First Class CitizensIIIF Canvases as First Class Citizens
IIIF Canvases as First Class Citizens
 
IIIF and Linked Open Data: LODLAM 2020
IIIF and Linked Open Data: LODLAM 2020IIIF and Linked Open Data: LODLAM 2020
IIIF and Linked Open Data: LODLAM 2020
 
How to Fail Interdisciplinarily
How to Fail InterdisciplinarilyHow to Fail Interdisciplinarily
How to Fail Interdisciplinarily
 
Sharing Data Across Memory Institutions
Sharing Data Across Memory InstitutionsSharing Data Across Memory Institutions
Sharing Data Across Memory Institutions
 
Extending IIIF 3.0
Extending IIIF 3.0Extending IIIF 3.0
Extending IIIF 3.0
 
NDSR Learning Enrichment: Data Models and Linked Data
NDSR Learning Enrichment: Data Models and Linked DataNDSR Learning Enrichment: Data Models and Linked Data
NDSR Learning Enrichment: Data Models and Linked Data
 
Fuzzy Dates & the Digital Humanities
Fuzzy Dates & the Digital HumanitiesFuzzy Dates & the Digital Humanities
Fuzzy Dates & the Digital Humanities
 
Telling Stories with Data: Class Notes 2
Telling Stories with Data:  Class Notes 2Telling Stories with Data:  Class Notes 2
Telling Stories with Data: Class Notes 2
 
Telling Stories With Data: Class 1
Telling Stories With Data: Class 1Telling Stories With Data: Class 1
Telling Stories With Data: Class 1
 
Art Tracks: From Provenance to Structured Data
Art Tracks: From Provenance to Structured DataArt Tracks: From Provenance to Structured Data
Art Tracks: From Provenance to Structured Data
 
Linked Data: Worse is Better
Linked Data:  Worse is BetterLinked Data:  Worse is Better
Linked Data: Worse is Better
 
Understanding D3
Understanding D3Understanding D3
Understanding D3
 
Art Tracks: A technical deep dive.
Art Tracks:  A technical deep dive.Art Tracks:  A technical deep dive.
Art Tracks: A technical deep dive.
 
Using Linked Data: American Art Collaborative, Oct. 3, 2016
Using Linked Data:  American Art Collaborative, Oct. 3, 2016Using Linked Data:  American Art Collaborative, Oct. 3, 2016
Using Linked Data: American Art Collaborative, Oct. 3, 2016
 
Data 101: Making Charts from Spreadsheets
Data 101: Making Charts from SpreadsheetsData 101: Making Charts from Spreadsheets
Data 101: Making Charts from Spreadsheets
 

Recently uploaded

一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理
一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理
一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理
AS
 
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
AS
 
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
Fi
 
一比一原版布兰迪斯大学毕业证如何办理
一比一原版布兰迪斯大学毕业证如何办理一比一原版布兰迪斯大学毕业证如何办理
一比一原版布兰迪斯大学毕业证如何办理
A
 
Jual obat aborsi Bekasi ( 085657271886 ) Cytote pil telat bulan penggugur kan...
Jual obat aborsi Bekasi ( 085657271886 ) Cytote pil telat bulan penggugur kan...Jual obat aborsi Bekasi ( 085657271886 ) Cytote pil telat bulan penggugur kan...
Jual obat aborsi Bekasi ( 085657271886 ) Cytote pil telat bulan penggugur kan...
ZurliaSoop
 
一比一原版贝德福特大学毕业证学位证书
一比一原版贝德福特大学毕业证学位证书一比一原版贝德福特大学毕业证学位证书
一比一原版贝德福特大学毕业证学位证书
F
 
@OBAT ABORSI 3 BULAN@ OBAT PENGGUGUR KANDUNGAN 3 BULAN (087776558899)
@OBAT ABORSI 3 BULAN@ OBAT PENGGUGUR KANDUNGAN 3 BULAN (087776558899)@OBAT ABORSI 3 BULAN@ OBAT PENGGUGUR KANDUNGAN 3 BULAN (087776558899)
@OBAT ABORSI 3 BULAN@ OBAT PENGGUGUR KANDUNGAN 3 BULAN (087776558899)
Obat Cytotec
 
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
Fi
 
原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样
原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样
原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样
AS
 
一比一定制(Waikato毕业证书)新西兰怀卡托大学毕业证学位证书
一比一定制(Waikato毕业证书)新西兰怀卡托大学毕业证学位证书一比一定制(Waikato毕业证书)新西兰怀卡托大学毕业证学位证书
一比一定制(Waikato毕业证书)新西兰怀卡托大学毕业证学位证书
AS
 
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
Fir
 
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
AS
 
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...
musaddumba454
 
一比一原版罗切斯特大学毕业证如何办理
一比一原版罗切斯特大学毕业证如何办理一比一原版罗切斯特大学毕业证如何办理
一比一原版罗切斯特大学毕业证如何办理
F
 

Recently uploaded (20)

一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理
一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理
一比一原版(Dundee毕业证书)英国爱丁堡龙比亚大学毕业证如何办理
 
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
一比一原版(Polytechnic毕业证书)新加坡理工学院毕业证原件一模一样
 
Free on Wednesdays T Shirts Free on Wednesdays Sweatshirts
Free on Wednesdays T Shirts Free on Wednesdays SweatshirtsFree on Wednesdays T Shirts Free on Wednesdays Sweatshirts
Free on Wednesdays T Shirts Free on Wednesdays Sweatshirts
 
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
一比一原版(UWE毕业证书)西英格兰大学毕业证原件一模一样
 
一比一原版布兰迪斯大学毕业证如何办理
一比一原版布兰迪斯大学毕业证如何办理一比一原版布兰迪斯大学毕业证如何办理
一比一原版布兰迪斯大学毕业证如何办理
 
TOP 100 Vulnerabilities Step-by-Step Guide Handbook
TOP 100 Vulnerabilities Step-by-Step Guide HandbookTOP 100 Vulnerabilities Step-by-Step Guide Handbook
TOP 100 Vulnerabilities Step-by-Step Guide Handbook
 
Down bad crying at the gym t shirtsDown bad crying at the gym t shirts
Down bad crying at the gym t shirtsDown bad crying at the gym t shirtsDown bad crying at the gym t shirtsDown bad crying at the gym t shirts
Down bad crying at the gym t shirtsDown bad crying at the gym t shirts
 
Dan Quinn Commanders Feather Dad Hat Hoodie
Dan Quinn Commanders Feather Dad Hat HoodieDan Quinn Commanders Feather Dad Hat Hoodie
Dan Quinn Commanders Feather Dad Hat Hoodie
 
Jual obat aborsi Bekasi ( 085657271886 ) Cytote pil telat bulan penggugur kan...
Jual obat aborsi Bekasi ( 085657271886 ) Cytote pil telat bulan penggugur kan...Jual obat aborsi Bekasi ( 085657271886 ) Cytote pil telat bulan penggugur kan...
Jual obat aborsi Bekasi ( 085657271886 ) Cytote pil telat bulan penggugur kan...
 
一比一原版贝德福特大学毕业证学位证书
一比一原版贝德福特大学毕业证学位证书一比一原版贝德福特大学毕业证学位证书
一比一原版贝德福特大学毕业证学位证书
 
@OBAT ABORSI 3 BULAN@ OBAT PENGGUGUR KANDUNGAN 3 BULAN (087776558899)
@OBAT ABORSI 3 BULAN@ OBAT PENGGUGUR KANDUNGAN 3 BULAN (087776558899)@OBAT ABORSI 3 BULAN@ OBAT PENGGUGUR KANDUNGAN 3 BULAN (087776558899)
@OBAT ABORSI 3 BULAN@ OBAT PENGGUGUR KANDUNGAN 3 BULAN (087776558899)
 
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
一比一原版(Soton毕业证书)南安普顿大学毕业证原件一模一样
 
原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样
原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样
原版定制(LBS毕业证书)英国伦敦商学院毕业证原件一模一样
 
一比一定制(Waikato毕业证书)新西兰怀卡托大学毕业证学位证书
一比一定制(Waikato毕业证书)新西兰怀卡托大学毕业证学位证书一比一定制(Waikato毕业证书)新西兰怀卡托大学毕业证学位证书
一比一定制(Waikato毕业证书)新西兰怀卡托大学毕业证学位证书
 
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
一比一原版(TRU毕业证书)温哥华社区学院毕业证如何办理
 
Beyond Inbound: Unlocking the Secrets of API Egress Traffic Management
Beyond Inbound: Unlocking the Secrets of API Egress Traffic ManagementBeyond Inbound: Unlocking the Secrets of API Egress Traffic Management
Beyond Inbound: Unlocking the Secrets of API Egress Traffic Management
 
APNIC Policy Roundup presented by Sunny Chendi at TWNOG 5.0
APNIC Policy Roundup presented by Sunny Chendi at TWNOG 5.0APNIC Policy Roundup presented by Sunny Chendi at TWNOG 5.0
APNIC Policy Roundup presented by Sunny Chendi at TWNOG 5.0
 
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
一比一原版(毕业证书)新加坡南洋理工学院毕业证原件一模一样
 
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...
100^%)( POLOKWANE))(*((+27838792658))*))௹ )Abortion Pills for Sale in Sibasa,...
 
一比一原版罗切斯特大学毕业证如何办理
一比一原版罗切斯特大学毕业证如何办理一比一原版罗切斯特大学毕业证如何办理
一比一原版罗切斯特大学毕业证如何办理
 

Dynamic websites for artists.

  • 1. Dynamic websites for artists. David Newbury @workergnome Dynamic websites for artists. David Newbury — @workergnome 1
  • 2. Who am I? Lead Developer, Art Tracks, Carnegie Museums. Ex-Lead Developer, American Eagle Outfitters. Ex-Lead Developer, Iontank. Dynamic websites for artists. David Newbury — @workergnome 2
  • 3. Who am I? Lead Developer, Art Tracks, Carnegie Museums. Ex-Lead Developer, American Eagle Outfitters. Ex-Lead Developer, Iontank. 11 years of freelance web development. 18 years as a professional developer. Dynamic websites for artists. David Newbury — @workergnome 3
  • 4. I can make a real website. Dynamic websites for artists. David Newbury — @workergnome 4
  • 5. Who am I? I have BA in film production. I build art installations. I make robots that make cookies. Dynamic websites for artists. David Newbury — @workergnome 5
  • 6. Who am I? I have BA in film production. I build art installations. I make robots that make cookies. I'm an artist. Dynamic websites for artists. David Newbury — @workergnome 6
  • 7. This is not how to make a real website. Dynamic websites for artists. David Newbury — @workergnome 7
  • 8. This is not how to make a real website. This is how to fake a website. Dynamic websites for artists. David Newbury — @workergnome 8
  • 9. This is not how to make a real website. This is how to fake a website. Ya know, for art. Dynamic websites for artists. David Newbury — @workergnome 9
  • 10. What we're going to do: Teach you the fast, dirty, mostly free way to build a website that can save user's data. Dynamic websites for artists. David Newbury — @workergnome 10
  • 11. What we're going to do: Show you how to: —Use Sinatra Dynamic websites for artists. David Newbury — @workergnome 11
  • 12. What we're going to do: Show you how to: —Use Sinatra —Set up a local server Dynamic websites for artists. David Newbury — @workergnome 12
  • 13. What we're going to do: Show you how to: —Use Sinatra —Set up a local server —Deploy to Heroku Dynamic websites for artists. David Newbury — @workergnome 13
  • 14. What we're going to do: Show you how to: —Use Sinatra —Set up a local server —Deploy to Heroku —Use Redis to store data Dynamic websites for artists. David Newbury — @workergnome 14
  • 15. What we're NOT going to do: —Learn HTML / CSS / Javascript Dynamic websites for artists. David Newbury — @workergnome 15
  • 16. What we're NOT going to do: —Learn HTML / CSS / Javascript —Talk about relational databases Dynamic websites for artists. David Newbury — @workergnome 16
  • 17. What we're NOT going to do: —Learn HTML / CSS / Javascript —Talk about relational databases —Talk about security Dynamic websites for artists. David Newbury — @workergnome 17
  • 18. What we're NOT going to do: —Learn HTML / CSS / Javascript —Talk about relational databases —Talk about security —Save personal, identifying information Dynamic websites for artists. David Newbury — @workergnome 18
  • 19. Read along with me. The code: http://github.com/workergnome/dynamic-workshop The slides: http://www.slideshare.net/workergnome Dynamic websites for artists. David Newbury — @workergnome 19
  • 20. Got your computer? Dynamic websites for artists. David Newbury — @workergnome 20
  • 21. Get ready. 1. Get a dropbox account. http://www.dropbox.com 2. Get a heroku account. http://www.heroku.com 3. Download Sublime Text 3 (optional) http://www.sublimetext.com/3 Dynamic websites for artists. David Newbury — @workergnome 21
  • 22. Get set. 1. Install Ruby * OSX 10.9/10.10 - ! * Old OSX - http://brew.sh * Windows - http://rubyinstaller.org 2. Install Bundler gem install bundler Dynamic websites for artists. David Newbury — @workergnome 22
  • 23. Go. 1. Create a Heroku app 2. Link it to Dropbox 3. Open the app directory in Sublime Text Dynamic websites for artists. David Newbury — @workergnome 23
  • 24. 3 files. Dynamic websites for artists. David Newbury — @workergnome 24
  • 25. File #1 Gemfile source 'https://rubygems.org' ruby '2.1.2' gem 'sinatra' Dynamic websites for artists. David Newbury — @workergnome 25
  • 26. File #2 config.ru require './hello' run Sinatra::Application Dynamic websites for artists. David Newbury — @workergnome 26
  • 27. File #3 hello.rb require 'sinatra' get '/' do "Hello World!" end Dynamic websites for artists. David Newbury — @workergnome 27
  • 28. In the terminal: cd ~/Dropbox/Apps/Heroku/[your_app_name] bundle install bundle exec rackup In a browser: http://localhost:9292 Dynamic websites for artists. David Newbury — @workergnome 28
  • 29. Blammo. You now have a locally deployed server, hosting your content. Dynamic websites for artists. David Newbury — @workergnome 29
  • 30. Blammo. You now have a locally deployed server, hosting your content. control-c will quit it. Dynamic websites for artists. David Newbury — @workergnome 30
  • 31. Potential Problems: on Windows, this error: SSLv3 read server certificate B: certificate verify failed Can be fixed with this: http://git.io/AEqB Dynamic websites for artists. David Newbury — @workergnome 31
  • 32. Deploy to the web. This is the hard part. Dynamic websites for artists. David Newbury — @workergnome 32
  • 33. Deploy to the web. Go to: https://dashboard.heroku.com/apps Dynamic websites for artists. David Newbury — @workergnome 33
  • 34. Deploy to the web. Click on your app. Dynamic websites for artists. David Newbury — @workergnome 34
  • 35. Deploy to the web. Click on . Dynamic websites for artists. David Newbury — @workergnome 35
  • 36. Deploy to the web. Type a message: Dynamic websites for artists. David Newbury — @workergnome 36
  • 37. Deploy to the web. Click Dynamic websites for artists. David Newbury — @workergnome 37
  • 38. Deploy to the web. Go to: https://[your-app-name].herokuapp.com Dynamic websites for artists. David Newbury — @workergnome 38
  • 39. Blammo.You're on the internet. Dynamic websites for artists. David Newbury — @workergnome 39
  • 40. A quiet round of applause for you. Dynamic websites for artists. David Newbury — @workergnome 40
  • 41. A quiet round of applause for you. ! ! ! ! ! ! ! ! ! Dynamic websites for artists. David Newbury — @workergnome 41
  • 42. Explanations. Gemfile source 'https://rubygems.org' ruby '2.1.2' gem 'sinatra' Dynamic websites for artists. David Newbury — @workergnome 42
  • 43. Explanations. Gemfile source 'https://rubygems.org' ruby '2.1.2' gem 'sinatra' A Gemfile lists dependencies. Dynamic websites for artists. David Newbury — @workergnome 43
  • 44. Explanations. Gemfile source 'https://rubygems.org' ruby '2.1.2' gem 'sinatra' A Gemfile lists dependencies. External libraries that you'd like to use. Dynamic websites for artists. David Newbury — @workergnome 44
  • 45. Explanations. Gemfile source 'https://rubygems.org' ruby '2.1.2' gem 'sinatra' A Gemfile lists dependencies. External libraries that you'd like to use. In ruby, these are called Gems. Dynamic websites for artists. David Newbury — @workergnome 45
  • 46. Explanations. Gemfile source 'https://rubygems.org' ruby '2.1.2' gem 'sinatra' A Gemfile lists dependencies. External libraries that you'd like to use. In ruby, these are called Gems. Gemfiles are managed by Bundler. Dynamic websites for artists. David Newbury — @workergnome 46
  • 47. http://bundler.io Dynamic websites for artists. David Newbury — @workergnome 47
  • 48. Explanations. Bundler Bundler makes sure that the dependencies of your dependencies don't conflict. Dynamic websites for artists. David Newbury — @workergnome 48
  • 49. Gemfile.lock ... rack (1.6.0) rack-protection (1.5.3) rack sinatra (1.4.5) rack (~> 1.4) rack-protection (~> 1.4) tilt (~> 1.3, >= 1.3.4) tilt (1.4.1) ... Dynamic websites for artists. David Newbury — @workergnome 49
  • 50. Explanations. We want sinatra. sinatra wants rack. sinatra also wants rack-protection. rack-protection also wants rack. We only want one copy of rack. Dynamic websites for artists. David Newbury — @workergnome 50
  • 51. Don't worry about all of this. Dynamic websites for artists. David Newbury — @workergnome 51
  • 52. Don't worry about all of this. There's only 2 things you need to know: Dynamic websites for artists. David Newbury — @workergnome 52
  • 53. #1Heroku uses the Gemfile to setup the server for you. Dynamic websites for artists. David Newbury — @workergnome 53
  • 54. #2If you want to use a library, add it to Gemfile. Dynamic websites for artists. David Newbury — @workergnome 54
  • 55. in Gemfile: source 'https://rubygems.org' ruby '2.1.2' gem 'sinatra' Dynamic websites for artists. David Newbury — @workergnome 55
  • 56. in Gemfile: source 'https://rubygems.org' ruby '2.1.2' gem 'sinatra' gem 'my-awesome-library' Dynamic websites for artists. David Newbury — @workergnome 56
  • 57. from the terminal, type: bundle install Dynamic websites for artists. David Newbury — @workergnome 57
  • 58. Explanations. config.ru require './hello' run Sinatra::Application Dynamic websites for artists. David Newbury — @workergnome 58
  • 59. Ignore this file. Dynamic websites for artists. David Newbury — @workergnome 59
  • 60. Ignore this file. It's a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications. For more information, go to http://rack.github.io. Dynamic websites for artists. David Newbury — @workergnome 60
  • 61. Ignore this file. As long as it has the line require './hello' and you have a file named hello.rb you're ! Dynamic websites for artists. David Newbury — @workergnome 61
  • 62. Explanations. Back to Sinatra. Dynamic websites for artists. David Newbury — @workergnome 62
  • 63. http://www.sinatrarb.com Dynamic websites for artists. David Newbury — @workergnome 63
  • 64. Sinatra is a small DSL for creating web sites. — Frank Sinatra Dynamic websites for artists. David Newbury — @workergnome 64
  • 65. Explanations. Hello.rb: require 'sinatra' get '/' do "Hello World!" end Dynamic websites for artists. David Newbury — @workergnome 65
  • 66. Explanations. Hello.rb: require 'sinatra' Load the Sinatra library. Dynamic websites for artists. David Newbury — @workergnome 66
  • 67. Explanations. Hello.rb: get '/' do "Hello World!" end when there's a GET request to /, return the string "Hello World!" Dynamic websites for artists. David Newbury — @workergnome 67
  • 68. Two notes about Ruby: 1. Ruby uses do...end instead of {...} 2. Ruby returns the last line by default. get '/' do "Hello World!" end in Javascript: function getIndex() { return "Hello World!"; } Dynamic websites for artists. David Newbury — @workergnome 68
  • 69. Let's make this more folksy. in the terminal: bundle exec rackup in hello.rb: require 'sinatra' get '/' do "Howdy, World!" end Dynamic websites for artists. David Newbury — @workergnome 69
  • 70. What happened? Dynamic websites for artists. David Newbury — @workergnome 70
  • 71. What happened? The server is still running the original code. Dynamic websites for artists. David Newbury — @workergnome 71
  • 72. What happened? The server is still running the original code. We could fix this by quitting and restarting. Dynamic websites for artists. David Newbury — @workergnome 72
  • 73. What happened? The server is still running the original code. We could fix this by quitting and restarting. BOOOORING. Dynamic websites for artists. David Newbury — @workergnome 73
  • 74. Let's install a library. Gemfile: source 'https://rubygems.org' ruby '2.1.2' gem 'sinatra' Dynamic websites for artists. David Newbury — @workergnome 74
  • 75. Let's install a library. Gemfile: source 'https://rubygems.org' ruby '2.1.2' gem 'sinatra' gem 'sinatra-contrib' Dynamic websites for artists. David Newbury — @workergnome 75
  • 76. Let's install a library. Gemfile: source 'https://rubygems.org' ruby '2.1.2' gem 'sinatra' gem 'sinatra-contrib' in the terminal: bundle install Dynamic websites for artists. David Newbury — @workergnome 76
  • 77. Let's install a library. hello.rb: require 'sinatra' get '/' do str = "Howdy, World!" end Dynamic websites for artists. David Newbury — @workergnome 77
  • 78. Let's install a library. hello.rb: require 'sinatra' require "sinatra/reloader" get '/' do str = "Howdy, World!" end Dynamic websites for artists. David Newbury — @workergnome 78
  • 79. Let's install a library. hello.rb: require 'sinatra' require "sinatra/reloader" if development? get '/' do str = "Howdy, World!" end Dynamic websites for artists. David Newbury — @workergnome 79
  • 80. Let's install a library. in the terminal: bundle exec rackup and http://localhost:9292 Dynamic websites for artists. David Newbury — @workergnome 80
  • 81. Dynamic websites for artists. David Newbury — @workergnome 81
  • 82. Let's make this MORE folksy. hello.rb: require 'sinatra' get '/' do "Howdy, world!" end Dynamic websites for artists. David Newbury — @workergnome 82
  • 83. Let's make this MORE folksy. hello.rb: require 'sinatra' get '/' do "Howdy, all y'all." end Dynamic websites for artists. David Newbury — @workergnome 83
  • 84. Automatic refreshing. You've installed your first gem. Dynamic websites for artists. David Newbury — @workergnome 84
  • 85. Another quiet round of applause for you. Dynamic websites for artists. David Newbury — @workergnome 85
  • 86. Another quiet round of applause for you. ! ! ! ! ! ! ! ! ! Dynamic websites for artists. David Newbury — @workergnome 86
  • 87. Plain text is boring. Dynamic websites for artists. David Newbury — @workergnome 87
  • 88. Plain text is boring. (Says the man with hevetica slides) Dynamic websites for artists. David Newbury — @workergnome 88
  • 89. Create a public folder within your application's folder and put an image in it. Dynamic websites for artists. David Newbury — @workergnome 89
  • 90. Create a public folder within your application's folder and put an image in it. Dynamic websites for artists. David Newbury — @workergnome 90
  • 91. Create a public folder within your application's folder and put an image in it. Dynamic websites for artists. David Newbury — @workergnome 91
  • 92. Let's make this EVEN MORE folksy. hello.rb: require 'sinatra' require "sinatra/reloader" if development? get '/' do "Howdy, all y'all." end Dynamic websites for artists. David Newbury — @workergnome 92
  • 93. Let's make this EVEN MORE folksy. hello.rb: require 'sinatra' require "sinatra/reloader" if development? get '/' do "Howdy, all y'all. <br> <img src='cowboy.png'>" end Dynamic websites for artists. David Newbury — @workergnome 93
  • 94. Dynamic websites for artists. David Newbury — @workergnome 94
  • 95. And if we want another URL? hello.rb: require 'sinatra' require "sinatra/reloader" if development? get '/' do "Howdy, all y'all. <br> <img src='cowboy.png'>" end get '/goodbye' do "So long, partner." end Dynamic websites for artists. David Newbury — @workergnome 95
  • 96. Dynamic websites for artists. David Newbury — @workergnome 96
  • 97. Your HTML is bad and you should feel bad. Dynamic websites for artists. David Newbury — @workergnome 97
  • 98. Dynamic websites for artists. David Newbury — @workergnome 98
  • 99. Move our pages out of the code: require 'sinatra' require "sinatra/reloader" if development? get '/' do "Howdy, all y'all. <br> <img src='cowboy.png'>" end get '/goodbye' do "So long, partner." end Dynamic websites for artists. David Newbury — @workergnome 99
  • 100. Move our pages out of the code: require 'sinatra' require "sinatra/reloader" if development? get '/' do erb :index end get '/goodbye' do erb :goodbye end Dynamic websites for artists. David Newbury — @workergnome 100
  • 101. And add them to a views folder: views/index.erb: <p> Howdy, all y'all. <br> <img src='cowboy.png'> </p> views/goodbye.erb: <p>So long, partner.</p> Dynamic websites for artists. David Newbury — @workergnome 101
  • 102. Let's make it dynamic! Dynamic websites for artists. David Newbury — @workergnome 102
  • 103. Dynamic Websites views/goodbye.erb: <p>So long, partner.</p> Dynamic websites for artists. David Newbury — @workergnome 103
  • 104. Dynamic Websites views/goodbye.erb: <p> So long, partner, see you on <%= (Date.today + 1).strftime('%A') %>! </p> Dynamic websites for artists. David Newbury — @workergnome 104
  • 105. Dynamic websites for artists. David Newbury — @workergnome 105
  • 106. And let's add a layout. views/layout.erb: <!DOCTYPE html> <html> <head> <title>Cowboys</title> </head> <body> <%= yield %> </body> </html> Dynamic websites for artists. David Newbury — @workergnome 106
  • 107. Dynamic websites for artists. David Newbury — @workergnome 107
  • 108. Are you feeling accomplished? Dynamic websites for artists. David Newbury — @workergnome 108
  • 109. Are you feeling accomplished? ! ! ! ! ! ! ! ! ! Dynamic websites for artists. David Newbury — @workergnome 109
  • 110. The web is stateless. Every webpage a new adventure. Dynamic websites for artists. David Newbury — @workergnome 110
  • 111. Sometimes we want statefullness. Dynamic websites for artists. David Newbury — @workergnome 111
  • 112. Sometimes we want statefullness. We want a session. Dynamic websites for artists. David Newbury — @workergnome 112
  • 113. Sometimes we want statefullness. We want a session. Dynamic websites for artists. David Newbury — @workergnome 113
  • 114. Sometimes we want statefullness. We want a session. Really, we just want a cookie. Dynamic websites for artists. David Newbury — @workergnome 114
  • 115. Sometimes we want statefullness. We want a session. Really, we just want a cookie. ! Dynamic websites for artists. David Newbury — @workergnome 115
  • 116. Let's add jQuery layout.erb: <!DOCTYPE html> <html> <head> <title>Cowboys</title> </head> <body> <%= yield %> </body> </html> Dynamic websites for artists. David Newbury — @workergnome 116
  • 117. Cookies let the client and the server talk. Dynamic websites for artists. David Newbury — @workergnome 117
  • 118. Cookies let the client and the server talk. ! Dynamic websites for artists. David Newbury — @workergnome 118
  • 119. For the client, we need jQuery... layout.erb: <!DOCTYPE html> <html> <head> <title>Cowboys</title> <script src='//code.jquery.com/jquery-1.11.2.min.js'></script> </head> <body> <%= yield %> </body> </html> Dynamic websites for artists. David Newbury — @workergnome 119
  • 120. We also need jQuery Cookie. Download this: http://git.io/AEq1 and save it as this: /public/jquery.cookie.js Dynamic websites for artists. David Newbury — @workergnome 120
  • 121. ...and add it to the layout. layout.erb: <!DOCTYPE html> <html> <head> <title>Cowboys</title> <script src='//code.jquery.com/jquery-1.11.2.min.js'></script> <script src='/jquery.cookie.js'></script> </head> <body> <%= yield %> </body> </html> Dynamic websites for artists. David Newbury — @workergnome 121
  • 122. And our own javascript file layout.erb: <!DOCTYPE html> <html> <head> <title>Cowboys</title> <script src='//code.jquery.com/jquery-1.11.2.min.js'></script> <script src='/jquery.cookie.js'></script> <script src='/application.js'></script> </head> <body> <%= yield %> </body> </html> Dynamic websites for artists. David Newbury — @workergnome 122
  • 123. Which we'll stick in /public public/application.js: $(function() { $.cookie('you_seen_me', true); }); Dynamic websites for artists. David Newbury — @workergnome 123
  • 124. For the server, we need "sinatra/cookies" hello.rb: require 'sinatra' require "sinatra/reloader" if development? get '/' do erb :index end get '/goodbye' do erb :goodbye end Dynamic websites for artists. David Newbury — @workergnome 124
  • 125. For the server, we need "sinatra/cookies" hello.rb: require 'sinatra' require "sinatra/reloader" if development? require "sinatra/cookies" get '/' do erb :index end get '/goodbye' do erb :goodbye end Dynamic websites for artists. David Newbury — @workergnome 125
  • 126. For the server, we need "sinatra/cookies" hello.rb: require 'sinatra' require "sinatra/reloader" if development? require "sinatra/cookies" get '/' do @you_seen_me = cookies[:you_seen_me] erb :index end get '/goodbye' do erb :goodbye end Dynamic websites for artists. David Newbury — @workergnome 126
  • 127. An aside: @variables @something is a Ruby instance variable. They exist in the ruby method and the view. Dynamic websites for artists. David Newbury — @workergnome 127
  • 128. hello.rb: get '/' do @you_seen_me = cookies[:you_seen_me] erb :index end index.erb: <p> Howdy, all y'all. <br> <% if @you_seen_me %> Welcome back! <% end %> <br> <img src='cowboy.png'> </p> Dynamic websites for artists. David Newbury — @workergnome 128
  • 129. First time you come to the site: Dynamic websites for artists. David Newbury — @workergnome 129
  • 130. Second time you come to the site: Dynamic websites for artists. David Newbury — @workergnome 130
  • 131. hello.rb: get '/' do @you_seen_me = cookies[:you_seen_me] erb :index end index.erb: <p> Howdy, all y'all. <br> <% if @you_seen_me %> Welcome back! <% end %> <br> <img src='cowboy.png'> </p> application.js: $(function() { $.cookie('you_seen_me', true); }); Dynamic websites for artists. David Newbury — @workergnome 131
  • 132. That's a dynamic website that saves user data. Dynamic websites for artists. David Newbury — @workergnome 132
  • 133. Let's push this to the internet. Click Dynamic websites for artists. David Newbury — @workergnome 133
  • 134. Done. Dynamic websites for artists. David Newbury — @workergnome 134
  • 135. I'm proud of you. Dynamic websites for artists. David Newbury — @workergnome 135
  • 136. I'm proud of you. ! ! ! ! ! ! ! ! ! Dynamic websites for artists. David Newbury — @workergnome 136
  • 137. Redis. Dynamic websites for artists. David Newbury — @workergnome 137
  • 138. http://redis.io Dynamic websites for artists. David Newbury — @workergnome 138
  • 139. Redis is a Key/Value Store. Dynamic websites for artists. David Newbury — @workergnome 139
  • 140. Redis is a Key/Value Store. @redis.set("key","value") #saves the data Dynamic websites for artists. David Newbury — @workergnome 140
  • 141. Redis is a Key/Value Store. @redis.set("key","value") #saves the data val = @redis.get("key") #val = "value" Dynamic websites for artists. David Newbury — @workergnome 141
  • 142. Redis is a Key/Value Store. @redis.set("key","value") #saves the data val = @redis.get("key") #val = "value" That's it. Dynamic websites for artists. David Newbury — @workergnome 142
  • 143. Redis is a Key/Value Store. $redis.set("key","value") #saves the data val = $redis.get("key") #val = "value" That's it. (Not really. But pretend with me.) Dynamic websites for artists. David Newbury — @workergnome 143
  • 144. Installing Redis on your computer OSX: brew install redis Dynamic websites for artists. David Newbury — @workergnome 144
  • 145. Installing Redis on your computer OSX: brew install redis Windows: Dynamic websites for artists. David Newbury — @workergnome 145
  • 146. Installing Redis on your computer OSX: brew install redis Windows: http://git.io/AEq7 Dynamic websites for artists. David Newbury — @workergnome 146
  • 147. Installing Redis on Heroku https://addons.heroku.com/rediscloud Dynamic websites for artists. David Newbury — @workergnome 147
  • 148. Installing Redis on Heroku Install it to your app. Dynamic websites for artists. David Newbury — @workergnome 148
  • 149. Installing Redis on Heroku Install it to your app. Dynamic websites for artists. David Newbury — @workergnome 149
  • 150. Let's install a library. Gemfile: source 'https://rubygems.org' ruby '2.1.2' gem 'sinatra' gem 'sinatra-contrib' Dynamic websites for artists. David Newbury — @workergnome 150
  • 151. Let's install a library. Gemfile: source 'https://rubygems.org' ruby '2.1.2' gem 'sinatra' gem 'sinatra-contrib' gem 'redis' Dynamic websites for artists. David Newbury — @workergnome 151
  • 152. Let's install a library. Gemfile: source 'https://rubygems.org' ruby '2.1.2' gem 'sinatra' gem 'sinatra-contrib' gem 'redis' in the terminal: bundle install Dynamic websites for artists. David Newbury — @workergnome 152
  • 153. hello.rb: require "sinatra/cookies" #... Dynamic websites for artists. David Newbury — @workergnome 153
  • 154. hello.rb: require "sinatra/cookies" require 'redis' configure do if development? uri = URI.parse("redis://localhost:6379") else uri = URI.parse(ENV["REDISCLOUD_URL"]) end $redis = Redis.new(host: uri.host, port: uri.port, password: uri.password) end Dynamic websites for artists. David Newbury — @workergnome 154
  • 155. hello.rb: get '/' do @you_seen_me = cookies[:you_seen_me] erb :index end Dynamic websites for artists. David Newbury — @workergnome 155
  • 156. hello.rb: get '/' do @visitors = $redis.get( 'number_of_visitors' ).to_i @you_seen_me = cookies[:you_seen_me] erb :index end Dynamic websites for artists. David Newbury — @workergnome 156
  • 157. hello.rb: get '/' do @visitors = $redis.get( 'number_of_visitors' ).to_i $redis.set( 'number_of_visitors', (@visitors + 1).to_s) @you_seen_me = cookies[:you_seen_me] erb :index end Dynamic websites for artists. David Newbury — @workergnome 157
  • 158. index.erb: <p> Howdy, all y'all. <br> <% if @you_seen_me %> Welcome back! <% end %> <br> <img src='cowboy.png'> </p> Dynamic websites for artists. David Newbury — @workergnome 158
  • 159. index.erb: <p> Howdy, all y'all. <br> <% if @you_seen_me %> Welcome back! <% end %> <br>You're visitor <%= @visitors %>! <br> <img src='cowboy.png'> </p> Dynamic websites for artists. David Newbury — @workergnome 159
  • 160. Start up Redis: on OSX: in a NEW terminal window: redis-server /usr/local/etc/redis.conf on Windows: open the redis-srv.exe file you downloaded. Dynamic websites for artists. David Newbury — @workergnome 160
  • 161. in the OLD terminal window: bundle exec rackup Dynamic websites for artists. David Newbury — @workergnome 161
  • 162. Dynamic websites for artists. David Newbury — @workergnome 162
  • 163. Let's push this to the internet. Click Dynamic websites for artists. David Newbury — @workergnome 163
  • 164. Done. Dynamic websites for artists. David Newbury — @workergnome 164
  • 165. I think you're quite wonderful. Dynamic websites for artists. David Newbury — @workergnome 165
  • 166. I think you're quite wonderful. ! ! ! ! ! ! ! ! ! Dynamic websites for artists. David Newbury — @workergnome 166
  • 167. Saving explicit user data. Dynamic websites for artists. David Newbury — @workergnome 167
  • 168. Saving explicit user data. That doesn't sound right. Dynamic websites for artists. David Newbury — @workergnome 168
  • 169. Saving explicitly provided user data. Dynamic websites for artists. David Newbury — @workergnome 169
  • 170. Let's create a form. index.erb: <img src='cowboy.png'> </p> <!--...--> Dynamic websites for artists. David Newbury — @workergnome 170
  • 171. Let's create a form. index.erb: <img src='cowboy.png'> </p> <p>Let's play the classic Cowboy game Finger Guns!</p> <p>Choose how many fingers to show, and you'll fire at the last person to play.</p> <p>If the total number of fingers is odd, you win!</p> <form action="/fire_at_will" method="post"> How Many Fingers? <input id="fingers" type="text" name="fingers"> <input id='kaboom' type="submit" value="Kaboom"> </form> Dynamic websites for artists. David Newbury — @workergnome 171
  • 172. Dynamic websites for artists. David Newbury — @workergnome 172
  • 173. Dynamic websites for artists. David Newbury — @workergnome 173
  • 174. Our post route. hello.rb: get '/goodbye' do erb :goodbye end Dynamic websites for artists. David Newbury — @workergnome 174
  • 175. Our post route. rural, of course. hello.rb: get '/goodbye' do erb :goodbye end post '/fire_at_will' do params[:fingers] end Dynamic websites for artists. David Newbury — @workergnome 175
  • 176. Let's try again. Dynamic websites for artists. David Newbury — @workergnome 176
  • 177. Best. Website. Ever. Dynamic websites for artists. David Newbury — @workergnome 177
  • 178. We can do better. hello.rb: post '/fire_at_will' do fingers = params[:fingers].to_i end Dynamic websites for artists. David Newbury — @workergnome 178
  • 179. We can do better. hello.rb: post '/fire_at_will' do fingers = params[:fingers].to_i last_fingers = $redis.get('last_fingers').to_i end Dynamic websites for artists. David Newbury — @workergnome 179
  • 180. We can do better. hello.rb: post '/fire_at_will' do fingers = params[:fingers].to_i last_fingers = $redis.get('last_fingers').to_i $redis.set('last_fingers',fingers) end Dynamic websites for artists. David Newbury — @workergnome 180
  • 181. We can do better. hello.rb: post '/fire_at_will' do fingers = params[:fingers].to_i last_fingers = $redis.get('last_fingers').to_i $redis.set('last_fingers',fingers) if (fingers + last_fingers).odd? "you win!" else "you lose!" end end Dynamic websites for artists. David Newbury — @workergnome 181
  • 182. Let's try again. Dynamic websites for artists. David Newbury — @workergnome 182
  • 183. I'm a creep. Dynamic websites for artists. David Newbury — @workergnome 183
  • 184. We've just made a game. Dynamic websites for artists. David Newbury — @workergnome 184
  • 185. We've just made a game. A terrible, terrible game. Dynamic websites for artists. David Newbury — @workergnome 185
  • 186. We've just made a game. A terrible, terrible game. How could we make it better? Dynamic websites for artists. David Newbury — @workergnome 186
  • 187. We've just made a game. A terrible, terrible game. How could we make it better? Analytics. Dynamic websites for artists. David Newbury — @workergnome 187
  • 188. hello.rb: if (fingers + last_fingers).odd? "you win!" else "you lose!" end Dynamic websites for artists. David Newbury — @workergnome 188
  • 189. hello.rb: if (fingers + last_fingers).odd? @result = "you win!" else @result = "you lose!" end erb :score Dynamic websites for artists. David Newbury — @workergnome 189
  • 190. hello.rb: if (fingers + last_fingers).odd? @result = "you win!" else @result = "you lose!" end erb :score views/score.erb: <p><%= @result %></p> <a href="/">Play again?</a> Dynamic websites for artists. David Newbury — @workergnome 190
  • 191. Let's try again. Dynamic websites for artists. David Newbury — @workergnome 191
  • 192. Things are looking up. Dynamic websites for artists. David Newbury — @workergnome 192
  • 193. Let's add some math. views/score.rb <p><%= @result %></p> <a href="/">Play again?</a> Dynamic websites for artists. David Newbury — @workergnome 193
  • 194. Let's add some math. views/score.rb <p><%= @result %></p> <p> <%=@wins%> have won, <%=@losses%> have lost. </p> <a href="/">Play again?</a> Dynamic websites for artists. David Newbury — @workergnome 194
  • 195. Let's add some math. hello.rb: if (fingers + last_fingers).odd? @result = "you win!" else @result = "you lose!" end erb :score Dynamic websites for artists. David Newbury — @workergnome 195
  • 196. Let's add some math. hello.rb: if (fingers + last_fingers).odd? @result = "you win!" $redis.incr("wins") else @result = "you lose!" $redis.incr("losses") end @wins = $redis.get('wins') @losses = $redis.get('losses') erb :score Dynamic websites for artists. David Newbury — @workergnome 196
  • 197. This: $redis.incr("wins") Dynamic websites for artists. David Newbury — @workergnome 197
  • 198. This: $redis.incr("wins") Is the same as this: wins = $redis.get("wins") wins = wins + 1 $redis.set("wins", wins) Dynamic websites for artists. David Newbury — @workergnome 198
  • 199. This: $redis.incr("wins") Is the same as this: wins = $redis.get("wins") wins = wins + 1 $redis.set("wins", wins) Just shorter. Dynamic websites for artists. David Newbury — @workergnome 199
  • 200. Let's add some math. hello.rb: if (fingers + last_fingers).odd? @result = "you win!" $redis.incr("wins") else @result = "you lose!" $redis.incr("losses") end @wins = $redis.get('wins') @losses = $redis.get('losses') erb :score Dynamic websites for artists. David Newbury — @workergnome 200
  • 201. Let's try again. Dynamic websites for artists. David Newbury — @workergnome 201
  • 202. A quantifiable success. Dynamic websites for artists. David Newbury — @workergnome 202
  • 203. Let's push this to the internet. Click Dynamic websites for artists. David Newbury — @workergnome 203
  • 204. And done. Dynamic websites for artists. David Newbury — @workergnome 204
  • 205. A big hand, everybody. Dynamic websites for artists. David Newbury — @workergnome 205
  • 206. A big hand, everybody. ! ! ! ! ! ! ! ! ! Dynamic websites for artists. David Newbury — @workergnome 206
  • 207. What now? Dynamic websites for artists. David Newbury — @workergnome 207
  • 208. What now? Whatever you like. Dynamic websites for artists. David Newbury — @workergnome 208
  • 209. CSS Dynamic websites for artists. David Newbury — @workergnome 209
  • 210. CSS AJAX Dynamic websites for artists. David Newbury — @workergnome 210
  • 211. CSS AJAX User counts Dynamic websites for artists. David Newbury — @workergnome 211
  • 212. CSS AJAX User counts Personal scores Dynamic websites for artists. David Newbury — @workergnome 212
  • 213. CSS AJAX User counts Personal scores Cheat detection Dynamic websites for artists. David Newbury — @workergnome 213
  • 214. CSS AJAX User counts Personal scores Cheat detection Completely new experiences Dynamic websites for artists. David Newbury — @workergnome 214
  • 215. CSS AJAX User counts Personal scores Cheat detection Completely new experiences Go out and make cool things. Dynamic websites for artists. David Newbury — @workergnome 215
  • 216. CSS AJAX User counts Personal scores Cheat detection Completely new experiences Go out and make cool things. (And show them to me.) Dynamic websites for artists. David Newbury — @workergnome 216
  • 217. David Newbury @workergnome The code: http://github.com/workergnome/dynamic- workshop The slides: http://www.slideshare.net/workergnome/ dynamic-websites-for-artists Dynamic websites for artists. David Newbury — @workergnome 217
  • 218. David Newbury @workergnome The code: http://github.com/workergnome/dynamic- workshop The slides: http://www.slideshare.net/workergnome/ dynamic-websites-for-artists Thank you. Dynamic websites for artists. David Newbury — @workergnome 218