Excessive Enhancement - Toster2012

Slide 1

Slide 1 text

Excessive Enhancement Phil Hawksworth @philhawksworth

Slide 2

Slide 2 text

Phil Hawksworth @philhawksworth Sex Enhancements Excessive Enhancement

Slide 3

Slide 3 text

Phil Hawksworth @philhawksworth Sex Enhancements Excessive Enhancement

Slide 4

Slide 4 text

javascript nerd @philhawksworth #toster_ru

Slide 5

Slide 5 text

f/e nerd @philhawksworth #toster_ru

Slide 6

Slide 6 text

front-end focus bleeding edge effects browser performance browser shizzle @philhawksworth #toster_ru

Slide 7

Slide 7 text

@philhawksworth #toster_ru

Slide 8

Slide 8 text

@philhawksworth #toster_ru node.js bringing javascript to the server

Slide 9

Slide 9 text

@philhawksworth #toster_ru q=simon+willison+full+frontal &ﬂesh_tones=false

Slide 10

Slide 10 text

f/e + b/e @philhawksworth #toster_ru

Slide 11

Slide 11 text

browser shizzle can do animation can do 3D effects can do dynamic data visualisations @philhawksworth #toster_ru

Slide 12

Slide 12 text

@philhawksworth #toster_ru caution

Slide 13

Slide 13 text

...so preoccupied with whether they could that they didn't stop to think if they should - Dr. Ian Malcolm @philhawksworth #toster_ru

Slide 14

Slide 14 text

Eaten by dinosaurs eaten by dinosaurs (possibly while on the toilet) @philhawksworth #toster_ru

Slide 15

Slide 15 text

@philhawksworth #toster_ru ...it’s a unix system! - Lex Murphy

Slide 16

Slide 16 text

captain killjoy running with scissors chewing with mouth open @philhawksworth #toster_ru ...but this stuff is important

Slide 17

Slide 17 text

@philhawksworth #toster_ru are we going too far with javascript to enhance our sites?

Slide 18

Slide 18 text

@philhawksworth #toster_ru the web is agreement an uber-doodle about the web by @psd

Slide 19

Slide 19 text

@philhawksworth #toster_ru

Slide 20

Slide 20 text

@philhawksworth #toster_ru

Slide 21

Slide 21 text

@philhawksworth #toster_ru

Slide 22

Slide 22 text

the uri is the thing another uber-doodle about the web by @psd @philhawksworth #toster_ru

Slide 23

Slide 23 text

@philhawksworth #toster_ru

Slide 24

Slide 24 text

@philhawksworth #toster_ru

Slide 25

Slide 25 text

@philhawksworth #toster_ru

Slide 26

Slide 26 text

@philhawksworth #toster_ru

Slide 27

Slide 27 text

agreement the contract of the URI @philhawksworth #toster_ru

Slide 28

Slide 28 text

not a lecture on REST @philhawksworth #toster_ru

Slide 29

Slide 29 text

representation of content ask, and ye shall receive GET http://some.stuff @philhawksworth #toster_ru

Slide 30

Slide 30 text

the seductive power of the possible @philhawksworth #toster_ru

Slide 31

Slide 31 text

html5 whatever that is @philhawksworth #toster_ru

Slide 32

Slide 32 text

ﬂash mistakes made with @philhawksworth #toster_ru

Slide 33

Slide 33 text

anti-ﬂash mob! you’re a member of the @philhawksworth #toster_ru

Slide 34

Slide 34 text

snooty attitude of many web developers copyright Chris Kennett @philhawksworth #toster_ru

Slide 35

Slide 35 text

common criticisms @philhawksworth #toster_ru

Slide 36

Slide 36 text

frozen content copy / paste bookmarkable accessible searchable @philhawksworth #toster_ru @philhawksworth #toster_ru

Slide 37

Slide 37 text

ﬂash *can* do it @philhawksworth #toster_ru

Slide 38

Slide 38 text

"show me" @philhawksworth #toster_ru

Slide 39

Slide 39 text

pixels > the web @philhawksworth #toster_ru

Slide 40

Slide 40 text

what is valued by the developers? @philhawksworth #toster_ru

Slide 41

Slide 41 text

how did they get here? photoshop adobe suite ﬂash @philhawksworth #toster_ru

Slide 42

Slide 42 text

care more about the sex appeal ...than the fundamentals of the web @philhawksworth #toster_ru

Slide 43

Slide 43 text

the seductive power of the possible @philhawksworth #toster_ru

Slide 44

Slide 44 text

@philhawksworth #toster_ru @philhawksworth #toster_ru richer user experiences increased sophistication

Slide 45

Slide 45 text

@philhawksworth #toster_ru

Slide 46

