Dynamic websites for artists. David Newbury @workergnome Dynamic websites for artists. David Newbury — @workergnome 1
Dynamicwebsitesfor artistsDavid Newbury workergnome
Dynamic websites for artistsDavid Newbury mdash workergnome 1
Who am I
Lead Developer Art Tracks Carnegie MuseumsEx-Lead Developer American Eagle OutfittersEx-Lead Developer Iontank
Dynamic websites for artistsDavid Newbury mdash workergnome 2
Who am I
Lead Developer Art Tracks Carnegie MuseumsEx-Lead Developer American Eagle OutfittersEx-Lead Developer Iontank11 years of freelance web development18 years as a professional developer
Dynamic websites for artistsDavid Newbury mdash workergnome 3
I can make areal website
Dynamic websites for artistsDavid Newbury mdash workergnome 4
Who am I
I have BA in film productionI build art installationsI make robots that make cookies
Dynamic websites for artistsDavid Newbury mdash workergnome 5
Who am I
I have BA in film productionI build art installationsI make robots that make cookies
Im an artist
Dynamic websites for artistsDavid Newbury mdash workergnome 6
This is not how tomake a real website
Dynamic websites for artistsDavid Newbury mdash workergnome 7
This is not how tomake a real website
This is how tofake a website
Dynamic websites for artistsDavid Newbury mdash workergnome 8
This is not how tomake a real website
This is how tofake a websiteYa know for art
Dynamic websites for artistsDavid Newbury mdash workergnome 9
What were going to do
Teach you the fast dirty mostly free wayto build a website that can save users data
Dynamic websites for artistsDavid Newbury mdash workergnome 10
What were going to do
Show you how to
mdashUse Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 11
What were going to do
Show you how to
mdashUse SinatramdashSet up a local server
Dynamic websites for artistsDavid Newbury mdash workergnome 12
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to Heroku
Dynamic websites for artistsDavid Newbury mdash workergnome 13
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to HerokumdashUse Redis to store data
Dynamic websites for artistsDavid Newbury mdash workergnome 14
What were NOT going to do
mdashLearn HTML CSS Javascript
Dynamic websites for artistsDavid Newbury mdash workergnome 15
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databases
Dynamic websites for artistsDavid Newbury mdash workergnome 16
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about security
Dynamic websites for artistsDavid Newbury mdash workergnome 17
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about securitymdashSave personal identifying information
Dynamic websites for artistsDavid Newbury mdash workergnome 18
Read along with me
The codehttpgithubcomworkergnomedynamic-workshop
The slideshttpwwwslidesharenetworkergnome
Dynamic websites for artistsDavid Newbury mdash workergnome 19
Got your computer
Dynamic websites for artistsDavid Newbury mdash workergnome 20
Get ready
1 Get a dropbox accounthttpwwwdropboxcom
2 Get a heroku accounthttpwwwherokucom
3 Download Sublime Text 3 (optional)httpwwwsublimetextcom3
Dynamic websites for artistsDavid Newbury mdash workergnome 21
Get set
1 Install Ruby OSX 1091010 - Old OSX - httpbrewsh Windows - httprubyinstallerorg
2 Install Bundlergem install bundlerDynamic websites for artistsDavid Newbury mdash workergnome 22
Go
1 Create a Heroku app2 Link it to Dropbox3 Open the app directory in Sublime Text
Dynamic websites for artistsDavid Newbury mdash workergnome 23
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Who am I
Lead Developer Art Tracks Carnegie MuseumsEx-Lead Developer American Eagle OutfittersEx-Lead Developer Iontank
Dynamic websites for artistsDavid Newbury mdash workergnome 2
Who am I
Lead Developer Art Tracks Carnegie MuseumsEx-Lead Developer American Eagle OutfittersEx-Lead Developer Iontank11 years of freelance web development18 years as a professional developer
Dynamic websites for artistsDavid Newbury mdash workergnome 3
I can make areal website
Dynamic websites for artistsDavid Newbury mdash workergnome 4
Who am I
I have BA in film productionI build art installationsI make robots that make cookies
Dynamic websites for artistsDavid Newbury mdash workergnome 5
Who am I
I have BA in film productionI build art installationsI make robots that make cookies
Im an artist
Dynamic websites for artistsDavid Newbury mdash workergnome 6
This is not how tomake a real website
Dynamic websites for artistsDavid Newbury mdash workergnome 7
This is not how tomake a real website
This is how tofake a website
Dynamic websites for artistsDavid Newbury mdash workergnome 8
This is not how tomake a real website
This is how tofake a websiteYa know for art
Dynamic websites for artistsDavid Newbury mdash workergnome 9
What were going to do
Teach you the fast dirty mostly free wayto build a website that can save users data
Dynamic websites for artistsDavid Newbury mdash workergnome 10
What were going to do
Show you how to
mdashUse Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 11
What were going to do
Show you how to
mdashUse SinatramdashSet up a local server
Dynamic websites for artistsDavid Newbury mdash workergnome 12
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to Heroku
Dynamic websites for artistsDavid Newbury mdash workergnome 13
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to HerokumdashUse Redis to store data
Dynamic websites for artistsDavid Newbury mdash workergnome 14
What were NOT going to do
mdashLearn HTML CSS Javascript
Dynamic websites for artistsDavid Newbury mdash workergnome 15
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databases
Dynamic websites for artistsDavid Newbury mdash workergnome 16
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about security
Dynamic websites for artistsDavid Newbury mdash workergnome 17
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about securitymdashSave personal identifying information
Dynamic websites for artistsDavid Newbury mdash workergnome 18
Read along with me
The codehttpgithubcomworkergnomedynamic-workshop
The slideshttpwwwslidesharenetworkergnome
Dynamic websites for artistsDavid Newbury mdash workergnome 19
Got your computer
Dynamic websites for artistsDavid Newbury mdash workergnome 20
Get ready
1 Get a dropbox accounthttpwwwdropboxcom
2 Get a heroku accounthttpwwwherokucom
3 Download Sublime Text 3 (optional)httpwwwsublimetextcom3
Dynamic websites for artistsDavid Newbury mdash workergnome 21
Get set
1 Install Ruby OSX 1091010 - Old OSX - httpbrewsh Windows - httprubyinstallerorg
2 Install Bundlergem install bundlerDynamic websites for artistsDavid Newbury mdash workergnome 22
Go
1 Create a Heroku app2 Link it to Dropbox3 Open the app directory in Sublime Text
Dynamic websites for artistsDavid Newbury mdash workergnome 23
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Who am I
Lead Developer Art Tracks Carnegie MuseumsEx-Lead Developer American Eagle OutfittersEx-Lead Developer Iontank11 years of freelance web development18 years as a professional developer
Dynamic websites for artistsDavid Newbury mdash workergnome 3
I can make areal website
Dynamic websites for artistsDavid Newbury mdash workergnome 4
Who am I
I have BA in film productionI build art installationsI make robots that make cookies
Dynamic websites for artistsDavid Newbury mdash workergnome 5
Who am I
I have BA in film productionI build art installationsI make robots that make cookies
Im an artist
Dynamic websites for artistsDavid Newbury mdash workergnome 6
This is not how tomake a real website
Dynamic websites for artistsDavid Newbury mdash workergnome 7
This is not how tomake a real website
This is how tofake a website
Dynamic websites for artistsDavid Newbury mdash workergnome 8
This is not how tomake a real website
This is how tofake a websiteYa know for art
Dynamic websites for artistsDavid Newbury mdash workergnome 9
What were going to do
Teach you the fast dirty mostly free wayto build a website that can save users data
Dynamic websites for artistsDavid Newbury mdash workergnome 10
What were going to do
Show you how to
mdashUse Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 11
What were going to do
Show you how to
mdashUse SinatramdashSet up a local server
Dynamic websites for artistsDavid Newbury mdash workergnome 12
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to Heroku
Dynamic websites for artistsDavid Newbury mdash workergnome 13
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to HerokumdashUse Redis to store data
Dynamic websites for artistsDavid Newbury mdash workergnome 14
What were NOT going to do
mdashLearn HTML CSS Javascript
Dynamic websites for artistsDavid Newbury mdash workergnome 15
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databases
Dynamic websites for artistsDavid Newbury mdash workergnome 16
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about security
Dynamic websites for artistsDavid Newbury mdash workergnome 17
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about securitymdashSave personal identifying information
Dynamic websites for artistsDavid Newbury mdash workergnome 18
Read along with me
The codehttpgithubcomworkergnomedynamic-workshop
The slideshttpwwwslidesharenetworkergnome
Dynamic websites for artistsDavid Newbury mdash workergnome 19
Got your computer
Dynamic websites for artistsDavid Newbury mdash workergnome 20
Get ready
1 Get a dropbox accounthttpwwwdropboxcom
2 Get a heroku accounthttpwwwherokucom
3 Download Sublime Text 3 (optional)httpwwwsublimetextcom3
Dynamic websites for artistsDavid Newbury mdash workergnome 21
Get set
1 Install Ruby OSX 1091010 - Old OSX - httpbrewsh Windows - httprubyinstallerorg
2 Install Bundlergem install bundlerDynamic websites for artistsDavid Newbury mdash workergnome 22
Go
1 Create a Heroku app2 Link it to Dropbox3 Open the app directory in Sublime Text
Dynamic websites for artistsDavid Newbury mdash workergnome 23
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
I can make areal website
Dynamic websites for artistsDavid Newbury mdash workergnome 4
Who am I
I have BA in film productionI build art installationsI make robots that make cookies
Dynamic websites for artistsDavid Newbury mdash workergnome 5
Who am I
I have BA in film productionI build art installationsI make robots that make cookies
Im an artist
Dynamic websites for artistsDavid Newbury mdash workergnome 6
This is not how tomake a real website
Dynamic websites for artistsDavid Newbury mdash workergnome 7
This is not how tomake a real website
This is how tofake a website
Dynamic websites for artistsDavid Newbury mdash workergnome 8
This is not how tomake a real website
This is how tofake a websiteYa know for art
Dynamic websites for artistsDavid Newbury mdash workergnome 9
What were going to do
Teach you the fast dirty mostly free wayto build a website that can save users data
Dynamic websites for artistsDavid Newbury mdash workergnome 10
What were going to do
Show you how to
mdashUse Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 11
What were going to do
Show you how to
mdashUse SinatramdashSet up a local server
Dynamic websites for artistsDavid Newbury mdash workergnome 12
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to Heroku
Dynamic websites for artistsDavid Newbury mdash workergnome 13
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to HerokumdashUse Redis to store data
Dynamic websites for artistsDavid Newbury mdash workergnome 14
What were NOT going to do
mdashLearn HTML CSS Javascript
Dynamic websites for artistsDavid Newbury mdash workergnome 15
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databases
Dynamic websites for artistsDavid Newbury mdash workergnome 16
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about security
Dynamic websites for artistsDavid Newbury mdash workergnome 17
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about securitymdashSave personal identifying information
Dynamic websites for artistsDavid Newbury mdash workergnome 18
Read along with me
The codehttpgithubcomworkergnomedynamic-workshop
The slideshttpwwwslidesharenetworkergnome
Dynamic websites for artistsDavid Newbury mdash workergnome 19
Got your computer
Dynamic websites for artistsDavid Newbury mdash workergnome 20
Get ready
1 Get a dropbox accounthttpwwwdropboxcom
2 Get a heroku accounthttpwwwherokucom
3 Download Sublime Text 3 (optional)httpwwwsublimetextcom3
Dynamic websites for artistsDavid Newbury mdash workergnome 21
Get set
1 Install Ruby OSX 1091010 - Old OSX - httpbrewsh Windows - httprubyinstallerorg
2 Install Bundlergem install bundlerDynamic websites for artistsDavid Newbury mdash workergnome 22
Go
1 Create a Heroku app2 Link it to Dropbox3 Open the app directory in Sublime Text
Dynamic websites for artistsDavid Newbury mdash workergnome 23
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Who am I
I have BA in film productionI build art installationsI make robots that make cookies
Dynamic websites for artistsDavid Newbury mdash workergnome 5
Who am I
I have BA in film productionI build art installationsI make robots that make cookies
Im an artist
Dynamic websites for artistsDavid Newbury mdash workergnome 6
This is not how tomake a real website
Dynamic websites for artistsDavid Newbury mdash workergnome 7
This is not how tomake a real website
This is how tofake a website
Dynamic websites for artistsDavid Newbury mdash workergnome 8
This is not how tomake a real website
This is how tofake a websiteYa know for art
Dynamic websites for artistsDavid Newbury mdash workergnome 9
What were going to do
Teach you the fast dirty mostly free wayto build a website that can save users data
Dynamic websites for artistsDavid Newbury mdash workergnome 10
What were going to do
Show you how to
mdashUse Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 11
What were going to do
Show you how to
mdashUse SinatramdashSet up a local server
Dynamic websites for artistsDavid Newbury mdash workergnome 12
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to Heroku
Dynamic websites for artistsDavid Newbury mdash workergnome 13
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to HerokumdashUse Redis to store data
Dynamic websites for artistsDavid Newbury mdash workergnome 14
What were NOT going to do
mdashLearn HTML CSS Javascript
Dynamic websites for artistsDavid Newbury mdash workergnome 15
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databases
Dynamic websites for artistsDavid Newbury mdash workergnome 16
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about security
Dynamic websites for artistsDavid Newbury mdash workergnome 17
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about securitymdashSave personal identifying information
Dynamic websites for artistsDavid Newbury mdash workergnome 18
Read along with me
The codehttpgithubcomworkergnomedynamic-workshop
The slideshttpwwwslidesharenetworkergnome
Dynamic websites for artistsDavid Newbury mdash workergnome 19
Got your computer
Dynamic websites for artistsDavid Newbury mdash workergnome 20
Get ready
1 Get a dropbox accounthttpwwwdropboxcom
2 Get a heroku accounthttpwwwherokucom
3 Download Sublime Text 3 (optional)httpwwwsublimetextcom3
Dynamic websites for artistsDavid Newbury mdash workergnome 21
Get set
1 Install Ruby OSX 1091010 - Old OSX - httpbrewsh Windows - httprubyinstallerorg
2 Install Bundlergem install bundlerDynamic websites for artistsDavid Newbury mdash workergnome 22
Go
1 Create a Heroku app2 Link it to Dropbox3 Open the app directory in Sublime Text
Dynamic websites for artistsDavid Newbury mdash workergnome 23
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Who am I
I have BA in film productionI build art installationsI make robots that make cookies
Im an artist
Dynamic websites for artistsDavid Newbury mdash workergnome 6
This is not how tomake a real website
Dynamic websites for artistsDavid Newbury mdash workergnome 7
This is not how tomake a real website
This is how tofake a website
Dynamic websites for artistsDavid Newbury mdash workergnome 8
This is not how tomake a real website
This is how tofake a websiteYa know for art
Dynamic websites for artistsDavid Newbury mdash workergnome 9
What were going to do
Teach you the fast dirty mostly free wayto build a website that can save users data
Dynamic websites for artistsDavid Newbury mdash workergnome 10
What were going to do
Show you how to
mdashUse Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 11
What were going to do
Show you how to
mdashUse SinatramdashSet up a local server
Dynamic websites for artistsDavid Newbury mdash workergnome 12
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to Heroku
Dynamic websites for artistsDavid Newbury mdash workergnome 13
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to HerokumdashUse Redis to store data
Dynamic websites for artistsDavid Newbury mdash workergnome 14
What were NOT going to do
mdashLearn HTML CSS Javascript
Dynamic websites for artistsDavid Newbury mdash workergnome 15
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databases
Dynamic websites for artistsDavid Newbury mdash workergnome 16
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about security
Dynamic websites for artistsDavid Newbury mdash workergnome 17
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about securitymdashSave personal identifying information
Dynamic websites for artistsDavid Newbury mdash workergnome 18
Read along with me
The codehttpgithubcomworkergnomedynamic-workshop
The slideshttpwwwslidesharenetworkergnome
Dynamic websites for artistsDavid Newbury mdash workergnome 19
Got your computer
Dynamic websites for artistsDavid Newbury mdash workergnome 20
Get ready
1 Get a dropbox accounthttpwwwdropboxcom
2 Get a heroku accounthttpwwwherokucom
3 Download Sublime Text 3 (optional)httpwwwsublimetextcom3
Dynamic websites for artistsDavid Newbury mdash workergnome 21
Get set
1 Install Ruby OSX 1091010 - Old OSX - httpbrewsh Windows - httprubyinstallerorg
2 Install Bundlergem install bundlerDynamic websites for artistsDavid Newbury mdash workergnome 22
Go
1 Create a Heroku app2 Link it to Dropbox3 Open the app directory in Sublime Text
Dynamic websites for artistsDavid Newbury mdash workergnome 23
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
This is not how tomake a real website
Dynamic websites for artistsDavid Newbury mdash workergnome 7
This is not how tomake a real website
This is how tofake a website
Dynamic websites for artistsDavid Newbury mdash workergnome 8
This is not how tomake a real website
This is how tofake a websiteYa know for art
Dynamic websites for artistsDavid Newbury mdash workergnome 9
What were going to do
Teach you the fast dirty mostly free wayto build a website that can save users data
Dynamic websites for artistsDavid Newbury mdash workergnome 10
What were going to do
Show you how to
mdashUse Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 11
What were going to do
Show you how to
mdashUse SinatramdashSet up a local server
Dynamic websites for artistsDavid Newbury mdash workergnome 12
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to Heroku
Dynamic websites for artistsDavid Newbury mdash workergnome 13
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to HerokumdashUse Redis to store data
Dynamic websites for artistsDavid Newbury mdash workergnome 14
What were NOT going to do
mdashLearn HTML CSS Javascript
Dynamic websites for artistsDavid Newbury mdash workergnome 15
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databases
Dynamic websites for artistsDavid Newbury mdash workergnome 16
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about security
Dynamic websites for artistsDavid Newbury mdash workergnome 17
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about securitymdashSave personal identifying information
Dynamic websites for artistsDavid Newbury mdash workergnome 18
Read along with me
The codehttpgithubcomworkergnomedynamic-workshop
The slideshttpwwwslidesharenetworkergnome
Dynamic websites for artistsDavid Newbury mdash workergnome 19
Got your computer
Dynamic websites for artistsDavid Newbury mdash workergnome 20
Get ready
1 Get a dropbox accounthttpwwwdropboxcom
2 Get a heroku accounthttpwwwherokucom
3 Download Sublime Text 3 (optional)httpwwwsublimetextcom3
Dynamic websites for artistsDavid Newbury mdash workergnome 21
Get set
1 Install Ruby OSX 1091010 - Old OSX - httpbrewsh Windows - httprubyinstallerorg
2 Install Bundlergem install bundlerDynamic websites for artistsDavid Newbury mdash workergnome 22
Go
1 Create a Heroku app2 Link it to Dropbox3 Open the app directory in Sublime Text
Dynamic websites for artistsDavid Newbury mdash workergnome 23
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
This is not how tomake a real website
This is how tofake a website
Dynamic websites for artistsDavid Newbury mdash workergnome 8
This is not how tomake a real website
This is how tofake a websiteYa know for art
Dynamic websites for artistsDavid Newbury mdash workergnome 9
What were going to do
Teach you the fast dirty mostly free wayto build a website that can save users data
Dynamic websites for artistsDavid Newbury mdash workergnome 10
What were going to do
Show you how to
mdashUse Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 11
What were going to do
Show you how to
mdashUse SinatramdashSet up a local server
Dynamic websites for artistsDavid Newbury mdash workergnome 12
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to Heroku
Dynamic websites for artistsDavid Newbury mdash workergnome 13
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to HerokumdashUse Redis to store data
Dynamic websites for artistsDavid Newbury mdash workergnome 14
What were NOT going to do
mdashLearn HTML CSS Javascript
Dynamic websites for artistsDavid Newbury mdash workergnome 15
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databases
Dynamic websites for artistsDavid Newbury mdash workergnome 16
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about security
Dynamic websites for artistsDavid Newbury mdash workergnome 17
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about securitymdashSave personal identifying information
Dynamic websites for artistsDavid Newbury mdash workergnome 18
Read along with me
The codehttpgithubcomworkergnomedynamic-workshop
The slideshttpwwwslidesharenetworkergnome
Dynamic websites for artistsDavid Newbury mdash workergnome 19
Got your computer
Dynamic websites for artistsDavid Newbury mdash workergnome 20
Get ready
1 Get a dropbox accounthttpwwwdropboxcom
2 Get a heroku accounthttpwwwherokucom
3 Download Sublime Text 3 (optional)httpwwwsublimetextcom3
Dynamic websites for artistsDavid Newbury mdash workergnome 21
Get set
1 Install Ruby OSX 1091010 - Old OSX - httpbrewsh Windows - httprubyinstallerorg
2 Install Bundlergem install bundlerDynamic websites for artistsDavid Newbury mdash workergnome 22
Go
1 Create a Heroku app2 Link it to Dropbox3 Open the app directory in Sublime Text
Dynamic websites for artistsDavid Newbury mdash workergnome 23
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
This is not how tomake a real website
This is how tofake a websiteYa know for art
Dynamic websites for artistsDavid Newbury mdash workergnome 9
What were going to do
Teach you the fast dirty mostly free wayto build a website that can save users data
Dynamic websites for artistsDavid Newbury mdash workergnome 10
What were going to do
Show you how to
mdashUse Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 11
What were going to do
Show you how to
mdashUse SinatramdashSet up a local server
Dynamic websites for artistsDavid Newbury mdash workergnome 12
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to Heroku
Dynamic websites for artistsDavid Newbury mdash workergnome 13
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to HerokumdashUse Redis to store data
Dynamic websites for artistsDavid Newbury mdash workergnome 14
What were NOT going to do
mdashLearn HTML CSS Javascript
Dynamic websites for artistsDavid Newbury mdash workergnome 15
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databases
Dynamic websites for artistsDavid Newbury mdash workergnome 16
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about security
Dynamic websites for artistsDavid Newbury mdash workergnome 17
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about securitymdashSave personal identifying information
Dynamic websites for artistsDavid Newbury mdash workergnome 18
Read along with me
The codehttpgithubcomworkergnomedynamic-workshop
The slideshttpwwwslidesharenetworkergnome
Dynamic websites for artistsDavid Newbury mdash workergnome 19
Got your computer
Dynamic websites for artistsDavid Newbury mdash workergnome 20
Get ready
1 Get a dropbox accounthttpwwwdropboxcom
2 Get a heroku accounthttpwwwherokucom
3 Download Sublime Text 3 (optional)httpwwwsublimetextcom3
Dynamic websites for artistsDavid Newbury mdash workergnome 21
Get set
1 Install Ruby OSX 1091010 - Old OSX - httpbrewsh Windows - httprubyinstallerorg
2 Install Bundlergem install bundlerDynamic websites for artistsDavid Newbury mdash workergnome 22
Go
1 Create a Heroku app2 Link it to Dropbox3 Open the app directory in Sublime Text
Dynamic websites for artistsDavid Newbury mdash workergnome 23
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
What were going to do
Teach you the fast dirty mostly free wayto build a website that can save users data
Dynamic websites for artistsDavid Newbury mdash workergnome 10
What were going to do
Show you how to
mdashUse Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 11
What were going to do
Show you how to
mdashUse SinatramdashSet up a local server
Dynamic websites for artistsDavid Newbury mdash workergnome 12
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to Heroku
Dynamic websites for artistsDavid Newbury mdash workergnome 13
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to HerokumdashUse Redis to store data
Dynamic websites for artistsDavid Newbury mdash workergnome 14
What were NOT going to do
mdashLearn HTML CSS Javascript
Dynamic websites for artistsDavid Newbury mdash workergnome 15
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databases
Dynamic websites for artistsDavid Newbury mdash workergnome 16
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about security
Dynamic websites for artistsDavid Newbury mdash workergnome 17
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about securitymdashSave personal identifying information
Dynamic websites for artistsDavid Newbury mdash workergnome 18
Read along with me
The codehttpgithubcomworkergnomedynamic-workshop
The slideshttpwwwslidesharenetworkergnome
Dynamic websites for artistsDavid Newbury mdash workergnome 19
Got your computer
Dynamic websites for artistsDavid Newbury mdash workergnome 20
Get ready
1 Get a dropbox accounthttpwwwdropboxcom
2 Get a heroku accounthttpwwwherokucom
3 Download Sublime Text 3 (optional)httpwwwsublimetextcom3
Dynamic websites for artistsDavid Newbury mdash workergnome 21
Get set
1 Install Ruby OSX 1091010 - Old OSX - httpbrewsh Windows - httprubyinstallerorg
2 Install Bundlergem install bundlerDynamic websites for artistsDavid Newbury mdash workergnome 22
Go
1 Create a Heroku app2 Link it to Dropbox3 Open the app directory in Sublime Text
Dynamic websites for artistsDavid Newbury mdash workergnome 23
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
What were going to do
Show you how to
mdashUse Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 11
What were going to do
Show you how to
mdashUse SinatramdashSet up a local server
Dynamic websites for artistsDavid Newbury mdash workergnome 12
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to Heroku
Dynamic websites for artistsDavid Newbury mdash workergnome 13
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to HerokumdashUse Redis to store data
Dynamic websites for artistsDavid Newbury mdash workergnome 14
What were NOT going to do
mdashLearn HTML CSS Javascript
Dynamic websites for artistsDavid Newbury mdash workergnome 15
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databases
Dynamic websites for artistsDavid Newbury mdash workergnome 16
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about security
Dynamic websites for artistsDavid Newbury mdash workergnome 17
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about securitymdashSave personal identifying information
Dynamic websites for artistsDavid Newbury mdash workergnome 18
Read along with me
The codehttpgithubcomworkergnomedynamic-workshop
The slideshttpwwwslidesharenetworkergnome
Dynamic websites for artistsDavid Newbury mdash workergnome 19
Got your computer
Dynamic websites for artistsDavid Newbury mdash workergnome 20
Get ready
1 Get a dropbox accounthttpwwwdropboxcom
2 Get a heroku accounthttpwwwherokucom
3 Download Sublime Text 3 (optional)httpwwwsublimetextcom3
Dynamic websites for artistsDavid Newbury mdash workergnome 21
Get set
1 Install Ruby OSX 1091010 - Old OSX - httpbrewsh Windows - httprubyinstallerorg
2 Install Bundlergem install bundlerDynamic websites for artistsDavid Newbury mdash workergnome 22
Go
1 Create a Heroku app2 Link it to Dropbox3 Open the app directory in Sublime Text
Dynamic websites for artistsDavid Newbury mdash workergnome 23
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
What were going to do
Show you how to
mdashUse SinatramdashSet up a local server
Dynamic websites for artistsDavid Newbury mdash workergnome 12
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to Heroku
Dynamic websites for artistsDavid Newbury mdash workergnome 13
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to HerokumdashUse Redis to store data
Dynamic websites for artistsDavid Newbury mdash workergnome 14
What were NOT going to do
mdashLearn HTML CSS Javascript
Dynamic websites for artistsDavid Newbury mdash workergnome 15
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databases
Dynamic websites for artistsDavid Newbury mdash workergnome 16
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about security
Dynamic websites for artistsDavid Newbury mdash workergnome 17
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about securitymdashSave personal identifying information
Dynamic websites for artistsDavid Newbury mdash workergnome 18
Read along with me
The codehttpgithubcomworkergnomedynamic-workshop
The slideshttpwwwslidesharenetworkergnome
Dynamic websites for artistsDavid Newbury mdash workergnome 19
Got your computer
Dynamic websites for artistsDavid Newbury mdash workergnome 20
Get ready
1 Get a dropbox accounthttpwwwdropboxcom
2 Get a heroku accounthttpwwwherokucom
3 Download Sublime Text 3 (optional)httpwwwsublimetextcom3
Dynamic websites for artistsDavid Newbury mdash workergnome 21
Get set
1 Install Ruby OSX 1091010 - Old OSX - httpbrewsh Windows - httprubyinstallerorg
2 Install Bundlergem install bundlerDynamic websites for artistsDavid Newbury mdash workergnome 22
Go
1 Create a Heroku app2 Link it to Dropbox3 Open the app directory in Sublime Text
Dynamic websites for artistsDavid Newbury mdash workergnome 23
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to Heroku
Dynamic websites for artistsDavid Newbury mdash workergnome 13
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to HerokumdashUse Redis to store data
Dynamic websites for artistsDavid Newbury mdash workergnome 14
What were NOT going to do
mdashLearn HTML CSS Javascript
Dynamic websites for artistsDavid Newbury mdash workergnome 15
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databases
Dynamic websites for artistsDavid Newbury mdash workergnome 16
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about security
Dynamic websites for artistsDavid Newbury mdash workergnome 17
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about securitymdashSave personal identifying information
Dynamic websites for artistsDavid Newbury mdash workergnome 18
Read along with me
The codehttpgithubcomworkergnomedynamic-workshop
The slideshttpwwwslidesharenetworkergnome
Dynamic websites for artistsDavid Newbury mdash workergnome 19
Got your computer
Dynamic websites for artistsDavid Newbury mdash workergnome 20
Get ready
1 Get a dropbox accounthttpwwwdropboxcom
2 Get a heroku accounthttpwwwherokucom
3 Download Sublime Text 3 (optional)httpwwwsublimetextcom3
Dynamic websites for artistsDavid Newbury mdash workergnome 21
Get set
1 Install Ruby OSX 1091010 - Old OSX - httpbrewsh Windows - httprubyinstallerorg
2 Install Bundlergem install bundlerDynamic websites for artistsDavid Newbury mdash workergnome 22
Go
1 Create a Heroku app2 Link it to Dropbox3 Open the app directory in Sublime Text
Dynamic websites for artistsDavid Newbury mdash workergnome 23
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
What were going to do
Show you how to
mdashUse SinatramdashSet up a local servermdashDeploy to HerokumdashUse Redis to store data
Dynamic websites for artistsDavid Newbury mdash workergnome 14
What were NOT going to do
mdashLearn HTML CSS Javascript
Dynamic websites for artistsDavid Newbury mdash workergnome 15
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databases
Dynamic websites for artistsDavid Newbury mdash workergnome 16
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about security
Dynamic websites for artistsDavid Newbury mdash workergnome 17
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about securitymdashSave personal identifying information
Dynamic websites for artistsDavid Newbury mdash workergnome 18
Read along with me
The codehttpgithubcomworkergnomedynamic-workshop
The slideshttpwwwslidesharenetworkergnome
Dynamic websites for artistsDavid Newbury mdash workergnome 19
Got your computer
Dynamic websites for artistsDavid Newbury mdash workergnome 20
Get ready
1 Get a dropbox accounthttpwwwdropboxcom
2 Get a heroku accounthttpwwwherokucom
3 Download Sublime Text 3 (optional)httpwwwsublimetextcom3
Dynamic websites for artistsDavid Newbury mdash workergnome 21
Get set
1 Install Ruby OSX 1091010 - Old OSX - httpbrewsh Windows - httprubyinstallerorg
2 Install Bundlergem install bundlerDynamic websites for artistsDavid Newbury mdash workergnome 22
Go
1 Create a Heroku app2 Link it to Dropbox3 Open the app directory in Sublime Text
Dynamic websites for artistsDavid Newbury mdash workergnome 23
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
What were NOT going to do
mdashLearn HTML CSS Javascript
Dynamic websites for artistsDavid Newbury mdash workergnome 15
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databases
Dynamic websites for artistsDavid Newbury mdash workergnome 16
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about security
Dynamic websites for artistsDavid Newbury mdash workergnome 17
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about securitymdashSave personal identifying information
Dynamic websites for artistsDavid Newbury mdash workergnome 18
Read along with me
The codehttpgithubcomworkergnomedynamic-workshop
The slideshttpwwwslidesharenetworkergnome
Dynamic websites for artistsDavid Newbury mdash workergnome 19
Got your computer
Dynamic websites for artistsDavid Newbury mdash workergnome 20
Get ready
1 Get a dropbox accounthttpwwwdropboxcom
2 Get a heroku accounthttpwwwherokucom
3 Download Sublime Text 3 (optional)httpwwwsublimetextcom3
Dynamic websites for artistsDavid Newbury mdash workergnome 21
Get set
1 Install Ruby OSX 1091010 - Old OSX - httpbrewsh Windows - httprubyinstallerorg
2 Install Bundlergem install bundlerDynamic websites for artistsDavid Newbury mdash workergnome 22
Go
1 Create a Heroku app2 Link it to Dropbox3 Open the app directory in Sublime Text
Dynamic websites for artistsDavid Newbury mdash workergnome 23
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databases
Dynamic websites for artistsDavid Newbury mdash workergnome 16
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about security
Dynamic websites for artistsDavid Newbury mdash workergnome 17
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about securitymdashSave personal identifying information
Dynamic websites for artistsDavid Newbury mdash workergnome 18
Read along with me
The codehttpgithubcomworkergnomedynamic-workshop
The slideshttpwwwslidesharenetworkergnome
Dynamic websites for artistsDavid Newbury mdash workergnome 19
Got your computer
Dynamic websites for artistsDavid Newbury mdash workergnome 20
Get ready
1 Get a dropbox accounthttpwwwdropboxcom
2 Get a heroku accounthttpwwwherokucom
3 Download Sublime Text 3 (optional)httpwwwsublimetextcom3
Dynamic websites for artistsDavid Newbury mdash workergnome 21
Get set
1 Install Ruby OSX 1091010 - Old OSX - httpbrewsh Windows - httprubyinstallerorg
2 Install Bundlergem install bundlerDynamic websites for artistsDavid Newbury mdash workergnome 22
Go
1 Create a Heroku app2 Link it to Dropbox3 Open the app directory in Sublime Text
Dynamic websites for artistsDavid Newbury mdash workergnome 23
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about security
Dynamic websites for artistsDavid Newbury mdash workergnome 17
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about securitymdashSave personal identifying information
Dynamic websites for artistsDavid Newbury mdash workergnome 18
Read along with me
The codehttpgithubcomworkergnomedynamic-workshop
The slideshttpwwwslidesharenetworkergnome
Dynamic websites for artistsDavid Newbury mdash workergnome 19
Got your computer
Dynamic websites for artistsDavid Newbury mdash workergnome 20
Get ready
1 Get a dropbox accounthttpwwwdropboxcom
2 Get a heroku accounthttpwwwherokucom
3 Download Sublime Text 3 (optional)httpwwwsublimetextcom3
Dynamic websites for artistsDavid Newbury mdash workergnome 21
Get set
1 Install Ruby OSX 1091010 - Old OSX - httpbrewsh Windows - httprubyinstallerorg
2 Install Bundlergem install bundlerDynamic websites for artistsDavid Newbury mdash workergnome 22
Go
1 Create a Heroku app2 Link it to Dropbox3 Open the app directory in Sublime Text
Dynamic websites for artistsDavid Newbury mdash workergnome 23
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
What were NOT going to do
mdashLearn HTML CSS JavascriptmdashTalk about relational databasesmdashTalk about securitymdashSave personal identifying information
Dynamic websites for artistsDavid Newbury mdash workergnome 18
Read along with me
The codehttpgithubcomworkergnomedynamic-workshop
The slideshttpwwwslidesharenetworkergnome
Dynamic websites for artistsDavid Newbury mdash workergnome 19
Got your computer
Dynamic websites for artistsDavid Newbury mdash workergnome 20
Get ready
1 Get a dropbox accounthttpwwwdropboxcom
2 Get a heroku accounthttpwwwherokucom
3 Download Sublime Text 3 (optional)httpwwwsublimetextcom3
Dynamic websites for artistsDavid Newbury mdash workergnome 21
Get set
1 Install Ruby OSX 1091010 - Old OSX - httpbrewsh Windows - httprubyinstallerorg
2 Install Bundlergem install bundlerDynamic websites for artistsDavid Newbury mdash workergnome 22
Go
1 Create a Heroku app2 Link it to Dropbox3 Open the app directory in Sublime Text
Dynamic websites for artistsDavid Newbury mdash workergnome 23
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Read along with me
The codehttpgithubcomworkergnomedynamic-workshop
The slideshttpwwwslidesharenetworkergnome
Dynamic websites for artistsDavid Newbury mdash workergnome 19
Got your computer
Dynamic websites for artistsDavid Newbury mdash workergnome 20
Get ready
1 Get a dropbox accounthttpwwwdropboxcom
2 Get a heroku accounthttpwwwherokucom
3 Download Sublime Text 3 (optional)httpwwwsublimetextcom3
Dynamic websites for artistsDavid Newbury mdash workergnome 21
Get set
1 Install Ruby OSX 1091010 - Old OSX - httpbrewsh Windows - httprubyinstallerorg
2 Install Bundlergem install bundlerDynamic websites for artistsDavid Newbury mdash workergnome 22
Go
1 Create a Heroku app2 Link it to Dropbox3 Open the app directory in Sublime Text
Dynamic websites for artistsDavid Newbury mdash workergnome 23
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Got your computer
Dynamic websites for artistsDavid Newbury mdash workergnome 20
Get ready
1 Get a dropbox accounthttpwwwdropboxcom
2 Get a heroku accounthttpwwwherokucom
3 Download Sublime Text 3 (optional)httpwwwsublimetextcom3
Dynamic websites for artistsDavid Newbury mdash workergnome 21
Get set
1 Install Ruby OSX 1091010 - Old OSX - httpbrewsh Windows - httprubyinstallerorg
2 Install Bundlergem install bundlerDynamic websites for artistsDavid Newbury mdash workergnome 22
Go
1 Create a Heroku app2 Link it to Dropbox3 Open the app directory in Sublime Text
Dynamic websites for artistsDavid Newbury mdash workergnome 23
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Get ready
1 Get a dropbox accounthttpwwwdropboxcom
2 Get a heroku accounthttpwwwherokucom
3 Download Sublime Text 3 (optional)httpwwwsublimetextcom3
Dynamic websites for artistsDavid Newbury mdash workergnome 21
Get set
1 Install Ruby OSX 1091010 - Old OSX - httpbrewsh Windows - httprubyinstallerorg
2 Install Bundlergem install bundlerDynamic websites for artistsDavid Newbury mdash workergnome 22
Go
1 Create a Heroku app2 Link it to Dropbox3 Open the app directory in Sublime Text
Dynamic websites for artistsDavid Newbury mdash workergnome 23
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Get set
1 Install Ruby OSX 1091010 - Old OSX - httpbrewsh Windows - httprubyinstallerorg
2 Install Bundlergem install bundlerDynamic websites for artistsDavid Newbury mdash workergnome 22
Go
1 Create a Heroku app2 Link it to Dropbox3 Open the app directory in Sublime Text
Dynamic websites for artistsDavid Newbury mdash workergnome 23
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Go
1 Create a Heroku app2 Link it to Dropbox3 Open the app directory in Sublime Text
Dynamic websites for artistsDavid Newbury mdash workergnome 23
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
3 filesDynamic websites for artistsDavid Newbury mdash workergnome 24
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
File 1
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 25
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
File 2
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 26
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
File 3
hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 27
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
In the terminal
cd ~DropboxAppsHeroku[your_app_name]bundle installbundle exec rackup
In a browser
httplocalhost9292Dynamic websites for artistsDavid Newbury mdash workergnome 28
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Blammo
You now have a locally deployed server hosting your content
Dynamic websites for artistsDavid Newbury mdash workergnome 29
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Blammo
You now have a locally deployed server hosting your content
control-c will quit it
Dynamic websites for artistsDavid Newbury mdash workergnome 30
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Potential Problems
on Windows this error
SSLv3 read server certificate B certificate verify failed
Can be fixed with this
httpgitioAEqB
Dynamic websites for artistsDavid Newbury mdash workergnome 31
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Deploy to the web
This is the hard part
Dynamic websites for artistsDavid Newbury mdash workergnome 32
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Deploy to the web
Go to
httpsdashboardherokucomapps
Dynamic websites for artistsDavid Newbury mdash workergnome 33
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Deploy to the web
Click on your app
Dynamic websites for artistsDavid Newbury mdash workergnome 34
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Deploy to the web
Click on
Dynamic websites for artistsDavid Newbury mdash workergnome 35
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Deploy to the web
Type a message
Dynamic websites for artistsDavid Newbury mdash workergnome 36
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Deploy to the web
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 37
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Deploy to the web
Go to
https[your-app-name]herokuappcom
Dynamic websites for artistsDavid Newbury mdash workergnome 38
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
BlammoYoure on the internet
Dynamic websites for artistsDavid Newbury mdash workergnome 39
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 40
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
A quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 41
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 42
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependencies
Dynamic websites for artistsDavid Newbury mdash workergnome 43
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to use
Dynamic websites for artistsDavid Newbury mdash workergnome 44
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsDynamic websites for artistsDavid Newbury mdash workergnome 45
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Explanations
Gemfilesource httpsrubygemsorgruby 212gem sinatra
A Gemfile lists dependenciesExternal libraries that youd like to useIn ruby these are called GemsGemfiles are managed by BundlerDynamic websites for artistsDavid Newbury mdash workergnome 46
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
httpbundlerio
Dynamic websites for artistsDavid Newbury mdash workergnome 47
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Explanations
BundlerBundler makes sure that the dependencies of your dependencies dont conflict
Dynamic websites for artistsDavid Newbury mdash workergnome 48
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Gemfilelock
rack (160) rack-protection (153) rack sinatra (145) rack (~gt 14) rack-protection (~gt 14) tilt (~gt 13 gt= 134) tilt (141)Dynamic websites for artistsDavid Newbury mdash workergnome 49
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Explanations
We want sinatra sinatra wants racksinatra also wants rack-protectionrack-protection also wants rack
We only want one copy of rack
Dynamic websites for artistsDavid Newbury mdash workergnome 50
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Dont worry aboutall of this
Dynamic websites for artistsDavid Newbury mdash workergnome 51
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Dont worry aboutall of thisTheres only 2 things you need to know
Dynamic websites for artistsDavid Newbury mdash workergnome 52
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
1Heroku uses the Gemfile to setup the server for youDynamic websites for artistsDavid Newbury mdash workergnome 53
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
2If you want to use a library add it to GemfileDynamic websites for artistsDavid Newbury mdash workergnome 54
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
in Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 55
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
in Gemfilesource httpsrubygemsorgruby 212gem sinatragem my-awesome-library
Dynamic websites for artistsDavid Newbury mdash workergnome 56
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
from the terminal typebundle install
Dynamic websites for artistsDavid Newbury mdash workergnome 57
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Explanations
configrurequire hellorun SinatraApplication
Dynamic websites for artistsDavid Newbury mdash workergnome 58
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Ignore this file
Dynamic websites for artistsDavid Newbury mdash workergnome 59
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Ignore this fileIts a Rack configuration file that handles the interface between the webserver and the framework while allowing middleware applications
For more information go to httprackgithubio
Dynamic websites for artistsDavid Newbury mdash workergnome 60
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Ignore this fileAs long as it has the line
require hello
and you have a file named hellorb
youre
Dynamic websites for artistsDavid Newbury mdash workergnome 61
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Explanations
Back to Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 62
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
httpwwwsinatrarbcom
Dynamic websites for artistsDavid Newbury mdash workergnome 63
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Sinatra is a small DSL for creating web sitesmdash Frank Sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 64
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Explanations
Hellorbrequire sinatra
get do Hello Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 65
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Explanations
Hellorbrequire sinatra
Load the Sinatra library
Dynamic websites for artistsDavid Newbury mdash workergnome 66
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Explanations
Hellorbget do Hello Worldend
when theres a GET request to return the string Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 67
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Two notes about Ruby
1 Ruby uses doend instead of 2 Ruby returns the last line by defaultget do Hello Worldend
in Javascriptfunction getIndex() return Hello World
Dynamic websites for artistsDavid Newbury mdash workergnome 68
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets make this more folksy
in the terminalbundle exec rackup
in hellorbrequire sinatra
get do Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 69
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
What happened
Dynamic websites for artistsDavid Newbury mdash workergnome 70
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
What happened
The server is still running the original code
Dynamic websites for artistsDavid Newbury mdash workergnome 71
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
What happened
The server is still running the original codeWe could fix this by quitting and restarting
Dynamic websites for artistsDavid Newbury mdash workergnome 72
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
What happened
The server is still running the original codeWe could fix this by quitting and restarting
BOOOORING
Dynamic websites for artistsDavid Newbury mdash workergnome 73
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatra
Dynamic websites for artistsDavid Newbury mdash workergnome 74
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 75
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 76
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets install a library
hellorbrequire sinatra
get do str = Howdy Worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 77
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets install a library
hellorbrequire sinatrarequire sinatrareloader
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 78
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets install a library
hellorbrequire sinatrarequire sinatrareloader if development
get do str = Howdy WorldendDynamic websites for artistsDavid Newbury mdash workergnome 79
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets install a library
in the terminalbundle exec rackup
and httplocalhost9292
Dynamic websites for artistsDavid Newbury mdash workergnome 80
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Dynamic websites for artistsDavid Newbury mdash workergnome 81
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy worldend
Dynamic websites for artistsDavid Newbury mdash workergnome 82
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets make this MORE folksy
hellorbrequire sinatra
get do Howdy all yallend
Dynamic websites for artistsDavid Newbury mdash workergnome 83
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Automatic refreshingYouve installed your first gem
Dynamic websites for artistsDavid Newbury mdash workergnome 84
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 85
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Another quiet round of applause for you
Dynamic websites for artistsDavid Newbury mdash workergnome 86
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Plain text is boring
Dynamic websites for artistsDavid Newbury mdash workergnome 87
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Plain text is boring(Says the man with hevetica slides)
Dynamic websites for artistsDavid Newbury mdash workergnome 88
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 89
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 90
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Create a public folderwithin your applications folderand put an image in it
Dynamic websites for artistsDavid Newbury mdash workergnome 91
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall end
Dynamic websites for artistsDavid Newbury mdash workergnome 92
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets make this EVEN MORE folksy
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
Dynamic websites for artistsDavid Newbury mdash workergnome 93
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Dynamic websites for artistsDavid Newbury mdash workergnome 94
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
And if we want another URL
hellorbrequire sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 95
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Dynamic websites for artistsDavid Newbury mdash workergnome 96
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Your HTML is badand you should feel bad
Dynamic websites for artistsDavid Newbury mdash workergnome 97
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Dynamic websites for artistsDavid Newbury mdash workergnome 98
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do Howdy all yall ltbrgt ltimg src=cowboypnggtend
get goodbye do So long partnerend
Dynamic websites for artistsDavid Newbury mdash workergnome 99
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Move our pages out of the code
require sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 100
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
And add them to a views folder
viewsindexerbltpgt Howdy all yall ltbrgt ltimg src=cowboypnggtltpgt
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 101
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets make it dynamic
Dynamic websites for artistsDavid Newbury mdash workergnome 102
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Dynamic Websites
viewsgoodbyeerbltpgtSo long partnerltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 103
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Dynamic Websites
viewsgoodbyeerbltpgt So long partner see you on lt= (Datetoday + 1)strftime(A) gtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 104
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Dynamic websites for artistsDavid Newbury mdash workergnome 105
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
And lets add a layout
viewslayouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 106
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Dynamic websites for artistsDavid Newbury mdash workergnome 107
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 108
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Are you feeling accomplished
Dynamic websites for artistsDavid Newbury mdash workergnome 109
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
The web is statelessEvery webpagea new adventure
Dynamic websites for artistsDavid Newbury mdash workergnome 110
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Sometimes we wantstatefullness
Dynamic websites for artistsDavid Newbury mdash workergnome 111
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 112
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Sometimes we wantstatefullnessWe want a session
Dynamic websites for artistsDavid Newbury mdash workergnome 113
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 114
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Sometimes we wantstatefullnessWe want a session
Really we just want a cookie
Dynamic websites for artistsDavid Newbury mdash workergnome 115
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets add jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 116
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 117
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Cookies let theclient and the server talk
Dynamic websites for artistsDavid Newbury mdash workergnome 118
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
For the client we need jQuery
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 119
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
We also need jQuery Cookie
Download this
httpgitioAEq1
and save it as thispublicjquerycookiejs
Dynamic websites for artistsDavid Newbury mdash workergnome 120
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
and add it to the layout
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 121
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
And our own javascript file
layouterbltDOCTYPE htmlgtlthtmlgtltheadgt lttitlegtCowboyslttitlegt ltscript src=codejquerycomjquery-1112minjsgtltscriptgt ltscript src=jquerycookiejsgtltscriptgt ltscript src=applicationjsgtltscriptgtltheadgtltbodygt lt= yield gtltbodygtlthtmlgt
Dynamic websites for artistsDavid Newbury mdash workergnome 122
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Which well stick in public
publicapplicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 123
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if development
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 124
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 125
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
For the server we need sinatracookies
hellorbrequire sinatrarequire sinatrareloader if developmentrequire sinatracookies
get do you_seen_me = cookies[you_seen_me] erb indexend
get goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 126
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
An aside variables
something is a Ruby instance variable
They exist in the ruby method and the view
Dynamic websites for artistsDavid Newbury mdash workergnome 127
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 128
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
First time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 129
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Second time you come to the site
Dynamic websites for artistsDavid Newbury mdash workergnome 130
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
applicationjs$(function() $cookie(you_seen_me true))
Dynamic websites for artistsDavid Newbury mdash workergnome 131
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Thats a dynamic website that saves user data
Dynamic websites for artistsDavid Newbury mdash workergnome 132
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 133
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 134
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 135
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Im proud of you
Dynamic websites for artistsDavid Newbury mdash workergnome 136
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
RedisDynamic websites for artistsDavid Newbury mdash workergnome 137
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
httpredisio
Dynamic websites for artistsDavid Newbury mdash workergnome 138
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Redis is a KeyValue Store
Dynamic websites for artistsDavid Newbury mdash workergnome 139
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Redis is a KeyValue Store
redisset(keyvalue) saves the data
Dynamic websites for artistsDavid Newbury mdash workergnome 140
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Dynamic websites for artistsDavid Newbury mdash workergnome 141
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Redis is a KeyValue Store
redisset(keyvalue) saves the dataval = redisget(key) val = value
Thats it
Dynamic websites for artistsDavid Newbury mdash workergnome 142
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Redis is a KeyValue Store
$redisset(keyvalue) saves the dataval = $redisget(key) val = value
Thats it(Not really But pretend with me)
Dynamic websites for artistsDavid Newbury mdash workergnome 143
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Installing Redis on your computer
OSXbrew install redis
Dynamic websites for artistsDavid Newbury mdash workergnome 144
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Installing Redis on your computer
OSXbrew install redis
Windows
Dynamic websites for artistsDavid Newbury mdash workergnome 145
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Installing Redis on your computer
OSXbrew install redis
Windows
httpgitioAEq7
Dynamic websites for artistsDavid Newbury mdash workergnome 146
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Installing Redis on Heroku
httpsaddonsherokucomrediscloud
Dynamic websites for artistsDavid Newbury mdash workergnome 147
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 148
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Installing Redis on Heroku
Install it to your app
Dynamic websites for artistsDavid Newbury mdash workergnome 149
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contrib
Dynamic websites for artistsDavid Newbury mdash workergnome 150
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
Dynamic websites for artistsDavid Newbury mdash workergnome 151
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets install a library
Gemfilesource httpsrubygemsorgruby 212gem sinatragem sinatra-contribgem redis
in the terminalbundle installDynamic websites for artistsDavid Newbury mdash workergnome 152
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
hellorbrequire sinatracookies
Dynamic websites for artistsDavid Newbury mdash workergnome 153
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
hellorbrequire sinatracookiesrequire redis
configure do if development uri = URIparse(redislocalhost6379) else uri = URIparse(ENV[REDISCLOUD_URL]) end $redis = Redisnew(host urihost port uriport password uripassword)end
Dynamic websites for artistsDavid Newbury mdash workergnome 154
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
hellorbget do you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 155
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
hellorbget do visitors = $redisget( number_of_visitors )to_i you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 156
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
hellorbget do visitors = $redisget( number_of_visitors )to_i $redisset( number_of_visitors (visitors + 1)to_s) you_seen_me = cookies[you_seen_me] erb indexend
Dynamic websites for artistsDavid Newbury mdash workergnome 157
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 158
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
indexerbltpgt Howdy all yall ltbrgt lt if you_seen_me gt Welcome back lt end gt ltbrgtYoure visitor lt= visitors gt ltbrgt ltimg src=cowboypnggtltpgt
Dynamic websites for artistsDavid Newbury mdash workergnome 159
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Start up Redison OSX
in a NEW terminal windowredis-server usrlocaletcredisconf
on Windows
open the redis-srvexe file you downloaded
Dynamic websites for artistsDavid Newbury mdash workergnome 160
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
in the OLD terminal window
bundle exec rackup
Dynamic websites for artistsDavid Newbury mdash workergnome 161
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Dynamic websites for artistsDavid Newbury mdash workergnome 162
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 163
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Done
Dynamic websites for artistsDavid Newbury mdash workergnome 164
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 165
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
I think youre quite wonderful
Dynamic websites for artistsDavid Newbury mdash workergnome 166
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Saving explicituser data
Dynamic websites for artistsDavid Newbury mdash workergnome 167
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Saving explicituser dataThat doesnt sound right
Dynamic websites for artistsDavid Newbury mdash workergnome 168
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Saving explicitlyprovided user data
Dynamic websites for artistsDavid Newbury mdash workergnome 169
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
lt----gt
Dynamic websites for artistsDavid Newbury mdash workergnome 170
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets create a form
indexerb ltimg src=cowboypnggtltpgt
ltpgtLets play the classic Cowboy game Finger GunsltpgtltpgtChoose how many fingers to show and youll fire at the last person to playltpgtltpgtIf the total number of fingers is odd you winltpgt ltform action=fire_at_will method=postgt How Many Fingers ltinput id=fingers type=text name=fingersgt ltinput id=kaboom type=submit value=Kaboomgtltformgt
Dynamic websites for artistsDavid Newbury mdash workergnome 171
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Dynamic websites for artistsDavid Newbury mdash workergnome 172
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Dynamic websites for artistsDavid Newbury mdash workergnome 173
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Our post route
hellorbget goodbye do erb goodbyeend
Dynamic websites for artistsDavid Newbury mdash workergnome 174
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Our post route rural of course
hellorbget goodbye do erb goodbyeend
post fire_at_will do params[fingers]endDynamic websites for artistsDavid Newbury mdash workergnome 175
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 176
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Best Website Ever
Dynamic websites for artistsDavid Newbury mdash workergnome 177
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 178
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i
end
Dynamic websites for artistsDavid Newbury mdash workergnome 179
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers)
end
Dynamic websites for artistsDavid Newbury mdash workergnome 180
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
We can do better
hellorbpost fire_at_will do fingers = params[fingers]to_i last_fingers = $redisget(last_fingers)to_i $redisset(last_fingersfingers) if (fingers + last_fingers)odd you win else you lose endend
Dynamic websites for artistsDavid Newbury mdash workergnome 181
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 182
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Im a creep
Dynamic websites for artistsDavid Newbury mdash workergnome 183
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Weve just made a game
Dynamic websites for artistsDavid Newbury mdash workergnome 184
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Weve just made a gameA terrible terrible game
Dynamic websites for artistsDavid Newbury mdash workergnome 185
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Weve just made a gameA terrible terrible gameHow could we make it better
Dynamic websites for artistsDavid Newbury mdash workergnome 186
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Weve just made a gameA terrible terrible gameHow could we make it better
AnalyticsDynamic websites for artistsDavid Newbury mdash workergnome 187
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
hellorb if (fingers + last_fingers)odd you win else you lose end
Dynamic websites for artistsDavid Newbury mdash workergnome 188
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 189
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
hellorb if (fingers + last_fingers)odd result = you win else result = you lose end erb score
viewsscoreerbltpgtlt= result gtltpgtlta href=gtPlay againltagt
Dynamic websites for artistsDavid Newbury mdash workergnome 190
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 191
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Things are looking up
Dynamic websites for artistsDavid Newbury mdash workergnome 192
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets add some math
viewsscorerbltpgtlt= result gtltpgt
lta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 193
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets add some math
viewsscorerbltpgtlt= result gtltpgtltpgt lt=winsgt have won lt=lossesgt have lostltpgtlta href=gtPlay againltagtDynamic websites for artistsDavid Newbury mdash workergnome 194
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win
else result = you lose
end
erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 195
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 196
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
This $redisincr(wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 197
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Dynamic websites for artistsDavid Newbury mdash workergnome 198
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
This $redisincr(wins)
Is the same as this wins = $redisget(wins) wins = wins + 1 $redisset(wins wins)
Just shorter
Dynamic websites for artistsDavid Newbury mdash workergnome 199
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets add some math
hellorb if (fingers + last_fingers)odd result = you win $redisincr(wins) else result = you lose $redisincr(losses) end wins = $redisget(wins) losses = $redisget(losses) erb score
Dynamic websites for artistsDavid Newbury mdash workergnome 200
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets try again
Dynamic websites for artistsDavid Newbury mdash workergnome 201
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
A quantifiable success
Dynamic websites for artistsDavid Newbury mdash workergnome 202
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
Lets push this to the internet
Click
Dynamic websites for artistsDavid Newbury mdash workergnome 203
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
And done
Dynamic websites for artistsDavid Newbury mdash workergnome 204
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 205
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
A big hand everybody
Dynamic websites for artistsDavid Newbury mdash workergnome 206
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
What now
Dynamic websites for artistsDavid Newbury mdash workergnome 207
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
What nowWhatever you like
Dynamic websites for artistsDavid Newbury mdash workergnome 208
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
CSS
Dynamic websites for artistsDavid Newbury mdash workergnome 209
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
CSSAJAX
Dynamic websites for artistsDavid Newbury mdash workergnome 210
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
CSSAJAXUser counts
Dynamic websites for artistsDavid Newbury mdash workergnome 211
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
CSSAJAXUser countsPersonal scores
Dynamic websites for artistsDavid Newbury mdash workergnome 212
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
CSSAJAXUser countsPersonal scoresCheat detection
Dynamic websites for artistsDavid Newbury mdash workergnome 213
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Dynamic websites for artistsDavid Newbury mdash workergnome 214
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things
Dynamic websites for artistsDavid Newbury mdash workergnome 215
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
CSSAJAXUser countsPersonal scoresCheat detectionCompletely new experiences
Go out and make cool things(And show them to me)
Dynamic websites for artistsDavid Newbury mdash workergnome 216
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Dynamic websites for artistsDavid Newbury mdash workergnome 217
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218
David Newburyworkergnome
The code httpgithubcomworkergnomedynamic-workshop
The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists
Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218