Modernizr, Yepnope, and Polyfills

8,337 views

Published on

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.

Published in: Technology
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,337
On SlideShare
0
From Embeds
0
Number of Embeds
297
Actions
Shares
0
Downloads
101
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • - we all have a passion for this or we wouldn’t put up with it\n- the new stuff that is _possible_ is absolutely mind blowing\n- constraints are an implementation detail\n\n
  • - it’s all cool, but it’s all different, and hardly mainstream\n
  • - you want what your clients and users want\n- your clients and users are likely completely unqualified to explain to you what they want (technically)\n\n
  • - there’s the bugs\n- there’s the missing features (apis and actual browser chrome features)\n- there’s the sheer speed difference\n
  • \n
  • - this is a primer to the main idea of the talk. you must buy into this for any of the rest to matter\n- free consistency is obviously ideal, but careful differentiation is most practical \n
  • - these are mostly ideas i stole from other smart people\n
  • \n
  • \n
  • \n
  • - technically he wanted to call it SAFE, which was way worse. I came up with the TAFEE name. straight up.\n- ooh a cool name for something we’ve seen already. next thing you know html5 will have a logo\n- names can be important for buy-in of the masses. use it. your boss loves acronyms.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • - iepp as well\n
  • \n
  • \n
  • from msdn on how to detect ie\n
  • - \n
  • - What browser is this?\n
  • \n
  • feature-tests directory\n
  • \n
  • \n
  • - break here. go to modernizr.com - go to the builder - run it.\n- copy the code\n- paste into a jsbin\n- use it an ‘alert’ example\n- move on\n
  • \n
  • \n
  • \n
  • paul irish’s low res sd and hd\n
  • \n
  • And then consider how you could use yepnope to run those 3 resolutions\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • but we try\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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>
===
true
||
false
    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

    ×