Excessive Enhancement - SXSW2012

by Phil Hawksworth

Slide 1

Slide 1 text

Excessive Enhancement Phil Hawksworth @philhawksworth

Slide 2

Slide 2 text

Sex Enhancements Phil Hawksworth @philhawksworth Excessive Enhancement

Slide 3

Slide 3 text

Sex Enhancements Phil Hawksworth @philhawksworth Excessive Enhancement

Slide 4

Slide 4 text

#sxexcess

Slide 5

Slide 5 text

#sxexcess

Slide 6

Slide 6 text

#excess

Slide 7

Slide 7 text

#sxexcess

Slide 8

Slide 8 text

@philhawksworth #sxexcess

Slide 9

Slide 9 text

javascript nerd @philhawksworth #sxexcess

Slide 10

Slide 10 text

@philhawksworth #sxexcess

Slide 11

Slide 11 text

f/e nerd @philhawksworth #sxexcess

Slide 12

Slide 12 text

@philhawksworth #sxexcess

Slide 13

Slide 13 text

front-end focus @philhawksworth #sxexcess

Slide 14

Slide 14 text

front-end focus bleeding edge effects @philhawksworth #sxexcess

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

@philhawksworth #sxexcess

Slide 18

Slide 18 text

@philhawksworth #sxexcess

Slide 19

Slide 19 text

@philhawksworth #sxexcess @philhawksworth #sxexcess

Slide 20

Slide 20 text

node.js @philhawksworth #sxexcess @philhawksworth #sxexcess

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

@philhawksworth #sxexcess

Slide 23

Slide 23 text

@philhawksworth #sxexcess q=simon+willison+full+frontal

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

@philhawksworth #sxexcess

Slide 26

Slide 26 text

f/e + b/e @philhawksworth #sxexcess

Slide 27

Slide 27 text

@philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 28

Slide 28 text

browser shizzle @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 29

Slide 29 text

browser shizzle can do animation @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 30

Slide 30 text

browser shizzle can do animation can do 3D effects @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

@philhawksworth #sxexcess @philhawksworth #sxexcess

Slide 33

Slide 33 text

caution @philhawksworth #sxexcess @philhawksworth #sxexcess

Slide 34

Slide 34 text

@philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

@philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 37

Slide 37 text

eaten by dinosaurs (possibly while on the toilet) @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

@philhawksworth #sxexcess

Slide 40

Slide 40 text

captain killjoy @philhawksworth #sxexcess

Slide 41

Slide 41 text

captain killjoy running with scissors @philhawksworth #sxexcess

Slide 42

Slide 42 text

captain killjoy running with scissors chewing with mouth open @philhawksworth #sxexcess

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

@philhawksworth #sxexcess

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

@philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 47

Slide 47 text

why > how @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 48

Slide 48 text

@philhawksworth #sxexcess @philhawksworth #sxexcess

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

@philhawksworth #sxexcess

Slide 51

Slide 51 text

@philhawksworth #sxexcess

Slide 52

Slide 52 text

@philhawksworth #sxexcess

Slide 53

Slide 53 text

@philhawksworth #sxexcess

Slide 54

Slide 54 text

@philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

@philhawksworth #sxexcess

Slide 57

Slide 57 text

@philhawksworth #sxexcess

Slide 58

Slide 58 text

@philhawksworth #sxexcess

Slide 59

Slide 59 text

@philhawksworth #sxexcess

Slide 60

Slide 60 text

@philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 61

Slide 61 text

@philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 62

Slide 62 text

agreement @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 63

Slide 63 text

agreement the contract of the URI @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 64

Slide 64 text

@philhawksworth #sxexcess

Slide 65

Slide 65 text

not a lecture on @philhawksworth #sxexcess REST

Slide 66

Slide 66 text

@philhawksworth #sxexcess

Slide 67

Slide 67 text

GET http://some.stuff @philhawksworth #sxexcess

Slide 68

Slide 68 text

representation of content GET http://some.stuff @philhawksworth #sxexcess

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

@philhawksworth #sxexcess

Slide 71

Slide 71 text

cautionary tale @philhawksworth #sxexcess

Slide 72

Slide 72 text

cautionary tale the mistakes we have made before @philhawksworth #sxexcess

Slide 73

Slide 73 text

@philhawksworth #sxexcess

Slide 74

Slide 74 text

the seductive power of the possible @philhawksworth #sxexcess

Slide 75

Slide 75 text

@philhawksworth #sxexcess

Slide 76

Slide 76 text

html5 @philhawksworth #sxexcess

Slide 77

