Excessive Enhancement - SXSW2012

We all love to see exciting and innovative "interface shizzle" driven by JavaScript and the ever increasing rendering capabilities of modern browsers, but are we getting these at the expense of the Web? This talk will explore the good, the bad, and the fugly of rich interfaces, while examining how and why we should take care not to damage the Web.

Given at SxSW 2012

#sxexcess

Transcript

1. Excessive Enhancement
   Phil Hawksworth
   @philhawksworth
   

   View Slide

2. Sex Enhancements
   Phil Hawksworth
   @philhawksworth
   Excessive Enhancement
   

   View Slide

3. Sex Enhancements
   Phil Hawksworth
   @philhawksworth
   Excessive Enhancement
   

   View Slide

4. #sxexcess
   

   View Slide

5. #sxexcess
   

   View Slide

6. #excess
   

   View Slide

7. #sxexcess
   

   View Slide

8. @philhawksworth #sxexcess
   

   View Slide

9. javascript nerd
   @philhawksworth #sxexcess
   

   View Slide

10. @philhawksworth #sxexcess
    

    View Slide

11. f/e nerd
    @philhawksworth #sxexcess
    

    View Slide

12. @philhawksworth #sxexcess
    

    View Slide

13. front-end focus
    @philhawksworth #sxexcess
    

    View Slide

14. front-end focus
    bleeding edge effects
    @philhawksworth #sxexcess
    

    View Slide

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

    View Slide

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

    View Slide

17. @philhawksworth #sxexcess
    

    View Slide

18. @philhawksworth #sxexcess
    

    View Slide

19. @philhawksworth #sxexcess
    @philhawksworth #sxexcess
    

    View Slide

20. node.js
    @philhawksworth #sxexcess
    @philhawksworth #sxexcess
    

    View Slide

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

    View Slide

22. @philhawksworth #sxexcess
    

    View Slide

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

    View Slide

24. @philhawksworth #sxexcess
    q=simon+willison+full+frontal
    &flesh_tones=false
    

    View Slide

25. @philhawksworth #sxexcess
    

    View Slide

26. f/e + b/e
    @philhawksworth #sxexcess
    

    View Slide

27. @philhawksworth #excessiveenhancement
    @philhawksworth #sxexcess
    

    View Slide

28. browser shizzle
    @philhawksworth #excessiveenhancement
    @philhawksworth #sxexcess
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. @philhawksworth #sxexcess
    @philhawksworth #sxexcess
    

    View Slide

33. caution
    @philhawksworth #sxexcess
    @philhawksworth #sxexcess
    

    View Slide

34. @philhawksworth #excessiveenhancement
    @philhawksworth #sxexcess
    

    View Slide

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

    View Slide

36. @philhawksworth #excessiveenhancement
    @philhawksworth #sxexcess
    

    View Slide

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

    View Slide

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

    View Slide

39. @philhawksworth #sxexcess
    

    View Slide

40. captain killjoy
    @philhawksworth #sxexcess
    

    View Slide

41. captain killjoy
    running with scissors
    @philhawksworth #sxexcess
    

    View Slide

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

    View Slide

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

    View Slide

44. @philhawksworth #sxexcess
    

    View Slide

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

    View Slide

46. @philhawksworth #excessiveenhancement
    @philhawksworth #sxexcess
    

    View Slide

47. why > how
    @philhawksworth #excessiveenhancement
    @philhawksworth #sxexcess
    

    View Slide

48. @philhawksworth #sxexcess
    @philhawksworth #sxexcess
    

    View Slide

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

    View Slide

50. @philhawksworth #sxexcess
    

    View Slide

51. @philhawksworth #sxexcess
    

    View Slide

52. @philhawksworth #sxexcess
    

    View Slide

53. @philhawksworth #sxexcess
    

    View Slide

54. @philhawksworth #excessiveenhancement
    @philhawksworth #sxexcess
    

    View Slide

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

    View Slide

56. @philhawksworth #sxexcess
    

    View Slide

57. @philhawksworth #sxexcess
    

    View Slide

58. @philhawksworth #sxexcess
    

    View Slide

59. @philhawksworth #sxexcess
    

    View Slide

60. @philhawksworth #excessiveenhancement
    @philhawksworth #sxexcess
    

    View Slide

61. @philhawksworth #excessiveenhancement
    @philhawksworth #sxexcess
    

    View Slide

62. agreement
    @philhawksworth #excessiveenhancement
    @philhawksworth #sxexcess
    

    View Slide

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

    View Slide

64. @philhawksworth #sxexcess
    

    View Slide

