Modernizr, Yepnope, and Polyfills

Modernizr, Yepnope, and Polyﬁlls alex sexton at html5.tx straight up.

the slide about mealex sextonaustin, tx (go horns)labs engineer at bazaarvoice@slexaxtonwrote yepnope. on modernizr team.yayQuery - TXJS

html5homi.es

goto in javascript

is<x>.partofhtml5.com aretables.partofhtml5.com

html5r0cks.com

slides.html5r0cks.com

vapor.jsthe smallest, fastest, js library in existence0kb100% test coverage0 lines of code

vapor.js

your goalto make cool shit or at least it should be

your problemthe browser support situation sucks

you wantconsistent experiencesnice speciﬁcationsuser/client happiness

you getnone of that stuffplus some other things you don’t want

that’s whyyou get paid more than your friends

make your life easiercare about good experiences, not identical experiences

you’ve heard this all beforere: every article written in the past yearhttp://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic

you can’t beat his analogyconsumption device :: contenttelevision :: television showweb browser :: web page http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic

tv http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic

tv :: web browser http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic

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. deﬁnition from the book of Paul Irish

make your life easieruse the right tools for youbut deﬁnitely use them

modernizran object of named booleansan ideologyin the ‘not-creepy-and-with-exceptions’ kind of way

yepnope - modernizr.loada case-study

polyﬁllsnecessary.ideally invisible.

sites that use modernizrrollerderbyspace.comblueskypowerwashing.comantportal.comallencountryhospital.comtwitter.commicrosoft .net 3.5+

modernizr ideologyif you build forks in your application, fork on features

modernizr speciﬁcsModernizr.<featurename> === true || false

modernizr speciﬁcs

simplicity.

complexity.

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

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

obligatory browser sniff PSA image courtesy of @baldman Alex Jones

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

challenge : speedsome argue that feature testing is too slowsolution : cache your tests, only run what you need

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

here’s how you use itlive coding always works out. ==>

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

yepnopealso known as Modernizr.loadload the ﬁles that you need based on the results of testsa good start to forking on features

yepnope

yepnopesaves you memory, execution time, bandwidthnot a replacement for a build process

scary 1 12 123 1234 12345 2if you branch on 5 features 23 234 2345 3 34 345 lots of combos 4 45 5 -

resolution consider making your application at 3 resolutionsLow Res Standard Def Hi Def

with yepnope

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.

somedayhopefully you’ll notice the browsers slowly shiftingthat means you’re doing it right

3 similar versionssure some browsers get a little worse treatmentbut you crafted good fallbacks for each versionmuch easier to maintain

polyﬁll (noun)“A shim that mimics a future API providing fallbackfunctionality to older browsers.”

fancyfancy word for shim, shivbosses love this.

polyfillscoined by remy sharp in Introducing HTML5regressive enhancementfills the gaps between browsers on the same ‘definition’_not_ necessarily _across_ definitions

too many to counthttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyﬁlls

notable polyﬁllrespond.jsadds in mediaquery supportavailable in the modernizr build tool :Dso easy.

recapstop caring about browsers

recapstart caring about features

recapstop caring about browsers

recapstart caring about appropriate experiences

recapuse tools to make it easier on yourself

recapbuild cool shit

ﬁn. Questions?!thanks@slexaxtoni’ll put these on slideshare or something, keep an eye out

http://speakerrate.com	54
http://paper.li	46
http://a0.twimg.com	44
http://blog.emilevictorportenart.be	35
http://us-w1.rockmelt.com	20
http://evp-webdesign.tumblr.com	15
http://evp-web.tumblr.com	7
http://tweetedtimes.com	5
http://www.scoop.it	3
http://localhost	1
http://leapf.org	1

Modernizr, Yepnope, and Polyfills

by Alex Sexton on Oct 08, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

11 Embeds 231

Statistics

Modernizr, Yepnope, and Polyfills — Presentation Transcript