Top Banner
Dynamic websites for artists. David Newbury @workergnome Dynamic websites for artists. David Newbury — @workergnome 1
218
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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