Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Excessive Enhancement

Excessive Enhancement

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 talk was originally given at http://2011.full-frontal.org in Brighton, UK

465724d73fe3a92c0879fdfb43a3a6f3?s=128

Phil Hawksworth

November 12, 2011
Tweet

Transcript

  1. Excessive Enhancement Phil Hawksworth @philhawksworth

  2. a history of great talks at full frontal javascript &

    browser technologies @philhawksworth #fullfrontalconf
  3. front-end focus bleeding edge effects browser performance browser shizzle @philhawksworth

    #fullfrontalconf
  4. node.js bringing javascript to the server @philhawksworth #fullfrontalconf

  5. q=simon+willison+full+frontal &flesh_tones=false @philhawksworth #fullfrontalconf

  6. f/e + b/e @philhawksworth #fullfrontalconf

  7. browser shizzle can do animation can do 3D effects can

    do dynamic data visualisations @philhawksworth #fullfrontalconf
  8. @philhawksworth #fullfrontalconf caution

  9. ...so preoccupied with whether they could that they didn't stop

    to think if they should - Dr. Ian Malcolm @philhawksworth #fullfrontalconf
  10. Eaten by dinosaurs eaten by dinosaurs (possibly while on the

    toilet) @philhawksworth #fullfrontalconf
  11. captain killjoy running with scissors eating with mouth open @philhawksworth

    #fullfrontalconf ...but this stuff is important
  12. @philhawksworth #fullfrontalconf the web is agreement an uber-doodle about the

    web by @psd of @solderpad
  13. @philhawksworth #fullfrontalconf

  14. @philhawksworth #fullfrontalconf

  15. @philhawksworth #fullfrontalconf

  16. @philhawksworth #fullfrontalconf

  17. the uri is the thing another uber-doodle about the web

    by @psd of @solderpad @philhawksworth #fullfrontalconf
  18. @philhawksworth #fullfrontalconf

  19. @philhawksworth #fullfrontalconf

  20. @philhawksworth #fullfrontalconf

  21. agreement the contract of the URI @philhawksworth #fullfrontalconf

  22. not a lecture on REST @philhawksworth #fullfrontalconf

  23. cautionary tale the mistakes we have made before @philhawksworth #fullfrontalconf

  24. representation of content ask, and ye shall receive GET http://some.stuff

    @philhawksworth #fullfrontalconf
  25. the seductive power of the possible @philhawksworth #fullfrontalconf

  26. html5 whatever that is @philhawksworth #fullfrontalconf

  27. flash mistakes made with @philhawksworth #fullfrontalconf

  28. anti-flash mob! you’re a member of the @philhawksworth #fullfrontalconf

  29. snooty attitude of many web developers copyright Chris Kennett @philhawksworth

    #fullfrontalconf
  30. common criticisms @philhawksworth #fullfrontalconf

  31. frozen content copy / paste bookmark-able accessible searchable @philhawksworth #fullfrontalconf

    @philhawksworth #fullfrontalconf
  32. flash *can* do it @philhawksworth #fullfrontalconf

  33. "show me" @philhawksworth #fullfrontalconf

  34. pixels > the web @philhawksworth #fullfrontalconf

  35. what is valued by the developers? photoshop adobe suite flash

    @philhawksworth #fullfrontalconf
  36. care more about the sex appeal ...than the fundamentals of

    the web @philhawksworth #fullfrontalconf
  37. the seductive power of the possible @philhawksworth #fullfrontalconf

  38. richer user experiences @philhawksworth #fullfrontalconf increased sophistication @philhawksworth #fullfrontalconf

  39. @philhawksworth #fullfrontalconf

  40. @philhawksworth #fullfrontalconf

  41. http://beetle.de a rich user experience open Web technologies ...and why

    I think it sucks @philhawksworth #fullfrontalconf @philhawksworth #fullfrontalconf
  42. @philhawksworth #fullfrontalconf @philhawksworth #fullfrontalconf ~13 seconds operator instructions @philhawksworth #fullfrontalconf

  43. 11mb images 251 http requests missing cache expiration @philhawksworth #fullfrontalconf

  44. 15mb images 316 http requests missing cache expiration @philhawksworth #fullfrontalconf

  45. @philhawksworth #fullfrontalconf

  46. 4mb images 314 http requests @philhawksworth #fullfrontalconf

  47. @philhawksworth #fullfrontalconf @philhawksworth #fullfrontalconf

  48. ...so preoccupied with whether they could that they didn't stop

    to think if they should - Dr. Ian Malcolm @philhawksworth #fullfrontalconf
  49. @philhawksworth #fullfrontalconf that is really rather a lot of http

    requests for a web site about a car. - Dr. Ian Malcolm
  50. Eaten by dinosaurs @philhawksworth #fullfrontalconf

  51. but it will work on an iPhone @philhawksworth #fullfrontalconf

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

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

  54. /reduced but it will work on an iPhone @philhawksworth #fullfrontalconf

    http://beetle.de
  55. @philhawksworth #fullfrontalconf hijacking the links @philhawksworth #fullfrontalconf

  56. @philhawksworth #fullfrontalconf “why don’t the fucking wheels fucking move?!!” @bruised_blood

    @philhawksworth #fullfrontalconf
  57. pixels the web > @philhawksworth #fullfrontalconf

  58. pixels the web > @philhawksworth #fullfrontalconf

  59. without javascript? @philhawksworth #fullfrontalconf

  60. @philhawksworth #fullfrontalconf

  61. @philhawksworth #fullfrontalconf

  62. what is the address of that content? @philhawksworth #fullfrontalconf

  63. URIs are what make the Web a web @philhawksworth #fullfrontalconf

  64. forgotten how the web works @philhawksworth #fullfrontalconf

  65. being seduced by the possible @philhawksworth #fullfrontalconf

  66. @philhawksworth #fullfrontalconf why u no shizzle?

  67. @philhawksworth #fullfrontalconf curl http://some.stuff

  68. @philhawksworth #fullfrontalconf

  69. twitter.com is not a web site (except of course it

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

    is) @philhawksworth #fullfrontalconf @philhawksworth #fullfrontalconf
  71. twitter is a platform everything uses the API @philhawksworth #fullfrontalconf

    @philhawksworth #fullfrontalconf
  72. "twitter web client" @philhawksworth #fullfrontalconf

  73. without javascript? @philhawksworth #fullfrontalconf

  74. @philhawksworth #fullfrontalconf

  75. but nobody has javascript disabled missing the point @philhawksworth #fullfrontalconf

  76. what about the contract of the URI? @philhawksworth #fullfrontalconf

  77. @philhawksworth #fullfrontalconf not known at this address

  78. #! @philhawksworth #fullfrontalconf

  79. #! shbang @philhawksworth #fullfrontalconf

  80. #! shbang 61 slides simon willison ricky martin from to

    @philhawksworth #fullfrontalconf
  81. #! why use @philhawksworth #fullfrontalconf

  82. # @philhawksworth #fullfrontalconf

  83. # @philhawksworth #fullfrontalconf window.location.hash

  84. client-side routing client-side processing @philhawksworth #fullfrontalconf

  85. @philhawksworth #fullfrontalconf enable history navigation

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

  87. when did it get so hard to crawl the web?

    what does it take to write a good crawler? @philhawksworth #fullfrontalconf
  88. interface shizzle doesn't have to break the uri @philhawksworth #fullfrontalconf

  89. @philhawksworth #fullfrontalconf

  90. @philhawksworth #fullfrontalconf

  91. @philhawksworth #fullfrontalconf

  92. @philhawksworth #fullfrontalconf

  93. html5 @philhawksworth #fullfrontalconf history api

  94. @philhawksworth #fullfrontalconf

  95. @philhawksworth #fullfrontalconf

  96. @philhawksworth #fullfrontalconf

  97. @philhawksworth #fullfrontalconf

  98. client-side routing client-side processing @philhawksworth #fullfrontalconf

  99. fashionable single page apps @philhawksworth #fullfrontalconf

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

  101. @philhawksworth #fullfrontalconf 2k javascript library unobtrusive progressive enhancement

  102. demos & developer tools @philhawksworth #fullfrontalconf

  103. @philhawksworth #fullfrontalconf

  104. just a demo @philhawksworth #fullfrontalconf

  105. just a demo the biggest danger is when that demo

    mentality leaks into production websites @brucelawson @philhawksworth #fullfrontalconf
  106. @philhawksworth #fullfrontalconf

  107. @philhawksworth #fullfrontalconf polaroiderizer.com/#fullfrontalconf

  108. developer tools @philhawksworth #fullfrontalconf

  109. 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 #fullfrontalconf
  110. experiment & explore @philhawksworth #fullfrontalconf but take care of the

    web (and chew with your mouth closed)
  111. 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

    #fullfrontalconf 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 #fullfrontalconf @philhawksworth
  112. @philhawksworth #fullfrontalconf #fullfrontalconf ta!