Slide 77 text

html5 whatever that is @philhawksworth #sxexcess

Slide 78

Slide 78 text

@philhawksworth #sxexcess

Slide 79

Slide 79 text

ﬂash mistakes made with @philhawksworth #sxexcess

Slide 80

Slide 80 text

@philhawksworth #sxexcess

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

@philhawksworth #sxexcess

Slide 83

Slide 83 text

Slide 84

Slide 84 text

common criticisms @philhawksworth #sxexcess

Slide 85

Slide 85 text

@philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 86

Slide 86 text

frozen content @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 87

Slide 87 text

frozen content copy / paste @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 88

Slide 88 text

frozen content copy / paste bookmark-able @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 89

Slide 89 text

frozen content copy / paste bookmark-able accessible @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 90

Slide 90 text

frozen content copy / paste bookmark-able accessible searchable @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 91

Slide 91 text

ﬂash *can* do it @philhawksworth #sxexcess

Slide 92

Slide 92 text

"show me" @philhawksworth #sxexcess

Slide 93

Slide 93 text

@philhawksworth #sxexcess

Slide 94

Slide 94 text

pixels > the web @philhawksworth #sxexcess

Slide 95

Slide 95 text

@philhawksworth #sxexcess

Slide 96

Slide 96 text

what is valued by the developers? @philhawksworth #sxexcess

Slide 97

Slide 97 text

@philhawksworth #sxexcess

Slide 98

Slide 98 text

how did they get here? @philhawksworth #sxexcess

Slide 99

Slide 99 text

how did they get here? photoshop @philhawksworth #sxexcess

Slide 100

Slide 100 text

how did they get here? photoshop adobe suite @philhawksworth #sxexcess

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

@philhawksworth #sxexcess

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

@philhawksworth #sxexcess

Slide 105

Slide 105 text

the seductive power of the possible @philhawksworth #sxexcess

Slide 106

Slide 106 text

@philhawksworth #excessiveenhancement @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 107

Slide 107 text

@philhawksworth #excessiveenhancement increased sophistication @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 108

Slide 108 text

richer user experiences @philhawksworth #excessiveenhancement increased sophistication @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 109

Slide 109 text

@philhawksworth #sxexcess

Slide 110

Slide 110 text

@philhawksworth #excessiveenhancement @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 111

Slide 111 text

1996 @philhawksworth #excessiveenhancement @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 112

Slide 112 text

@philhawksworth #excessiveenhancement @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 113

Slide 113 text

@philhawksworth #sxexcess

Slide 114

Slide 114 text

@philhawksworth #sxexcess

Slide 115

Slide 115 text

@philhawksworth #sxexcess

Slide 116

Slide 116 text

@philhawksworth #sxexcess

Slide 117

Slide 117 text

@philhawksworth #sxexcess

Slide 118

Slide 118 text

@philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 119

Slide 119 text

2011 @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 120

Slide 120 text

@philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 121

Slide 121 text

http://beetle.de @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 122

Slide 122 text

http://beetle.de a rich user experience @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 123

Slide 123 text

http://beetle.de a rich user experience open Web technologies @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

@philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 126

Slide 126 text

@philhawksworth #excessiveenhancement ~13 seconds @philhawksworth #sxexcess

Slide 127

Slide 127 text

@philhawksworth #excessiveenhancement ~13 seconds operator instructions @philhawksworth #sxexcess

Slide 128

Slide 128 text

@philhawksworth #sxexcess

Slide 129

Slide 129 text

11mb images @philhawksworth #sxexcess

Slide 130

Slide 130 text

11mb images 251 http requests @philhawksworth #sxexcess

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

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

Slide 134

Slide 134 text

@philhawksworth #sxexcess

Slide 135

Slide 135 text

@philhawksworth #sxexcess

Slide 136

Slide 136 text

4mb images @philhawksworth #sxexcess

Slide 137

Slide 137 text

4mb images 314 http requests @philhawksworth #sxexcess

Slide 138

Slide 138 text

@philhawksworth #sxexcess

Slide 139

Slide 139 text

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

Slide 140

Slide 140 text

@philhawksworth #excessiveenhancement that is really rather a lot of http requests for a web site about a car. - Dr. Ian Malcolm @philhawksworth #sxexcess

Slide 141

Slide 141 text

eaten by dinosaurs (possibly while on the toilet) @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 142

Slide 142 text

@philhawksworth #sxexcess

Slide 143

Slide 143 text

but... it will work on an iPhone @philhawksworth #sxexcess

Slide 144

Slide 144 text

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

Slide 145

