Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Modernizr, Yepnope, and Polyfills

HTML5 is great. Everyone thinks so. You just can't wait until the web has enough support for it, right? Well, there are plenty of tools you can use to make that dream a reality. Learn how to build on the HTML5 stack without looking behind your back the whole time. Modernizr provides the ideology behind doing this. Yepnope (Modernizr.load) provides the means for making it fast, and the polyfills do all the hard work to make your app consistent and beautiful... today.

  • Identifiez-vous pour voir les commentaires

Modernizr, Yepnope, and Polyfills

  1. 1. Modernizr, Yepnope, and Polyfills alex sexton at html5.tx straight up.
  2. 2. the slide about mealex sextonaustin, tx (go horns)labs engineer at bazaarvoice@slexaxtonwrote yepnope. on modernizr team.yayQuery - TXJS
  3. 3. html5homi.es
  4. 4. goto in javascript
  5. 5. is<x>.partofhtml5.com aretables.partofhtml5.com
  6. 6. html5r0cks.com
  7. 7. slides.html5r0cks.com
  8. 8. vapor.jsthe smallest, fastest, js library in existence0kb100% test coverage0 lines of code
  9. 9. vapor.js
  10. 10. vapor.js
  11. 11. your goalto make cool shit or at least it should be
  12. 12. your problemthe browser support situation sucks
  13. 13. you wantconsistent experiencesnice specificationsuser/client happiness
  14. 14. you getnone of that stuffplus some other things you don’t want
  15. 15. that’s whyyou get paid more than your friends
  16. 16. make your life easiercare about good experiences, not identical experiences
  17. 17. you’ve heard this all beforere: every article written in the past yearhttp://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic
  18. 18. you can’t beat his analogyconsumption device :: contenttelevision :: television showweb browser :: web page http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic
  19. 19. tv http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic
  20. 20. tv :: web browser http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic
  21. 21. sweet sweetTAFEE (pronounced: taffy): tiered, adaptive front-end experiences. Customizing the experience to the uniquecapabilities of each browser, prioritizing a fast and good UXover consistency. definition from the book of Paul Irish
  22. 22. make your life easieruse the right tools for youbut definitely use them
  23. 23. modernizran object of named booleansan ideologyin the ‘not-creepy-and-with-exceptions’ kind of way
  24. 24. yepnope - modernizr.loada case-study
  25. 25. polyfillsnecessary.ideally invisible.
  26. 26. sites that use modernizrrollerderbyspace.comblueskypowerwashing.comantportal.comallencountryhospital.comtwitter.commicrosoft .net 3.5+
  27. 27. modernizr ideologyif you build forks in your application, fork on features
  28. 28. modernizr specificsModernizr.<featurename>
  29. 29. modernizr specifics
  30. 30. simplicity.
  31. 31. complexity.
  32. 32. obligatory browser sniff PSAAsk Mike Taylor (here) how the Opera 10.0 release went. Opera/9.80 (Windows NT 5.1; U; cs) Presto/2.2.15 Version/10.00
  33. 33. obligatory browser sniff PSAMozilla/5.0 (Macintosh; Intel Mac OS X 10_7_1) AppleWebKit/535.6 (KHTML, like Gecko) Chrome/16.0.899.0 Safari/535.6
  34. 34. obligatory browser sniff PSA image courtesy of @baldman Alex Jones
  35. 35. roll your ownyou canbut steal the tests from modernizr, plzfeature testing can even be hard w/ false positivesyou can should always just run a build
  36. 36. challenge : speedsome argue that feature testing is too slowsolution : cache your tests, only run what you need
  37. 37. challenge : false positiveswe’re hard-pressed to get touch events exactly rightyou _have_ localstorage, but you disabled it? wtf.SECURITY WARNING ALERT POPUPlinux video drivers, lol
  38. 38. here’s how you use itlive coding always works out. ==>
  39. 39. modernizr announcement thanks to the help of kevin gorski we have a cmd line tool run the build tool in your browser or your command lineBETA
  40. 40. yepnopealso known as Modernizr.loadload the files that you need based on the results of testsa good start to forking on features
  41. 41. yepnope
  42. 42. yepnopesaves you memory, execution time, bandwidthnot a replacement for a build process
  43. 43. scary 1 12 123 1234 12345 2if you branch on 5 features 23 234 2345 3 34 345 lots of combos 4 45 5 -
  44. 44. resolution consider making your application at 3 resolutionsLow Res Standard Def Hi Def
  45. 45. with yepnope
  46. 46. breakdown Low-res: IE6 and Feature Phones (IE7&8 for cool kids) SD : Lots of mobile, IE9 (or 7&8), <=FF3 HD : Chrome, Safari, FF 7, etcThese breakdowns happen based on feature tests, not because you singled them out.
  47. 47. somedayhopefully you’ll notice the browsers slowly shiftingthat means you’re doing it right
  48. 48. 3 similar versionssure some browsers get a little worse treatmentbut you crafted good fallbacks for each versionmuch easier to maintain
  49. 49. polyfill (noun)“A shim that mimics a future API providing fallbackfunctionality to older browsers.”
  50. 50. fancyfancy word for shim, shivbosses love this.
  51. 51. polyfillscoined by remy sharp in Introducing HTML5regressive enhancementfills the gaps between browsers on the same ‘definition’_not_ necessarily _across_ definitions
  52. 52. too many to counthttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
  53. 53. notable polyfillrespond.jsadds in mediaquery supportavailable in the modernizr build tool :Dso easy.
  54. 54. recapstop caring about browsers
  55. 55. recapstart caring about features
  56. 56. recapstop caring about browsers
  57. 57. recapstart caring about appropriate experiences
  58. 58. recapuse tools to make it easier on yourself
  59. 59. recapbuild cool shit
  60. 60. fin. Questions?!thanks@slexaxtoni’ll put these on slideshare or something, keep an eye out