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.
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
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
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
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.
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
- we all have a passion for this or we wouldn&#x2019;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&#x2019;s all cool, but it&#x2019;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&#x2019;s the bugs\n- there&#x2019;s the missing features (apis and actual browser chrome features)\n- there&#x2019;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&#x2019;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 &#x2018;alert&#x2019; example\n- move on\n
\n
\n
\n
paul irish&#x2019;s low res sd and hd\n
\n
And then consider how you could use yepnope to run those 3 resolutions\n