Excessive Enhancement - Toster2012

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.

This version of the talk given in Moscow at Toster Javascript 2012

http://toster.ru/

#toster_ru

Transcript

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