Excessive Enhancement - devup12

Description

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 Devup 2012 http://devup.ideateca.com/html5/en/

#devup12

Also see:
Thoughts on the event at http://techblog.rga.com/html5-and-gaming-devup-barcelona
The video of this presentation: http://www.youtube.com/watch?v=9LeCnwGWlhw

Transcript

1. Excessive Enhancement Phil Hawksworth @philhawksworth
2. Sex Enhancements Phil Hawksworth @philhawksworth Excessive Enhancement
3. Sex Enhancements Phil Hawksworth @philhawksworth Excessive Enhancement
4. javascript nerd @philhawksworth #devup12
5. f/e nerd @philhawksworth #sxexcess
6. front-end focus bleeding edge effects browser performance browser shizzle @philhawksworth #devup12
7. @philhawksworth #devup12
8. node.js bringing javascript to the server @philhawksworth #devup12 @philhawksworth #devup12
9. @philhawksworth #devup12 q=simon+willison+full+frontal &flesh_tones=false
10. f/e + b/e @philhawksworth #devup12
11. browser shizzle can do animation can do 3D effects can do dynamic data visualisations @philhawksworth #excessiveenhancement @philhawksworth #devup12
12. caution @philhawksworth #devup12 @philhawksworth #devup12
13. ...so preoccupied with whether they could that they didn't stop to think if they should - Dr. Ian Malcolm @philhawksworth #excessiveenhancement @philhawksworth #devup12
14. eaten by dinosaurs (possibly while on the toilet) @philhawksworth #excessiveenhancement @philhawksworth #devup12
15. @philhawksworth #excessiveenhancement @philhawksworth #devup12 ...it’s a unix system! - Lex Murphy
16. captain killjoy running with scissors chewing with mouth open ...but this stuff is important @philhawksworth #devup12
17. are we going too far with javascript to enhance our sites? @philhawksworth #devup12
18. the web is agreement an uber-doodle about the web by @psd @philhawksworth #devup12 @philhawksworth #devup12
19. @philhawksworth #devup12
20. @philhawksworth #devup12
21. @philhawksworth #devup12
22. the uri is the thing another uber-doodle about the web by @psd @philhawksworth #excessiveenhancement @philhawksworth #devup12
23. @philhawksworth #devup12
24. @philhawksworth #devup12
25. @philhawksworth #devup12
26. @philhawksworth #excessiveenhancement @philhawksworth #devup12
27. agreement the contract of the URI @philhawksworth #excessiveenhancement @philhawksworth #devup12
28. not a lecture on @philhawksworth #devup12 REST
29. representation of content ask, and ye shall receive GET http://some.stuff @philhawksworth #devup12
30. cautionary tale the mistakes we have made before @philhawksworth #devup12
31. the seductive power of the possible @philhawksworth #devup12
32. html5 whatever that is @philhawksworth #devup12
33. flash mistakes made with @philhawksworth #devup12
34. anti-flash mob! you’re a member of the @philhawksworth #devup12 “ ”
35. copyright Chris Kennett @philhawksworth #devup12
36. common criticisms @philhawksworth #devup12
37. frozen content copy / paste bookmark-able accessible searchable @philhawksworth #excessiveenhancement @philhawksworth #devup12
38. flash *can* do it @philhawksworth #devup12
39. "show me" @philhawksworth #devup12
40. pixels > the web @philhawksworth #devup12
41. what is valued by the developers? @philhawksworth #devup12
42. how did they get here? photoshop adobe suite flash @philhawksworth #devup12
43. care more about the sex appeal ...than the fundamentals of the web @philhawksworth #devup12
44. the seductive power of the possible @philhawksworth #devup12
45. richer user experiences @philhawksworth #excessiveenhancement increased sophistication @philhawksworth #excessiveenhancement @philhawksworth #devup12
46. @philhawksworth #devup12
47. 1996 @philhawksworth #excessiveenhancement @philhawksworth #excessiveenhancement @philhawksworth #devup12
48. @philhawksworth #excessiveenhancement @philhawksworth #excessiveenhancement @philhawksworth #devup12
49. @philhawksworth #devup12
50. @philhawksworth #devup12
51. @philhawksworth #devup12
52. @philhawksworth #devup12
53. 2011 @philhawksworth #excessiveenhancement @philhawksworth #devup12
54. http://beetle.de a rich user experience open Web technologies ...and why I think it sucks @philhawksworth #excessiveenhancement @philhawksworth #devup12
55. @philhawksworth #excessiveenhancement ~13 seconds operator instructions @philhawksworth #devup12
56. 11mb images 251 http requests missing cache expiration @philhawksworth #devup12
57. 15mb images 316 http requests missing cache expiration @philhawksworth #devup12
58. @philhawksworth #devup12
59. 4mb images 314 http requests @philhawksworth #devup12
60. @philhawksworth #devup12
61. ...so preoccupied with whether they could that they didn't stop to think if they should - Dr. Ian Malcolm @philhawksworth #excessiveenhancement that is really rather a lot of http requests for a web site about a car. - Dr. Ian Malcolm @philhawksworth #devup12
62. eaten by dinosaurs (possibly while on the toilet) @philhawksworth #excessiveenhancement @philhawksworth #devup12
63. /reduced but... it will work on an iPhone http://beetle.de /full @philhawksworth #devup12
64. who cares about iPhones? @philhawksworth #devup12
65. who cares about iPads? @philhawksworth #devup12
66. @philhawksworth #devup12
67. target the real audience @philhawksworth #devup12
68. @philhawksworth #excessiveenhancement “why don’t the fucking wheels fucking move?!!” @bruised_blood hijacking the links @philhawksworth #devup12
69. pixels the web > @philhawksworth #devup12
70. without javascript? @philhawksworth #devup12
71. @philhawksworth #devup12
72. @philhawksworth #devup12
73. what is the address of that content? @philhawksworth #devup12
74. URIs are what make the Web a web @philhawksworth #devup12
75. forgotten how the web works @philhawksworth #devup12
76. being seduced @philhawksworth #devup12 by the possible
77. effective campaign? @philhawksworth #devup12 longevity? all the users? good or great?
78. why u no shizzle? @philhawksworth #devup12
79. curl http://some.stuff @philhawksworth #devup12
80. @philhawksworth #devup12
81. twitter.com is not a web site (except of course it is) @philhawksworth #devup12
82. @philhawksworth #devup12
83. twitter is a platform everything uses the API @philhawksworth #devup12
84. "twitter web client" @philhawksworth #devup12
85. without javascript? @philhawksworth #devup12
86. @philhawksworth #devup12
87. 7531638785 @philhawksworth #devup12 twitter.com twitter.com
88. 7531638785 @philhawksworth #devup12 twitter.com
89. @philhawksworth #devup12 twitter.com /#!/jaffathecake/status/173574727531638785 twitter.com
90. but nobody has javascript disabled missing the point @philhawksworth #devup12
91. what about the contract of the URI? @philhawksworth #devup12
92. not known at this address @philhawksworth #devup12
93. @philhawksworth #devup12
94. http://twitter.com/#!/aroundheresomewhere @philhawksworth #devup12
95. http://twitter.com/#!/aroundheresomewhere @philhawksworth #devup12
96. http://twitter.com/aroundheresomewhere @philhawksworth #devup12
97. the damage is done @philhawksworth #devup12
98. linkrot @philhawksworth #devup12
99. #! shbang @philhawksworth #excessiveenhancement @philhawksworth #devup12
100. #! why use (?)! @philhawksworth #devup12 ?
101. # window.location.hash @philhawksworth #devup12
102. client-side routing client-side processing @philhawksworth #devup12
103. enable history navigation @philhawksworth #devup12
104. apaque to the google bot @philhawksworth #devup12
105. google ajax crawling #! http://code.google.com/web/ajaxcrawling @philhawksworth #devup12
106. interface shizzle doesn't have to break the uri @philhawksworth #devup12
107. @philhawksworth #devup12
108. @philhawksworth #devup12
109. @philhawksworth #devup12
110. html5 history api @philhawksworth #devup12
111. @philhawksworth #devup12
112. @philhawksworth #devup12
113. client-side routing client-side processing @philhawksworth #devup12
114. fashionable single page apps @philhawksworth #devup12
115. helper libraries levi routes http://github.com/PaulKinlan/leviroutes @philhawksworth #devup12
116. 2k javascript library unobtrusive progressive enhancement @philhawksworth #devup12
117. demos & developer tools @philhawksworth #devup12
118. @philhawksworth #devup12
119. @philhawksworth #devup12
120. just a demo the biggest danger is when that demo mentality leaks into production websites @brucel @philhawksworth #devup12
121. developer tools @philhawksworth #devup12 libraries and utilities
122. developer tools @philhawksworth #devup12
123. beware of magic @philhawksworth #devup12
124. 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 #devup12
125. remember @philhawksworth #devup12 take care of the uri consider all of your users value the pixels and the Web enhance gracefully dinosaur theme parks often end badly
126. experiment & explore but take care of the web @philhawksworth #devup12
127. 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
128. @philhawksworth #excessiveenhancement thanks! @philhawksworth http://goo.gl/qLOsY