65. not a lecture on
    @philhawksworth #sxexcess
    REST
    

    View Slide

66. @philhawksworth #sxexcess
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

70. @philhawksworth #sxexcess
    

    View Slide

71. cautionary tale
    @philhawksworth #sxexcess
    

    View Slide

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

    View Slide

73. @philhawksworth #sxexcess
    

    View Slide

74. the seductive power
    of the possible
    @philhawksworth #sxexcess
    

    View Slide

75. @philhawksworth #sxexcess
    

    View Slide

76. html5
    @philhawksworth #sxexcess
    

    View Slide

77. html5
    whatever that is
    @philhawksworth #sxexcess
    

    View Slide

78. @philhawksworth #sxexcess
    

    View Slide

79. flash
    mistakes made with
    @philhawksworth #sxexcess
    

    View Slide

80. @philhawksworth #sxexcess
    

    View Slide

81. anti-flash mob!
    you’re a member of the
    @philhawksworth #sxexcess
    “
    ”
    

    View Slide

82. @philhawksworth #sxexcess
    

    View Slide

83. copyright Chris Kennett
    @philhawksworth #sxexcess
    

    View Slide

84. common criticisms
    @philhawksworth #sxexcess
    

    View Slide

85. @philhawksworth #excessiveenhancement
    @philhawksworth #sxexcess
    

    View Slide

86. frozen content
    @philhawksworth #excessiveenhancement
    @philhawksworth #sxexcess
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

91. flash *can*
    do it
    @philhawksworth #sxexcess
    

    View Slide

92. "show me"
    @philhawksworth #sxexcess
    

    View Slide

93. @philhawksworth #sxexcess
    

    View Slide

94. pixels > the web
    @philhawksworth #sxexcess
    

    View Slide

95. @philhawksworth #sxexcess
    

    View Slide

96. what is valued by
    the developers?
    @philhawksworth #sxexcess
    

    View Slide

97. @philhawksworth #sxexcess
    

    View Slide

98. how did they
    get here?
    @philhawksworth #sxexcess
    

    View Slide

99. how did they
    get here?
    photoshop
    @philhawksworth #sxexcess
    

    View Slide

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

     View Slide

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

     View Slide

102. @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

104. @philhawksworth #sxexcess
     

     View Slide

105. the seductive power
     of the possible
     @philhawksworth #sxexcess
     

     View Slide

106. @philhawksworth #excessiveenhancement
     @philhawksworth #excessiveenhancement
     @philhawksworth #sxexcess
     

     View Slide

107. @philhawksworth #excessiveenhancement
     increased
     sophistication
     @philhawksworth #excessiveenhancement
     @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

109. @philhawksworth #sxexcess
     

     View Slide

110. @philhawksworth #excessiveenhancement
     @philhawksworth #excessiveenhancement
     @philhawksworth #sxexcess
     

     View Slide

111. 1996
     @philhawksworth #excessiveenhancement
     @philhawksworth #excessiveenhancement
     @philhawksworth #sxexcess
     

     View Slide

112. @philhawksworth #excessiveenhancement
     @philhawksworth #excessiveenhancement
     @philhawksworth #sxexcess
     

     View Slide

113. @philhawksworth #sxexcess
     

     View Slide

114. @philhawksworth #sxexcess
     

     View Slide

115. @philhawksworth #sxexcess
     

     View Slide

116. @philhawksworth #sxexcess
     

     View Slide

117. @philhawksworth #sxexcess
     

     View Slide

118. @philhawksworth #excessiveenhancement
     @philhawksworth #sxexcess
     

     View Slide

119. 2011
     @philhawksworth #excessiveenhancement
     @philhawksworth #sxexcess
     

     View Slide

120. @philhawksworth #excessiveenhancement
     @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

125. @philhawksworth #excessiveenhancement
     @philhawksworth #sxexcess
     

     View Slide

126. @philhawksworth #excessiveenhancement
     ~13 seconds
     @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

128. @philhawksworth #sxexcess
     

     View Slide

129. 11mb images
     @philhawksworth #sxexcess
     

     View Slide

130. 11mb images
     251 http requests
     @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

134. @philhawksworth #sxexcess
     

     View Slide

135. @philhawksworth #sxexcess
     

     View Slide

136. 4mb images
     @philhawksworth #sxexcess
     

     View Slide

137. 4mb images
     314 http requests
     @philhawksworth #sxexcess
     

     View Slide

138. @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

142. @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

147. @philhawksworth #sxexcess
     

     View Slide

148. who cares about
     iPhones?
     @philhawksworth #sxexcess
     

     View Slide