Slide 46 text

@philhawksworth #toster_ru 1996

Slide 47

Slide 47 text

@philhawksworth #toster_ru

Slide 48

Slide 48 text

@philhawksworth #toster_ru

Slide 49

Slide 49 text

@philhawksworth #toster_ru

Slide 50

Slide 50 text

@philhawksworth #toster_ru

Slide 51

Slide 51 text

@philhawksworth #toster_ru

Slide 52

Slide 52 text

@philhawksworth #toster_ru @philhawksworth #toster_ru 2011

Slide 53

Slide 53 text

http://beetle.de a rich user experience open Web technologies ...and why I think it sucks @philhawksworth #toster_ru @philhawksworth #toster_ru

Slide 54

Slide 54 text

@philhawksworth #toster_ru @philhawksworth #toster_ru ~13 seconds operator instructions @philhawksworth #toster_ru

Slide 55

Slide 55 text

11mb images 251 http requests missing cache expiration @philhawksworth #toster_ru

Slide 56

Slide 56 text

15mb images 316 http requests missing cache expiration @philhawksworth #toster_ru

Slide 57

Slide 57 text

@philhawksworth #toster_ru

Slide 58

Slide 58 text

4mb images 314 http requests @philhawksworth #toster_ru

Slide 59

Slide 59 text

@philhawksworth #toster_ru @philhawksworth #toster_ru

Slide 60

Slide 60 text

...so preoccupied with whether they could that they didn't stop to think if they should - Dr. Ian Malcolm @philhawksworth #toster_ru that is really rather a lot of http requests for a web site about a car. - Dr. Ian Malcolm

Slide 61

Slide 61 text

Eaten by dinosaurs @philhawksworth #toster_ru

Slide 62

Slide 62 text

/reduced but... it will work on an iPhone @philhawksworth #toster_ru http://beetle.de/full

Slide 63

Slide 63 text

@philhawksworth #toster_ru who cares about iPhones?

Slide 64

Slide 64 text

@philhawksworth #toster_ru who cares about iPads?

Slide 65

Slide 65 text

@philhawksworth #toster_ru

Slide 66

Slide 66 text

@philhawksworth #toster_ru target the real audience

Slide 67

Slide 67 text

@philhawksworth #toster_ru “why don’t the f***ing wheels f***ing move?!!” @bruised_blood hijacking the links @philhawksworth #toster_ru

Slide 68

Slide 68 text

pixels the web > @philhawksworth #toster_ru

Slide 69

Slide 69 text

without javascript? @philhawksworth #toster_ru

Slide 70

Slide 70 text

@philhawksworth #toster_ru

Slide 71

Slide 71 text

@philhawksworth #toster_ru

Slide 72

Slide 72 text

what is the address of that content? @philhawksworth #toster_ru

Slide 73

Slide 73 text

URIs are what make the Web a web @philhawksworth #toster_ru

Slide 74

Slide 74 text

forgotten how the web works @philhawksworth #toster_ru

Slide 75

Slide 75 text

@philhawksworth #toster_ru being seduced by the possible

Slide 76

Slide 76 text

@philhawksworth #toster_ru effective campaign? longevity? all the users? good or great?

Slide 77

Slide 77 text

@philhawksworth #toster_ru why u no shizzle?

Slide 78

Slide 78 text

@philhawksworth #toster_ru curl http://some.stuff

Slide 79

Slide 79 text

@philhawksworth #toster_ru

Slide 80

Slide 80 text

twitter.com is not a web site (except, of course it is) @philhawksworth #toster_ru @philhawksworth #toster_ru

Slide 81

Slide 81 text

@philhawksworth #toster_ru @philhawksworth #toster_ru

Slide 82

Slide 82 text

twitter is a platform everything uses the API @philhawksworth #toster_ru @philhawksworth #toster_ru

Slide 83

Slide 83 text

"twitter web client" @philhawksworth #toster_ru

Slide 84

Slide 84 text

without javascript? @philhawksworth #toster_ru

Slide 85

Slide 85 text

@philhawksworth #toster_ru

Slide 86

Slide 86 text

@philhawksworth #toster_ru twitter.com

Slide 87

Slide 87 text

@philhawksworth #toster_ru twitter.com twitter.com /#!/jaffathecake/status/173574727531638785

Slide 88

Slide 88 text

@philhawksworth #toster_ru twitter.com /#!/jaffathecake/status/173574727531638785

Slide 89

Slide 89 text

but nobody has javascript disabled missing the point @philhawksworth #toster_ru

Slide 90

Slide 90 text

what about the contract of the URI? @philhawksworth #toster_ru

Slide 91

Slide 91 text

what about performance? @philhawksworth #toster_ru

Slide 92

