Excessive Enhancement - GothamJS

A talk given at GothamJS in New York, July 2013.

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.

#gothamjs

Transcript

1. EXCESSIVE ENHANCEMENT # @PHILHAWKSWORTH GOTHAMJS
2. PHILHAWKSWORTH @
4. CONTEXT GOTHAMJS # @PHILHAWKSWORTH
5. # @PHILHAWKSWORTH GOTHAMJS GOTHAMJS #
6. CAN DO # @PHILHAWKSWORTH ANIMATION 3D EFFECTS DATA VISUALISATION SINGLE PAGE APPS GOTHAMJS
7. BROWSER SHIZZLE # @PHILHAWKSWORTH GOTHAMJS
8. CAUTION # @PHILHAWKSWORTH GOTHAMJS
9. DESIGN RESPONSIBLE & DEVELOPMENT # @PHILHAWKSWORTH GOTHAMJS
10. GOTHAMJS # @PHILHAWKSWORTH - DR IAN MALCOM ...SO PREOCCUPIED WITH WHETHER THEY COULD THAT THEY DIDN'T STOP TO THINK IF THEY SHOULD
11. # @PHILHAWKSWORTH EATEN BY DINOSAURS (POSSIBLY WHILE ON THE TOILET) GOTHAMJS
12. GOTHAMJS # @PHILHAWKSWORTH IT’S A UNIX SYSTEM - LEX MURPHY
13. I THE WEB # @PHILHAWKSWORTH GOTHAMJS
14. INSPIRATION # @PHILHAWKSWORTH GOTHAMJS
15. @PHILHAWKSWORTH #GOTHAMJS is THE WEB AGREEMENT
16. @PHILHAWKSWORTH #GOTHAMJS ~ THE URI IS THE THING
17. @PHILHAWKSWORTH #GOTHAMJS ~ THE URI IS THE THING
19. @PHILHAWKSWORTH #GOTHAMJS ~ THE CONTRACT OF THE URI AGREEMENT
20. NOT A LECTURE ON REST @PHILHAWKSWORTH #GOTHAMJS
21. GET http://some.stuff @PHILHAWKSWORTH REPRESENTATION OF CONTENT #GOTHAMJS
22. THE @PHILHAWKSWORTH #GOTHAMJS OF THE POSSIBLE POWER SEDUCTIVE
23. HTML5 @PHILHAWKSWORTH WHATEVER THAT IS #GOTHAMJS
24. FLASH @PHILHAWKSWORTH MISTAKES MADE WITH #GOTHAMJS
25. @PHILHAWKSWORTH YOU’RE A MEMBER OF THE ANTI FLASH MOB #GOTHAMJS
26. SNOOTY ATTITUDE OF DEVELOPERS copyright Chris Kennett @PHILHAWKSWORTH #GOTHAMJS
27. COMMON CRITICISMS @PHILHAWKSWORTH #GOTHAMJS
28. @PHILHAWKSWORTH FROZEN CONTENT COPY/PASTE #GOTHAMJS
29. @PHILHAWKSWORTH FROZEN CONTENT COPY/PASTE BOOKMARK-ABLE ACCESSIBLE SEARCHABLE #GOTHAMJS
30. @PHILHAWKSWORTH FLASH CAN DO IT #GOTHAMJS
31. SHOW ME @PHILHAWKSWORTH #GOTHAMJS
32. @PHILHAWKSWORTH PIXELS THE WEB > > #GOTHAMJS
33. CAUTIONARY TALE @PHILHAWKSWORTH OUR OLD MISTAKES #GOTHAMJS
34. EVOLUTION @PHILHAWKSWORTH #GOTHAMJS
35. SOPHISTICATION
36. 1996 @PHILHAWKSWORTH #GOTHAMJS
37. MCDONALDS.COM @PHILHAWKSWORTH #GOTHAMJS
38. MCDONALDS.COM @PHILHAWKSWORTH #GOTHAMJS
39. PEPSI.COM @PHILHAWKSWORTH #GOTHAMJS
40. LEGO.COM @PHILHAWKSWORTH #GOTHAMJS
41. TODAY OR THERE ABOUTS @PHILHAWKSWORTH #GOTHAMJS
42. floppy disk @PHILHAWKSWORTH #GOTHAMJS
43. floppy disk 1,427 KB AVERAGE PAGE WEIGHT @PHILHAWKSWORTH #GOTHAMJS
44. PERFORMANCE MATTERS @PHILHAWKSWORTH #GOTHAMJS
45. Marrissa Mayer, Google 500ms OF EXTRA LOAD TIME CAUSED 20% FEWER SEARCHES @PHILHAWKSWORTH #GOTHAMJS
46. Greg Linden, Amazon 100ms OF EXTRA LOAD TIME CAUSED 1% DROP IN SALES @PHILHAWKSWORTH #GOTHAMJS
47. BEETLE.COM @PHILHAWKSWORTH A RICH USER EXPERIENCE WEB TECHNOLOGIES #GOTHAMJS
48. BEETLE.COM @PHILHAWKSWORTH @PHILHAWKSWORTH 13 #GOTHAMJS seconds
49. BEETLE.COM GOTHAMJS # @PHILHAWKSWORTH @PHILHAWKSWORTH #GOTHAMJS
50. @PHILHAWKSWORTH 11MB 251 HTTP REQUESTS NO CACHE EXPIRATION #GOTHAMJS
51. @PHILHAWKSWORTH 15MB 316 HTTP REQUESTS NO CACHE EXPIRATION #GOTHAMJS
52. MCDONALDS.CO.UK @PHILHAWKSWORTH #GOTHAMJS
53. 38.28 MB 405 HTTP REQUESTS 1.1 MINUTE ONLOAD @PHILHAWKSWORTH #GOTHAMJS
54. GOTHAMJS # @PHILHAWKSWORTH - DR IAN MALCOM ...SO PREOCCUPIED WITH WHETHER THEY COULD THAT THEY DIDN'T STOP TO THINK IF THEY SHOULD
55. GOTHAMJS # @PHILHAWKSWORTH - DR IAN MALCOM (PROBABLY) THAT REALLY IS AN AWFUL LOT OF HTTP REQUESTS FOR A WEBSITE ABOUT A CHICKEN WRAP
56. @PHILHAWKSWORTH THIS IS NOTHING #GOTHAMJS
57. @PHILHAWKSWORTH MOTO.OAKLEY.COM #GOTHAMJS
58. MOTO.OAKLEY.COM @PHILHAWKSWORTH #GOTHAMJS
59. @PHILHAWKSWORTH 85.4MB PAGE WEIGHT 471 HTTP REQUESTS 2 MIN 45 SEC UNTIL CONTENT 4 MIN 10 SEC ONLOAD EVENT #GOTHAMJS
60. @PHILHAWKSWORTH #GOTHAMJS $22 TO DOWNLOAD ON VERIZON’S SMALLEST PLAN
61. !? @PHILHAWKSWORTH #GOTHAMJS
62. @PHILHAWKSWORTH 85MB #GOTHAMJS
63. @PHILHAWKSWORTH 13MB #GOTHAMJS
64. @PHILHAWKSWORTH #GOTHAMJS SAVED 72MB
65. @PHILHAWKSWORTH BACK TO BEETLE.COM #GOTHAMJS
66. @PHILHAWKSWORTH WITHOUT JAVASCRIPT? #GOTHAMJS
67. BEETLE.COM @PHILHAWKSWORTH @PHILHAWKSWORTH #GOTHAMJS
68. BEETLE.COM @PHILHAWKSWORTH #GOTHAMJS
69. BUT NOBODY HAS JAVASCRIPT DISABLED @PHILHAWKSWORTH EVERY CLIENT, EVER #GOTHAMJS
70. @PHILHAWKSWORTH #GOTHAMJS the WHAT ABOUT CONTRACT OF THE URI?
71. of the WHAT IS THE ADDRESS CONTENT? @PHILHAWKSWORTH #GOTHAMJS
72. made of THE WEB IS LINKS @PHILHAWKSWORTH #GOTHAMJS
73. Jake Archibald, Google PROGRESSIVE ENHANCEMENT IS STILL IMPORTANT @PHILHAWKSWORTH http://jakearchibald.com/2013/ progressive-enhancement-still-important/ #GOTHAMJS
74. @PHILHAWKSWORTH HTML DOWNLOADS CSS DOWNLOADS CSS FETCHES ADDITIONAL ASSETS JS DOWNLOADS JS EXECUTES JS FETCHES ADDITIONAL ASSETS JS UPDATES DOM #GOTHAMJS
75. @PHILHAWKSWORTH TIME TO GLASS #GOTHAMJS
77. @PHILHAWKSWORTH PERFORMANCE & SUPPORT #GOTHAMJS
78. @philhawksworth #fullfrontalconf WHY U NO SHIZZLE? @PHILHAWKSWORTH #GOTHAMJS
79. @PHILHAWKSWORTH #GOTHAMJS
80. ~ VIEW SOURCE @PHILHAWKSWORTH #GOTHAMJS
81. is CRAFT CODE @PHILHAWKSWORTH #GOTHAMJS
82. CURL http://some.stuff @PHILHAWKSWORTH #GOTHAMJS
83. @PHILHAWKSWORTH URL #GOTHAMJS
84. URL DESIGN CRAFT @PHILHAWKSWORTH #GOTHAMJS
85. MAKE URL DESIGN A PRIORITY @PHILHAWKSWORTH #GOTHAMJS
86. #! SHEBANG
87. #! (?)! WHY USE @PHILHAWKSWORTH #GOTHAMJS
88. window.location.hash @PHILHAWKSWORTH # #GOTHAMJS
89. @PHILHAWKSWORTH CLIENT-SIDE ROUTING PROCESSING #GOTHAMJS
90. ENABLE HISTORY NAVIGATION @PHILHAWKSWORTH #GOTHAMJS
91. @PHILHAWKSWORTH does’t have to break INTERFACE SHIZZLE THE URL #GOTHAMJS
92. @PHILHAWKSWORTH #GOTHAMJS
96. HTML5 HISTORY API @PHILHAWKSWORTH #GOTHAMJS
99. & DEMOS @PHILHAWKSWORTH DEV TOOLS #GOTHAMJS
100. BETA.THEEXPRESSIVEWEB.COM
101. Jake Archibald, Google PROGRESSIVE ENHANCEMENT IS STILL IMPORTANT @PHILHAWKSWORTH #GOTHAMJS
102. JUST A DEMO @PHILHAWKSWORTH #GOTHAMJS
103. THE BIGGEST DANGER IS WHEN THAT DEMO MENTALITY LEAKS INTO PRODUCTION WEBSITES @PHILHAWKSWORTH Bruce Lawson, Opera #GOTHAMJS
104. EXAMPLE LEARN by @PHILHAWKSWORTH #GOTHAMJS
105. @PHILHAWKSWORTH #GOTHAMJS
106. @PHILHAWKSWORTH #GOTHAMJS
107. TO FINISH @PHILHAWKSWORTH #GOTHAMJS
108. DESIGN RESPONSIBLE & DEVELOPMENT @PHILHAWKSWORTH #GOTHAMJS
109. your PROTECT CRAFT @PHILHAWKSWORTH #GOTHAMJS
110. USE THE NEW TOYS @PHILHAWKSWORTH #GOTHAMJS WITH CARE
111. SHIZZLE FOR SHIZZLE’S SAKE? @PHILHAWKSWORTH #GOTHAMJS
112. FIGHT FOR THE CHANCE TO DO GOOD ON THE WEB @PHILHAWKSWORTH #GOTHAMJS
113. THANKS LINKS http://stephenwaller.tumblr.com http://crikeyboy.blogspot.com/2009/05/illustration-friday-hierarchy.html http://www.flickr.com/photos/bredgur/1323025528 http://www.flickr.com/photos/flowercat/2723867176 http://www.flickr.com/photos/marcthiele/4048845899 http://www.flickr.com/photos/unseen-studios/519988612/ http://hawksworx.com https://speakerdeck.com/davatron5000/mo-pixels-mo-problems http://hawksworx.com/blog/oakleys-moto-diet/ http://thewebisagreement.com/ http://www.codinghorror.com/blog/2006/11/speed-still-matters.html http://www.slideshare.net/nzakas/enough-withthejavascriptalready http://jakearchibald.com/2013/progressive-enhancement-still-important/ http://code.google.com/web/ajaxcrawling http://github.com/blog/760-the-tree-slider http://www.w3.org/TR/html5/history.html
114. THANKS @PHILHAWKSWORTH #GOTHAMJS