149. @philhawksworth #sxexcess
     

     View Slide

150. who cares about
     iPads?
     @philhawksworth #sxexcess
     

     View Slide

151. @philhawksworth #sxexcess
     

     View Slide

152. @philhawksworth #sxexcess
     

     View Slide

153. target the real audience
     @philhawksworth #sxexcess
     

     View Slide

154. @philhawksworth #excessiveenhancement
     @philhawksworth #sxexcess
     

     View Slide

155. @philhawksworth #excessiveenhancement
     hijacking the links
     @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

157. @philhawksworth #sxexcess
     

     View Slide

158. pixels the web
     >
     @philhawksworth #sxexcess
     

     View Slide

159. pixels the web
     >
     @philhawksworth #sxexcess
     

     View Slide

160. without
     javascript?
     @philhawksworth #sxexcess
     

     View Slide

161. @philhawksworth #sxexcess
     

     View Slide

162. @philhawksworth #sxexcess
     

     View Slide

163. @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

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

     View Slide

166. @philhawksworth #sxexcess
     

     View Slide

167. forgotten how
     the web works
     @philhawksworth #sxexcess
     

     View Slide

168. @philhawksworth #sxexcess
     

     View Slide

169. being seduced
     @philhawksworth #sxexcess
     by the possible
     

     View Slide

170. @philhawksworth #sxexcess
     

     View Slide

171. effective campaign?
     @philhawksworth #sxexcess
     

     View Slide

172. effective campaign?
     @philhawksworth #sxexcess
     longevity?
     

     View Slide

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

     View Slide

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

     View Slide

175. @philhawksworth #sxexcess
     

     View Slide

176. why u no shizzle?
     @philhawksworth #sxexcess
     

     View Slide

177. @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

179. @philhawksworth #sxexcess
     

     View Slide

180. facebook.com/thing
     @philhawksworth #sxexcess
     

     View Slide

181. @philhawksworth #sxexcess
     @philhawksworth #sxexcess
     

     View Slide

182. @philhawksworth #sxexcess
     

     View Slide

183. /thatthing
     @philhawksworth #sxexcess
     

     View Slide

184. thatthing
     @philhawksworth #sxexcess
     

     View Slide

185. thatthing
     @philhawksworth #sxexcess
     

     View Slide

186. whatthing
     @philhawksworth #sxexcess
     ?
     

     View Slide

187. @philhawksworth #sxexcess
     

     View Slide

188. renting
     @philhawksworth #sxexcess
     buying
     v
     

     View Slide

189. @philhawksworth #sxexcess
     

     View Slide

190. @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

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

     View Slide

193. @philhawksworth #sxexcess
     

     View Slide

194. @philhawksworth #sxexcess
     

     View Slide

195. twitter is a platform
     @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

197. @philhawksworth #sxexcess
     

     View Slide

198. "twitter web client"
     @philhawksworth #sxexcess
     

     View Slide

199. @philhawksworth #sxexcess
     

     View Slide

200. without
     javascript?
     @philhawksworth #sxexcess
     

     View Slide

201. @philhawksworth #sxexcess
     

     View Slide

202. @philhawksworth #sxexcess
     

     View Slide

203. @philhawksworth #sxexcess
     

     View Slide

204. @philhawksworth #sxexcess
     twitter.com
     

     View Slide

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

     View Slide

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

     View Slide

207. @philhawksworth #sxexcess
     

     View Slide

208. but nobody has
     javascript disabled
     @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

210. @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

212. @philhawksworth #sxexcess
     

     View Slide

213. not known at this address
     @philhawksworth #sxexcess
     

     View Slide

214. @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

218. @philhawksworth #sxexcess
     

     View Slide

219. the damage is done
     @philhawksworth #sxexcess
     

     View Slide

220. @philhawksworth #sxexcess
     

     View Slide

221. linkrot
     @philhawksworth #sxexcess
     

     View Slide

222. @philhawksworth #excessiveenhancement
     @philhawksworth #sxexcess
     

     View Slide

223. #!
     @philhawksworth #excessiveenhancement
     @philhawksworth #sxexcess
     

     View Slide

224. #!
     shbang
     @philhawksworth #excessiveenhancement
     @philhawksworth #sxexcess
     

     View Slide

225. @philhawksworth #sxexcess
     

     View Slide

226. #!
     why use
     @philhawksworth #sxexcess
     

     View Slide

227. #!
     why use
     @philhawksworth #sxexcess
     ?
     

     View Slide

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

     View Slide

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

     View Slide

230. @philhawksworth #sxexcess
     

     View Slide

