Progressive enhancement - a barrier to progress?

802afd5856ed0054d7d1851ea21cbabe?s=47 nelstrom
February 03, 2012

Progressive enhancement - a barrier to progress?

HTML5 makes it possible to build applications in the browser that were previously unimaginable, but to do so we must abandon progressive enhancement. Solving a problem well is better than solving it twice. As the real-time web becomes reality, it's ok to state that JavaScript is a requirement.

802afd5856ed0054d7d1851ea21cbabe?s=128

nelstrom

February 03, 2012
Tweet

Transcript

  1. Drew Neil @nelstrom 1 February 2012 Refresh Edinburgh PROGRESSIVE ENHANCEMENT

    a BARRIER to PROGRESS? Image credit: http://flic.kr/p/7SpdqN
  2. JavaScript EVERYWHERE Image credit: http://flic.kr/p/5KSgEV

  3. JavaScript in an ARMS RACE Photo by Drew Neil

  4. JavaScript on THE SERVER

  5. JavaScript in THE DATABASE

  6. { "firstName" : "Drew", "lastName" : "Neil", "address" : {

    "street" : "Wollinerstrasse", "city" : "Berlin", "postalCode" : "10435" } } JavaScript on THE WIRE
  7. JavaScript in EDUCATION

  8. JavaScript in an ARMS RACE on the SERVER in the

    DATABASE on THE WIRE in EDUCATION
  9. JavaScript EVERYWHERE Image credit: http://flic.kr/p/2WhsnJ

  10. HTML5 new toys! Image credit: http://flic.kr/p/9nSGS1

  11. HTML5 new tags Image credit: http://flic.kr/p/6jwjzj

  12. None
  13. HTML5 new APIs Image credit: http://flic.kr/p/4g31ca

  14. None
  15. SYSTEM REQUIREMENTS

  16. SYSTEM REQUIREMENTS SYSTEM REQUIREMENTS OS Windows XP, Vista, Vista64 CPU

    3.0 GHz P4, Dual Core 2.0 or AMD64X2 (or higher) RAM 1GB for XP / 2GB for Vista DISC DRIVE DVD-ROM Drive HARD DRIVE At least 7.5 GB of free space VIDEO DirectX 9 compatible video card AUDIO DirectX 9.0c compatible sound card
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. let’s get TECHNICAL! Image credit: http://flic.kr/p/77HXJQ

  24. <li> <img src="static.twitter.com/12354678/nelstrom.jpg"/> <a href="twitter.com/nelstrom">nelstrom</a> <p> Just watched @wilsonminer's highly

    accl... </p> <span class="timestamp">11 hours ago</span> </li>
  25. <li> <img src="{avatar_src}"/> <a href="{user_url}">{user_name}</a> <p> {text} </p> <span class="timestamp">{timestamp}</span>

    </li>
  26. <li> <img src="{avatar_src}"/> <a href="{user_url}">{user_name}</a> <p> {text} </p> <span class="timestamp">{timestamp}</span>

    </li> { avatar_src: "static.twitter.com/12354678/nelstrom.jpg", user_url: "twitter.com/nelstrom", user_name: "nelstrom", text: "Just watched @wilsonminer's highly accl...", timestamp: "11 hours ago" }
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. following: { count: 535, records: [ { name: 'wilsonminer', avatar_url:

    '.../1234/wm.jpg' }, { name: 'techberlin', avatar_url: '.../2134/tb.jpg' }, ... ] } Data Store
  35. following: { count: 535, records: [ { name: 'wilsonminer', avatar_url:

    '.../1234/wm.jpg' }, { name: 'techberlin', avatar_url: '.../2134/tb.jpg' }, ... ] } <p>Following {following.count}</p> <ul> <tpl for="following.records"> <li><img src="{avatar_url}"/></li> </tpl> </ul> Data Store Template
  36. following: { count: 535, records: [ { name: 'wilsonminer', avatar_url:

    '.../1234/wm.jpg' }, { name: 'techberlin', avatar_url: '.../2134/tb.jpg' }, ... ] } <p>Following {following.count}</p> <ul> <tpl for="following.records"> <li><img src="{avatar_url}"/></li> </tpl> </ul> Data Store Template Rendered HTML
  37. following: { count: 536, records: [ { name: 'OpenSourceScot', avatar_url:

    '.../1234/oss.jpg' }, { name: 'wilsonminer', avatar_url: '.../1234/wm.jpg' }, { name: 'techberlin', avatar_url: '.../2134/tb.jpg' }, ... ] } <p>Following {following.count}</p> <ul> <tpl for="following.records"> <li><img src="{avatar_url}"/></li> </tpl> </ul> Data Store Template Rendered HTML
  38. <!DOCTYPE> <html> <head> <script src="application.js"></script> <link href="application.css" rel="stylesheet"/> </head> <body></body>

    </html>
  39. THERE ONCE WAS A TIME before Google Maps Image credit:

    http://flic.kr/p/KqEiq
  40. FAST CHEAP GOOD PICK TWO

  41. ACCESSIBLE SECURE DYNAMIC COMPROMISE

  42. None
  43. ACCESSIBLE SECURE DYNAMIC COMPROMISE

  44. None
  45. The business goal for Trello is to get 100 million

    users. Our highest priority is removing anything that people might use as a reason not to use Trello. Joel Spolsky http://www.joelonsoftware.com/items/2012/01/06.html Image credit: http://flic.kr/p/8vYWhW
  46. None
  47. a web of DOCUMENTS Image credit: http://flic.kr/p/98abNW

  48. a web of ACTIVITY Image credit: http://flic.kr/p/5jC59a

  49. a web of ACTIVITY DISCUSS