218
Dynamic websites for artists. David Newbury @workergnome Dynamic websites for artists. David Newbury — @workergnome 1

Dynamic websites for artists

Embed Size (px)

Citation preview

Page 1: Dynamic websites for artists

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

Page 2: Dynamic websites for artists

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

Page 3: Dynamic websites for artists

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

Page 4: Dynamic websites for artists

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

Page 5: Dynamic websites for artists

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

Page 6: Dynamic websites for artists

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

Page 7: Dynamic websites for artists

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

Page 8: Dynamic websites for artists

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

Page 9: Dynamic websites for artists

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

Page 10: Dynamic websites for artists

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

Page 11: Dynamic websites for artists

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

Page 12: Dynamic websites for artists

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

Page 13: Dynamic websites for artists

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

Page 14: Dynamic websites for artists

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

Page 15: Dynamic websites for artists

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

Page 16: Dynamic websites for artists

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

Page 17: Dynamic websites for artists

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

Page 18: Dynamic websites for artists

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

Page 19: Dynamic websites for artists

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

Page 20: Dynamic websites for artists

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

Page 21: Dynamic websites for artists

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

Page 22: Dynamic websites for artists

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

Page 23: Dynamic websites for artists

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

Page 24: Dynamic websites for artists

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

Page 25: Dynamic websites for artists

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

Page 26: Dynamic websites for artists

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

Page 27: Dynamic websites for artists

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

Page 28: Dynamic websites for artists

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

Page 29: Dynamic websites for artists

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

Page 30: Dynamic websites for artists

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

Page 31: Dynamic websites for artists

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

Page 32: Dynamic websites for artists

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

Page 33: Dynamic websites for artists

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

Page 34: Dynamic websites for artists

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

Page 35: Dynamic websites for artists

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

Page 36: Dynamic websites for artists

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

Page 37: Dynamic websites for artists

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

Page 38: Dynamic websites for artists

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

Page 39: Dynamic websites for artists

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

Page 40: Dynamic websites for artists

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

Page 41: Dynamic websites for artists

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

Page 42: Dynamic websites for artists

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

Page 43: Dynamic websites for artists

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

Page 44: Dynamic websites for artists

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

Page 45: Dynamic websites for artists

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

Page 46: Dynamic websites for artists

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

Page 47: Dynamic websites for artists

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

Page 48: Dynamic websites for artists

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

Page 49: Dynamic websites for artists

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

Page 50: Dynamic websites for artists

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

Page 51: Dynamic websites for artists

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

Page 52: Dynamic websites for artists

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

Page 53: Dynamic websites for artists

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

Page 54: Dynamic websites for artists

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

Page 55: Dynamic websites for artists

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

Page 56: Dynamic websites for artists

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

Page 57: Dynamic websites for artists

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

Page 58: Dynamic websites for artists

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

Page 59: Dynamic websites for artists

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

Page 60: Dynamic websites for artists

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

Page 61: Dynamic websites for artists

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

Page 62: Dynamic websites for artists

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

Page 63: Dynamic websites for artists

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

Page 64: Dynamic websites for artists

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

Page 65: Dynamic websites for artists

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

Page 66: Dynamic websites for artists

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

Page 67: Dynamic websites for artists

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

Page 68: Dynamic websites for artists

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

Page 69: Dynamic websites for artists

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

Page 70: Dynamic websites for artists

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

Page 71: Dynamic websites for artists

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

Page 72: Dynamic websites for artists

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

Page 73: Dynamic websites for artists

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

Page 74: Dynamic websites for artists

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

Page 75: Dynamic websites for artists

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

Page 76: Dynamic websites for artists

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

Page 77: Dynamic websites for artists

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

Page 78: Dynamic websites for artists

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

Page 79: Dynamic websites for artists

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

Page 80: Dynamic websites for artists

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

Page 81: Dynamic websites for artists

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

Page 82: Dynamic websites for artists

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

Page 83: Dynamic websites for artists

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

Page 84: Dynamic websites for artists

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

Page 85: Dynamic websites for artists

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

Page 86: Dynamic websites for artists

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

Page 87: Dynamic websites for artists

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

Page 88: Dynamic websites for artists

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

Page 89: Dynamic websites for artists

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

Page 90: Dynamic websites for artists

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

Page 91: Dynamic websites for artists

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

Page 92: Dynamic websites for artists

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

Page 93: Dynamic websites for artists

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

Page 94: Dynamic websites for artists

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

Page 95: Dynamic websites for artists

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

Page 96: Dynamic websites for artists

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

Page 97: Dynamic websites for artists

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

Page 98: Dynamic websites for artists

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

Page 99: Dynamic websites for artists

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

Page 100: Dynamic websites for artists

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

Page 101: Dynamic websites for artists

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

Page 102: Dynamic websites for artists

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

Page 103: Dynamic websites for artists

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

Page 104: Dynamic websites for artists

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

Page 105: Dynamic websites for artists

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

Page 106: Dynamic websites for artists

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

Page 107: Dynamic websites for artists

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

Page 108: Dynamic websites for artists

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

Page 109: Dynamic websites for artists

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

Page 110: Dynamic websites for artists

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

Page 111: Dynamic websites for artists

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

Page 112: Dynamic websites for artists

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

Page 113: Dynamic websites for artists

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