Slide 145 text

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

Slide 146

Slide 146 text

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

Slide 147

Slide 147 text

@philhawksworth #sxexcess

Slide 148

Slide 148 text

who cares about iPhones? @philhawksworth #sxexcess

Slide 149

Slide 149 text

@philhawksworth #sxexcess

Slide 150

Slide 150 text

who cares about iPads? @philhawksworth #sxexcess

Slide 151

Slide 151 text

@philhawksworth #sxexcess

Slide 152

Slide 152 text

@philhawksworth #sxexcess

Slide 153

Slide 153 text

target the real audience @philhawksworth #sxexcess

Slide 154

Slide 154 text

@philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 155

Slide 155 text

@philhawksworth #excessiveenhancement hijacking the links @philhawksworth #sxexcess

Slide 156

Slide 156 text

@philhawksworth #excessiveenhancement “why don’t the f*cking wheels f*cking move?!!” @bruised_blood @philhawksworth #sxexcess

Slide 157

Slide 157 text

@philhawksworth #sxexcess

Slide 158

Slide 158 text

pixels the web > @philhawksworth #sxexcess

Slide 159

Slide 159 text

pixels the web > @philhawksworth #sxexcess

Slide 160

Slide 160 text

without javascript? @philhawksworth #sxexcess

Slide 161

Slide 161 text

@philhawksworth #sxexcess

Slide 162

Slide 162 text

@philhawksworth #sxexcess

Slide 163

Slide 163 text

@philhawksworth #sxexcess

Slide 164

Slide 164 text

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

Slide 165

Slide 165 text

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

Slide 166

Slide 166 text

@philhawksworth #sxexcess

Slide 167

Slide 167 text

forgotten how the web works @philhawksworth #sxexcess

Slide 168

Slide 168 text

@philhawksworth #sxexcess

Slide 169

Slide 169 text

being seduced @philhawksworth #sxexcess by the possible

Slide 170

Slide 170 text

@philhawksworth #sxexcess

Slide 171

Slide 171 text

effective campaign? @philhawksworth #sxexcess

Slide 172

Slide 172 text

effective campaign? @philhawksworth #sxexcess longevity?

Slide 173

Slide 173 text

effective campaign? @philhawksworth #sxexcess longevity? all the users?

Slide 174

Slide 174 text

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

Slide 175

Slide 175 text

@philhawksworth #sxexcess

Slide 176

Slide 176 text

why u no shizzle? @philhawksworth #sxexcess

Slide 177

Slide 177 text

@philhawksworth #sxexcess

Slide 178

Slide 178 text

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

Slide 179

Slide 179 text

@philhawksworth #sxexcess

Slide 180

Slide 180 text

facebook.com/thing @philhawksworth #sxexcess

Slide 181

Slide 181 text

@philhawksworth #sxexcess @philhawksworth #sxexcess

Slide 182

Slide 182 text

@philhawksworth #sxexcess

Slide 183

Slide 183 text

/thatthing @philhawksworth #sxexcess

Slide 184

Slide 184 text

thatthing @philhawksworth #sxexcess

Slide 185

Slide 185 text

thatthing @philhawksworth #sxexcess

Slide 186

Slide 186 text

whatthing @philhawksworth #sxexcess ?

Slide 187

Slide 187 text

@philhawksworth #sxexcess

Slide 188

Slide 188 text

renting @philhawksworth #sxexcess buying v

Slide 189

Slide 189 text

@philhawksworth #sxexcess

Slide 190

Slide 190 text

@philhawksworth #sxexcess

Slide 191

Slide 191 text

twitter.com is not a web site @philhawksworth #sxexcess

Slide 192

Slide 192 text

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

Slide 193

Slide 193 text

@philhawksworth #sxexcess

Slide 194

Slide 194 text

@philhawksworth #sxexcess

Slide 195

Slide 195 text

twitter is a platform @philhawksworth #sxexcess

Slide 196

Slide 196 text

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

Slide 197

Slide 197 text

@philhawksworth #sxexcess

Slide 198

Slide 198 text

"twitter web client" @philhawksworth #sxexcess

Slide 199

Slide 199 text

@philhawksworth #sxexcess

Slide 200

Slide 200 text

without javascript? @philhawksworth #sxexcess

Slide 201

Slide 201 text

@philhawksworth #sxexcess

Slide 202

Slide 202 text

@philhawksworth #sxexcess

Slide 203

Slide 203 text

@philhawksworth #sxexcess

Slide 204

Slide 204 text

@philhawksworth #sxexcess twitter.com

Slide 205

Slide 205 text

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