231. #
     @philhawksworth #sxexcess
     

     View Slide

232. # window.location.hash
     @philhawksworth #sxexcess
     

     View Slide

233. @philhawksworth #sxexcess
     

     View Slide

234. client-side routing
     @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

236. @philhawksworth #sxexcess
     

     View Slide

237. enable history
     navigation
     @philhawksworth #sxexcess
     

     View Slide

238. enable history
     navigation
     @philhawksworth #sxexcess
     

     View Slide

239. enable history
     navigation
     @philhawksworth #sxexcess
     

     View Slide

240. @philhawksworth #sxexcess
     

     View Slide

241. apaque
     to the google bot
     @philhawksworth #sxexcess
     

     View Slide

242. @philhawksworth #sxexcess
     

     View Slide

243. google ajax crawling
     #!
     @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

245. @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

249. @philhawksworth #sxexcess
     

     View Slide

250. @philhawksworth #sxexcess
     

     View Slide

251. @philhawksworth #sxexcess
     

     View Slide

252. html5
     history api
     @philhawksworth #sxexcess
     

     View Slide

253. @philhawksworth #sxexcess
     

     View Slide

254. @philhawksworth #sxexcess
     

     View Slide

255. @philhawksworth #sxexcess
     

     View Slide

256. @philhawksworth #sxexcess
     

     View Slide

257. @philhawksworth #sxexcess
     

     View Slide

258. @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

260. @philhawksworth #sxexcess
     

     View Slide

261. fashionable
     single page apps
     @philhawksworth #sxexcess
     

     View Slide

262. @philhawksworth #sxexcess
     

     View Slide

263. helper libraries
     @philhawksworth #sxexcess
     

     View Slide

264. helper libraries
     levi routes
     @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

266. @philhawksworth #sxexcess
     

     View Slide

267. 2k javascript library
     @philhawksworth #sxexcess
     

     View Slide

268. 2k javascript library
     unobtrusive
     @philhawksworth #sxexcess
     

     View Slide

269. 2k javascript library
     unobtrusive
     progressive enhancement
     @philhawksworth #sxexcess
     

     View Slide

270. data visualisation
     @philhawksworth #sxexcess
     

     View Slide

271. @philhawksworth #sxexcess
     

     View Slide

272. amazing libraries
     @philhawksworth #sxexcess
     

     View Slide

273. amazing libraries
     raphael
     @philhawksworth #sxexcess
     

     View Slide

274. amazing libraries
     raphael
     processing
     @philhawksworth #sxexcess
     

     View Slide

275. amazing libraries
     raphael
     processing
     plotkit
     @philhawksworth #sxexcess
     

     View Slide

276. @philhawksworth #sxexcess
     

     View Slide

277. representing your
     data in javascript
     visualisations
     @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

279. @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

285. @philhawksworth #sxexcess
     
     

     View Slide

286. @philhawksworth #sxexcess
     
     

     View Slide

287. tables
     an abused old friend
     @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

289. progressive
     enhancement
     @philhawksworth #sxexcess
     

     View Slide

290. @philhawksworth #sxexcess
     

     View Slide

291. demos &
     developer tools
     @philhawksworth #sxexcess
     

     View Slide

292. @philhawksworth #sxexcess
     

     View Slide

293. @philhawksworth #sxexcess
     

     View Slide

294. @philhawksworth #sxexcess
     

     View Slide

295. just a demo
     @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

297. @philhawksworth #sxexcess
     

     View Slide

298. developer tools
     @philhawksworth #sxexcess
     libraries and utilities
     

     View Slide

299. @philhawksworth #sxexcess
     

     View Slide

300. developer tools
     @philhawksworth #sxexcess
     

     View Slide

301. developer tools
     @philhawksworth #sxexcess
     

     View Slide

302. @philhawksworth #sxexcess
     

     View Slide

303. beware of magic
     @philhawksworth #sxexcess
     

     View Slide

304. @philhawksworth #excessiveenhancement
     @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

306. 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
     

     View Slide

307. @philhawksworth #sxexcess
     

     View Slide

308. remember
     @philhawksworth #sxexcess
     take care of the uri
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

312. 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
     

     View Slide

313. @philhawksworth #sxexcess
     

     View Slide

314. experiment & explore
     @philhawksworth #sxexcess
     

     View Slide

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

     View Slide

316. @philhawksworth #excessiveenhancement
     

     View Slide

317. 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
     

     View Slide

318. @philhawksworth #excessiveenhancement
     

     View Slide

319. @philhawksworth #excessiveenhancement
     thanks!
     @philhawksworth
     

     View Slide