Slide 92 text

@philhawksworth #toster_ru not known at this address

Slide 93

Slide 93 text

@philhawksworth #toster_ru

Slide 94

Slide 94 text

@philhawksworth #toster_ru http://twitter.com/#!/aroundheresomewhere

Slide 95

Slide 95 text

@philhawksworth #toster_ru http://twitter.com/aroundheresomewhere

Slide 96

Slide 96 text

@philhawksworth #toster_ru

Slide 97

Slide 97 text

@philhawksworth #toster_ru the damage is done

Slide 98

Slide 98 text

@philhawksworth #toster_ru linkrot

Slide 99

Slide 99 text

@philhawksworth #toster_ru

Slide 100

Slide 100 text

#! shbang @philhawksworth #toster_ru

Slide 101

Slide 101 text

#! why use ? (?)! @philhawksworth #toster_ru

Slide 102

Slide 102 text

# @philhawksworth #toster_ru window.location.hash

Slide 103

Slide 103 text

client-side routing client-side processing @philhawksworth #toster_ru

Slide 104

Slide 104 text

@philhawksworth #toster_ru enable history navigation

Slide 105

Slide 105 text

@philhawksworth #toster_ru apaque to the google bot

Slide 106

Slide 106 text

@philhawksworth #toster_ru google ajax crawling #! http://code.google.com/web/ajaxcrawling/

Slide 107

Slide 107 text

interface shizzle doesn't have to break the uri @philhawksworth #toster_ru

Slide 108

Slide 108 text

@philhawksworth #toster_ru

Slide 109

Slide 109 text

@philhawksworth #toster_ru

Slide 110

Slide 110 text

html5 @philhawksworth #toster_ru history api

Slide 111

Slide 111 text

@philhawksworth #toster_ru

Slide 112

Slide 112 text

@philhawksworth #toster_ru

Slide 113

Slide 113 text

client-side routing client-side processing @philhawksworth #toster_ru

Slide 114

Slide 114 text

fashionable single page apps @philhawksworth #toster_ru

Slide 115

Slide 115 text

helper libraries levi routes http://github.com/PaulKinlan/leviroutes @philhawksworth #toster_ru

Slide 116

Slide 116 text

@philhawksworth #toster_ru 2k javascript library unobtrusive progressive enhancement

Slide 117

Slide 117 text

demos & developer tools @philhawksworth #toster_ru

Slide 118

Slide 118 text

@philhawksworth #toster_ru

Slide 119

Slide 119 text

@philhawksworth #toster_ru

Slide 120

Slide 120 text

just a demo the biggest danger is when that demo mentality leaks into production websites @brucel @philhawksworth #toster_ru

Slide 121

Slide 121 text

developer tools @philhawksworth #toster_ru libraries and utilities

Slide 122

Slide 122 text

developer tools @philhawksworth #toster_ru

Slide 123

Slide 123 text

@philhawksworth #toster_ru beware of magic

Slide 124

Slide 124 text

"it looks like you're making a snazzy web site..." would you like me to screw it up for you? @philhawksworth #toster_ru we've been here before

Slide 125

Slide 125 text

@philhawksworth #toster_ru remember take care of the uri consider all of your users value the pixels and the Web enhance gracefully dinosaur theme parks often end badly

Slide 126

Slide 126 text

experiment & explore @philhawksworth #toster_ru but take care of the web

Slide 127

Slide 127 text

http://www.flickr.com/photos/shelbob/67089485 http://www.flickr.com/photos/psd/1805709102/ http://www.flickr.com/photos/psd/421186578/ http://crikeyboy.blogspot.com/2009/05/illustration-friday-hierarchy.html http://www.flickr.com/photos/57742619@N04/5959324249 http://stephenwaller.tumblr.com/ http://www.flickr.com/photos/e-coli/3888542890 http://www.flickr.com/photos/theredproject/2831350088 http://www.flickr.com/photos/dcjohn/8474890 @philhawksworth #toster_ru thanks & links http://thewebisagreement.com/ http://en.wikipedia.org/wiki/Robustness_principle http://code.google.com/web/ajaxcrawling http://github.com/blog/760-the-tree-slider http://www.w3.org/TR/html5/history.html http://www.whatwg.org/specs/web-apps/current-work/#event-popstate https://developer.mozilla.org/en/DOM/window.onpopstate http://github.com/PaulKinlan/leviroutes http://christianheilmann.com/2011/08/15/getting-rusty-we-need-new- best-practices-for-a-different-development-world/ http://www.w3.org/QA/2011/05/hash_uris.html #toster_ru @philhawksworth

Slide 128

Slide 128 text

@philhawksworth #toster_ru #toster_ru thanks! @philhawksworth