Slide 206

Slide 206 text

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

Slide 207

Slide 207 text

@philhawksworth #sxexcess

Slide 208

Slide 208 text

but nobody has javascript disabled @philhawksworth #sxexcess

Slide 209

Slide 209 text

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

Slide 210

Slide 210 text

@philhawksworth #sxexcess

Slide 211

Slide 211 text

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

Slide 212

Slide 212 text

@philhawksworth #sxexcess

Slide 213

Slide 213 text

not known at this address @philhawksworth #sxexcess

Slide 214

Slide 214 text

@philhawksworth #sxexcess

Slide 215

Slide 215 text

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

Slide 216

Slide 216 text

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

Slide 217

Slide 217 text

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

Slide 218

Slide 218 text

@philhawksworth #sxexcess

Slide 219

Slide 219 text

the damage is done @philhawksworth #sxexcess

Slide 220

Slide 220 text

@philhawksworth #sxexcess

Slide 221

Slide 221 text

linkrot @philhawksworth #sxexcess

Slide 222

Slide 222 text

@philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 223

Slide 223 text

#! @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 224

Slide 224 text

#! shbang @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 225

Slide 225 text

@philhawksworth #sxexcess

Slide 226

Slide 226 text

#! why use @philhawksworth #sxexcess

Slide 227

Slide 227 text

#! why use @philhawksworth #sxexcess ?

Slide 228

Slide 228 text

#! why use (?) @philhawksworth #sxexcess

Slide 229

Slide 229 text

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

Slide 230

Slide 230 text

@philhawksworth #sxexcess

Slide 231

Slide 231 text

# @philhawksworth #sxexcess

Slide 232

Slide 232 text

# window.location.hash @philhawksworth #sxexcess

Slide 233

Slide 233 text

@philhawksworth #sxexcess

Slide 234

Slide 234 text

client-side routing @philhawksworth #sxexcess

Slide 235

Slide 235 text

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

Slide 236

Slide 236 text

@philhawksworth #sxexcess

Slide 237

Slide 237 text

enable history navigation @philhawksworth #sxexcess

Slide 238

Slide 238 text

enable history navigation @philhawksworth #sxexcess

Slide 239

Slide 239 text

enable history navigation @philhawksworth #sxexcess

Slide 240

Slide 240 text

@philhawksworth #sxexcess

Slide 241

Slide 241 text

apaque to the google bot @philhawksworth #sxexcess

Slide 242

Slide 242 text

@philhawksworth #sxexcess

Slide 243

Slide 243 text

google ajax crawling #! @philhawksworth #sxexcess

Slide 244

Slide 244 text

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

Slide 245

Slide 245 text

@philhawksworth #sxexcess

Slide 246

Slide 246 text

when did it get so hard to crawl the web? @philhawksworth #sxexcess

Slide 247

Slide 247 text

when did it get so hard to crawl the web? what does it take to write a good crawler? @philhawksworth #sxexcess

Slide 248

Slide 248 text

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

Slide 249

Slide 249 text

@philhawksworth #sxexcess

Slide 250

Slide 250 text

@philhawksworth #sxexcess

Slide 251

Slide 251 text

@philhawksworth #sxexcess

Slide 252

Slide 252 text

html5 history api @philhawksworth #sxexcess

Slide 253

Slide 253 text

@philhawksworth #sxexcess

Slide 254

Slide 254 text

@philhawksworth #sxexcess

Slide 255

Slide 255 text

@philhawksworth #sxexcess

Slide 256

Slide 256 text

@philhawksworth #sxexcess

Slide 257

Slide 257 text

@philhawksworth #sxexcess

Slide 258

Slide 258 text

@philhawksworth #sxexcess

Slide 259

Slide 259 text

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

Slide 260

Slide 260 text

@philhawksworth #sxexcess

Slide 261

Slide 261 text

fashionable single page apps @philhawksworth #sxexcess

Slide 262

Slide 262 text

@philhawksworth #sxexcess

Slide 263

Slide 263 text

helper libraries @philhawksworth #sxexcess

Slide 264

Slide 264 text

helper libraries levi routes @philhawksworth #sxexcess

Slide 265

Slide 265 text

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

Slide 266

Slide 266 text

@philhawksworth #sxexcess

Slide 267

Slide 267 text

2k javascript library @philhawksworth #sxexcess

Slide 268

Slide 268 text

2k javascript library unobtrusive @philhawksworth #sxexcess

Slide 269

Slide 269 text

2k javascript library unobtrusive progressive enhancement @philhawksworth #sxexcess

Slide 270

Slide 270 text

