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.

1. Modernizr, Yepnope,
and Polyfills
alex sexton at html5.tx
straight up.

2. the slide about me
alex sexton
austin, tx (go horns)
labs engineer at bazaarvoice
@slexaxton
wrote yepnope. on modernizr team.
yayQuery - TXJS

3. html5homi.es

4. goto in javascript

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

6. html5r0cks.com

7. slides.html5r0cks.com

8. vapor.js
the smallest, fastest, js library in existence
0kb
100% test coverage
0 lines of code

9. vapor.js

10. vapor.js

11. your goal
to make cool shit
or at least it should be

12. your problem
the browser support situation sucks

13. you want
consistent experiences
nice specifications
user/client happiness

14. you get
none of that stuff
plus some other things you don’t want

15. that’s why
you get paid more than your friends

16. make your life easier
care about good experiences, not identical experiences

17. you’ve heard this all before
re: every article written in the past year
http://www.slideshare.net/nzakas/progressive-
enhancement-20-conference-agnostic

18. you can’t beat his analogy
consumption device :: content
television :: television show
web browser :: web page
http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic

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

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

21. sweet sweet
TAFEE (pronounced: taffy): tiered, adaptive front-
end experiences. Customizing the experience to the unique
capabilities of each browser, prioritizing a fast and good UX
over consistency.
definition from the book of Paul Irish

22. make your life easier
use the right tools for you
but definitely use them

23. modernizr
an object of named booleans
an ideology
in the ‘not-creepy-and-with-exceptions’ kind of way

24. yepnope - modernizr.load
a case-study

25. polyfills
necessary.
ideally invisible.

26. sites that use modernizr
rollerderbyspace.com
blueskypowerwashing.com
antportal.com
allencountryhospital.com
twitter.com
microsoft .net 3.5+

27. modernizr ideology
if you build forks in your application, fork on features

28. modernizr specifics
Modernizr.<featurename> === true || false

29. modernizr specifics

30. simplicity.

31. complexity.

32. obligatory browser sniff PSA
Ask 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. obligatory browser sniff PSA
Mozilla/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. obligatory browser sniff PSA
image courtesy of @baldman Alex Jones

35. roll your own
you can
but steal the tests from modernizr, plz
feature testing can even be hard w/ false positives
you can should always just run a build

36. challenge : speed
some argue that feature testing is too slow
solution : cache your tests, only run what you need

37. challenge : false positives
we’re hard-pressed to get touch events exactly right
you _have_ localstorage, but you disabled it? wtf.
SECURITY WARNING ALERT POPUP
linux video drivers, lol

38. here’s how you use it
live coding always works out. ==>

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 line
BETA

40. yepnope
also known as Modernizr.load
load the files that you need based on the results of tests
a good start to forking on features

41. yepnope

42. yepnope
saves you memory, execution time, bandwidth
not a replacement for a build process

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

44. resolution
consider making your application at 3 resolutions
Low Res Standard Def Hi Def

45. with yepnope

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, etc
These breakdowns happen based on feature tests, not because
you singled them out.

47. someday
hopefully you’ll notice the browsers slowly shifting
that means you’re doing it right

48. 3 similar versions
sure some browsers get a little worse treatment
but you crafted good fallbacks for each version
much easier to maintain

49. polyfill (noun)
“A shim that mimics a future API providing fallback
functionality to older browsers.”

50. fancy
fancy word for shim, shiv
bosses love this.

51. polyfills
coined by remy sharp in Introducing HTML5
regressive enhancement
fills the gaps between browsers on the same ‘definition’
_not_ necessarily _across_ definitions

52. too many to count
https://github.com/Modernizr/Modernizr/wiki/HTML5-
Cross-Browser-Polyfills

53. notable polyfill
respond.js
adds in mediaquery support
available in the modernizr build tool :D
so easy.

54. recap
stop caring about browsers

55. recap
start caring about features

56. recap
stop caring about browsers

57. recap
start caring about appropriate experiences

58. recap
use tools to make it easier on yourself

59. recap
build cool shit

60. fin. Questions?!
thanks
@slexaxton
i’ll put these on slideshare or something, keep an eye out