Real progressive
enhancement




                            Chris&an Heilmann
                   FOWA, London, October 20...
HTML5
Beware of truisms!
HTML5 does not
mean building apps
for iPad, iPhone and
Android.
Staying in the
comfort zone.
Building for the web
means open
development.
http://icant.co.uk/articles/seven-rules-of-
unobtrusive-javascript/
http://www.zhuoqun.net/html/y2008/1103.html
Easy YouTube




 http://www.youtube.com/watch?v=CwsDKaalgq8&
 http://www.youtube.com/watch?v=QiuT0y0KR6I
“   You can leave now - I don’t
    need you any longer to watch
    my videos!
                                   “
HTML5 means
moving from hacks
to web applications.
The web is a scary
place.
A constantly
upgrading web?
IE6+Large Organisations=BFF




http://www.hmg.gov.uk/epetition-responses/petition-view.aspx?epref=ie6upgrade
Complex software will always have
vulnerabilities and motivated
adversaries will always work to
discover and take advantag...
It is not straightforward for HMG
departments to upgrade IE versions
on their systems.  Upgrading these
systems to IE8 can...
To test all the web applications
currently used by HMG departments
can take months at significant
potential cost to the tax...
And this is why we
need progressive
enhancement.
Which is not
“making it work for
IE6”.
Instead it is “test for
support before you
apply”
http://www.modernizr.com/

http://github.com/phiggins42/has.js
[geomaker]


  http://icant.co.uk/geomaker/index.php
http://uk-house-prices.com/
For a lot of new
developers, this
looks like extra
effort.
Instead we produce low
quality fallbacks.
New technologies
can be safely
applied with a few
lines of code.
Take local storage
for example. 15MB
cookies!
http://github.com/codepo8/firehose-research/
We built all these
cool widgets...
Wouldn’t it be great
to just be able to
use them?
http://express.davglass.com/
node.js + express.js
+ YUI3 = Progressive
Enhancement win!
http://www.yuiblog.com/blog/2010/09/29/video-glass-node/
Even more
interesting - today’s
widgets are already
tomorrow’s native
controls.
<datalist>

               type=”color”


type=”range”




                type=”file”

 type=”date”
Re-use of learnings.
CSS3
  Animation
     and
      Transition
On-demand loading
allows for enhanced
support without
overhead.
YUI’s intrinsic Loader now supports 
capability‐based loading. 
We’re leveraging this new feature to 
avoid shipping IE‐sp...
Last but not least, it
is time to think
about our
development stack.
http://revdancatt.com/2010/09/27/a-users-guide-to-
websites-part-1-if-it-wasnt-broken-why-fix-it-2/
http://yuiblog.com/crockford/   “Loopage”
The future of web
apps is being
forged right now.
Be part of the
movement for a
better web for all.
Come and talk to
us, to Google, to
Apple, to Mozilla, to
Opera, to
Microsoft...
Your input matters!
Christian Heilmann
http://wait-till-i.com        Thanks!
http://developer-evangelism.com
http://twitter.com/codepo8
Fowa2010 progressive-enhancement
Fowa2010 progressive-enhancement
Fowa2010 progressive-enhancement
Fowa2010 progressive-enhancement
Fowa2010 progressive-enhancement
Fowa2010 progressive-enhancement
Fowa2010 progressive-enhancement
Fowa2010 progressive-enhancement
Fowa2010 progressive-enhancement
Fowa2010 progressive-enhancement
Upcoming SlideShare
Loading in...5
×

Fowa2010 progressive-enhancement

4,043

Published on

Presentation at Future of web apps in London 2010 about progressive enhancement and building things for the web - audio soon available.

1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,043
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
35
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

Fowa2010 progressive-enhancement

  1. 1. Real progressive enhancement Chris&an Heilmann FOWA, London, October 2010
  2. 2. HTML5
  3. 3. Beware of truisms!
  4. 4. HTML5 does not mean building apps for iPad, iPhone and Android.
  5. 5. Staying in the comfort zone.
  6. 6. Building for the web means open development.
  7. 7. http://icant.co.uk/articles/seven-rules-of- unobtrusive-javascript/ http://www.zhuoqun.net/html/y2008/1103.html
  8. 8. Easy YouTube http://www.youtube.com/watch?v=CwsDKaalgq8& http://www.youtube.com/watch?v=QiuT0y0KR6I
  9. 9. “ You can leave now - I don’t need you any longer to watch my videos! “
  10. 10. HTML5 means moving from hacks to web applications.
  11. 11. The web is a scary place.
  12. 12. A constantly upgrading web?
  13. 13. IE6+Large Organisations=BFF http://www.hmg.gov.uk/epetition-responses/petition-view.aspx?epref=ie6upgrade
  14. 14. Complex software will always have vulnerabilities and motivated adversaries will always work to discover and take advantage of them.  There is no evidence that upgrading away from the latest fully patched versions of Internet Explorer to other browsers will make users more secure.
  15. 15. It is not straightforward for HMG departments to upgrade IE versions on their systems.  Upgrading these systems to IE8 can be a very large operation, taking weeks to test and roll out to all users.
  16. 16. To test all the web applications currently used by HMG departments can take months at significant potential cost to the taxpayer. It is therefore more cost effective in many cases to continue to use IE6 and rely on other measures, such as firewalls and malware scanning software, to further protect public sector internet users.
  17. 17. And this is why we need progressive enhancement.
  18. 18. Which is not “making it work for IE6”.
  19. 19. Instead it is “test for support before you apply” http://www.modernizr.com/ http://github.com/phiggins42/has.js
  20. 20. [geomaker] http://icant.co.uk/geomaker/index.php
  21. 21. http://uk-house-prices.com/
  22. 22. For a lot of new developers, this looks like extra effort.
  23. 23. Instead we produce low quality fallbacks.
  24. 24. New technologies can be safely applied with a few lines of code.
  25. 25. Take local storage for example. 15MB cookies!
  26. 26. http://github.com/codepo8/firehose-research/
  27. 27. We built all these cool widgets...
  28. 28. Wouldn’t it be great to just be able to use them?
  29. 29. http://express.davglass.com/
  30. 30. node.js + express.js + YUI3 = Progressive Enhancement win!
  31. 31. http://www.yuiblog.com/blog/2010/09/29/video-glass-node/
  32. 32. Even more interesting - today’s widgets are already tomorrow’s native controls.
  33. 33. <datalist> type=”color” type=”range” type=”file” type=”date”
  34. 34. Re-use of learnings.
  35. 35. CSS3 Animation and Transition
  36. 36. On-demand loading allows for enhanced support without overhead.
  37. 37. YUI’s intrinsic Loader now supports  capability‐based loading.  We’re leveraging this new feature to  avoid shipping IE‐specific code in the  Dom module to non‐IE browsers, a  performance/k‐weight boost that will  benefit all users of modern browsers  with no code change required. http://www.yuiblog.com/blog/2010/07/26/3-2-0pr1/
  38. 38. Last but not least, it is time to think about our development stack.
  39. 39. http://revdancatt.com/2010/09/27/a-users-guide-to- websites-part-1-if-it-wasnt-broken-why-fix-it-2/
  40. 40. http://yuiblog.com/crockford/ “Loopage”
  41. 41. The future of web apps is being forged right now.
  42. 42. Be part of the movement for a better web for all.
  43. 43. Come and talk to us, to Google, to Apple, to Mozilla, to Opera, to Microsoft... Your input matters!
  44. 44. Christian Heilmann http://wait-till-i.com Thanks! http://developer-evangelism.com http://twitter.com/codepo8
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×