data visualisation @philhawksworth #sxexcess

Slide 271

Slide 271 text

@philhawksworth #sxexcess

Slide 272

Slide 272 text

amazing libraries @philhawksworth #sxexcess

Slide 273

Slide 273 text

amazing libraries raphael @philhawksworth #sxexcess

Slide 274

Slide 274 text

amazing libraries raphael processing @philhawksworth #sxexcess

Slide 275

Slide 275 text

amazing libraries raphael processing plotkit @philhawksworth #sxexcess

Slide 276

Slide 276 text

@philhawksworth #sxexcess

Slide 277

Slide 277 text

representing your data in javascript visualisations @philhawksworth #sxexcess

Slide 278

Slide 278 text

representing your data in javascript visualisations ...is hiding it @philhawksworth #sxexcess

Slide 279

Slide 279 text

@philhawksworth #sxexcess

Slide 280

Slide 280 text

@philhawksworth #sxexcess $.get('/data.json', function(data){ var viz = buildAwesomeVisualization(data); $("#funky-chart").append(viz); });

Slide 281

Slide 281 text

@philhawksworth #sxexcess $.get('/data.json', function(data){ var viz = buildAwesomeVisualization(data); $("#funky-chart").append(viz); });

Slide 282

Slide 282 text

@philhawksworth #sxexcess $.get('/data.json', function(data){ var viz = buildAwesomeVisualization(data); $("#funky-chart").append(viz); });

Slide 283

Slide 283 text

@philhawksworth #sxexcess $.get('/data.json', function(data){ var viz = buildAwesomeVisualization(data); $("#funky-chart").append(viz); });

Slide 284

Slide 284 text

@philhawksworth #sxexcess $.get('/data.json', function(data){ var viz = buildAwesomeVisualization(data); $("#funky-chart").append(viz); });

Slide 285

Slide 285 text

@philhawksworth #sxexcess

Slide 286

Slide 286 text

@philhawksworth #sxexcess

Slide 287

Slide 287 text

tables an abused old friend @philhawksworth #sxexcess

Slide 288

Slide 288 text

@philhawksworth #sxexcess 1 2 3 ... 8 25 27 ...

Slide 289

Slide 289 text

progressive enhancement @philhawksworth #sxexcess

Slide 290

Slide 290 text

@philhawksworth #sxexcess

Slide 291

Slide 291 text

demos & developer tools @philhawksworth #sxexcess

Slide 292

Slide 292 text

@philhawksworth #sxexcess

Slide 293

Slide 293 text

@philhawksworth #sxexcess

Slide 294

Slide 294 text

@philhawksworth #sxexcess

Slide 295

Slide 295 text

just a demo @philhawksworth #sxexcess

Slide 296

Slide 296 text

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

Slide 297

Slide 297 text

@philhawksworth #sxexcess

Slide 298

Slide 298 text

developer tools @philhawksworth #sxexcess libraries and utilities

Slide 299

Slide 299 text

@philhawksworth #sxexcess

Slide 300

Slide 300 text

developer tools @philhawksworth #sxexcess

Slide 301

Slide 301 text

developer tools @philhawksworth #sxexcess

Slide 302

Slide 302 text

@philhawksworth #sxexcess

Slide 303

Slide 303 text

beware of magic @philhawksworth #sxexcess

Slide 304

Slide 304 text

@philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 305

Slide 305 text

we've been here before @philhawksworth #excessiveenhancement @philhawksworth #sxexcess

Slide 306

Slide 306 text

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

Slide 307

Slide 307 text

@philhawksworth #sxexcess

Slide 308

Slide 308 text

remember @philhawksworth #sxexcess take care of the uri

Slide 309

Slide 309 text

remember @philhawksworth #sxexcess take care of the uri consider all of your users

Slide 310

Slide 310 text

remember @philhawksworth #sxexcess take care of the uri consider all of your users value the pixels and the Web

Slide 311

Slide 311 text

remember @philhawksworth #sxexcess take care of the uri consider all of your users value the pixels and the Web enhance gracefully

Slide 312

Slide 312 text

remember @philhawksworth #sxexcess 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 313

Slide 313 text

@philhawksworth #sxexcess

Slide 314

Slide 314 text

experiment & explore @philhawksworth #sxexcess

Slide 315

Slide 315 text

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

Slide 316

Slide 316 text

@philhawksworth #excessiveenhancement

Slide 317

Slide 317 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 http://thewebisagreement.com/ http://en.wikipedia.org/wiki/Robustness_principle @philhawksworth #excessiveenhancement thanks & links 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 @philhawksworth