Page 114: Dynamic websites for artists

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

Page 115: Dynamic websites for artists

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

Page 116: Dynamic websites for artists

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

Page 117: Dynamic websites for artists

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

Page 118: Dynamic websites for artists

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

Page 119: Dynamic websites for artists

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

Page 120: Dynamic websites for artists

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

Page 121: Dynamic websites for artists

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

Page 122: Dynamic websites for artists

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

Page 123: Dynamic websites for artists

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

Page 124: Dynamic websites for artists

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

Page 125: Dynamic websites for artists

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

Page 126: Dynamic websites for artists

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

Page 127: Dynamic websites for artists

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

Page 128: Dynamic websites for artists

hellorbget do you_seen_me = cookies[you_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

Page 129: Dynamic websites for artists

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

Page 130: Dynamic websites for artists

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

Page 131: Dynamic websites for artists

hellorbget do you_seen_me = cookies[you_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

Page 132: Dynamic websites for artists

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

Page 133: Dynamic websites for artists

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

Page 134: Dynamic websites for artists

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

Page 135: Dynamic websites for artists

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

Page 136: Dynamic websites for artists

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

Page 137: Dynamic websites for artists

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

Page 138: Dynamic websites for artists

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

Page 139: Dynamic websites for artists

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

Page 140: Dynamic websites for artists

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

Page 141: Dynamic websites for artists

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

Page 142: Dynamic websites for artists

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

Page 143: Dynamic websites for artists

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

Page 144: Dynamic websites for artists

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

Page 145: Dynamic websites for artists

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

Page 146: Dynamic websites for artists

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

Page 147: Dynamic websites for artists

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

Page 148: Dynamic websites for artists

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

Page 149: Dynamic websites for artists

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

Page 150: Dynamic websites for artists

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

Page 151: Dynamic websites for artists

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

Page 152: Dynamic websites for artists

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

Page 153: Dynamic websites for artists

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

Page 154: Dynamic websites for artists

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

Page 155: Dynamic websites for artists

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

Page 156: Dynamic websites for artists

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

Page 157: Dynamic websites for artists

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

Page 158: Dynamic websites for artists

indexerbltpgt Howdy all 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

Page 159: Dynamic websites for artists

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

Page 160: Dynamic websites for artists

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

Page 161: Dynamic websites for artists

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

Page 162: Dynamic websites for artists

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

Page 163: Dynamic websites for artists

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

Page 164: Dynamic websites for artists

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

Page 165: Dynamic websites for artists

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

Page 166: Dynamic websites for artists

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

Page 167: Dynamic websites for artists

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

Page 168: Dynamic websites for artists

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

Page 169: Dynamic websites for artists

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

Page 170: Dynamic websites for artists

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

Page 171: Dynamic websites for artists

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

Page 172: Dynamic websites for artists

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

Page 173: Dynamic websites for artists

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

Page 174: Dynamic websites for artists

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

Page 175: Dynamic websites for artists

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

Page 176: Dynamic websites for artists

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

Page 177: Dynamic websites for artists

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

Page 178: Dynamic websites for artists

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

Page 179: Dynamic websites for artists

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

Page 180: Dynamic websites for artists

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

Page 181: Dynamic websites for artists

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

Page 182: Dynamic websites for artists

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

Page 183: Dynamic websites for artists

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

Page 184: Dynamic websites for artists

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

Page 185: Dynamic websites for artists

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

Page 186: Dynamic websites for artists

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

Page 187: Dynamic websites for artists

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

Page 188: Dynamic websites for artists

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

Page 189: Dynamic websites for artists

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

Page 190: Dynamic websites for artists

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

Page 191: Dynamic websites for artists

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

Page 192: Dynamic websites for artists

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

Page 193: Dynamic websites for artists

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

Page 194: Dynamic websites for artists

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

Page 195: Dynamic websites for artists

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

Page 196: Dynamic websites for artists

Lets add some math

hellorb if (fingers + last_fingers)odd result = you win $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

Page 197: Dynamic websites for artists

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

Page 198: Dynamic websites for artists

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

Page 199: Dynamic websites for artists

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

Page 200: Dynamic websites for artists

Lets add some math

hellorb if (fingers + last_fingers)odd result = you win $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

Page 201: Dynamic websites for artists

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

Page 202: Dynamic websites for artists

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

Page 203: Dynamic websites for artists

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

Page 204: Dynamic websites for artists

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

Page 205: Dynamic websites for artists

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

Page 206: Dynamic websites for artists

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

Page 207: Dynamic websites for artists

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

Page 208: Dynamic websites for artists

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

Page 209: Dynamic websites for artists

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

Page 210: Dynamic websites for artists

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

Page 211: Dynamic websites for artists

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

Page 212: Dynamic websites for artists

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

Page 213: Dynamic websites for artists

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

Page 214: Dynamic websites for artists

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

Page 215: Dynamic websites for artists

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

Page 216: Dynamic websites for artists

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

Page 217: Dynamic websites for artists

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

Page 218: Dynamic websites for artists

David Newburyworkergnome

The code httpgithubcomworkergnomedynamic-workshop

The slides httpwwwslidesharenetworkergnomedynamic-websites-for-artists

Thank youDynamic websites for artistsDavid Newbury mdash workergnome 218