Sunday, August 28, 2011

WUX101 HTML 5 Hands On

Owen Evans
Apologies that this post is fairly nonsensical. I've put my raw NZ TechEd 2011 notes up here for my reference. I'd like to think that I'll refine them over time, but that probably won't be the case.
Content + Consumption Device

Why not do the best presentation we can get:
Scared? Boss said not too.

Works everywhere.

Defensible Space (mobile apps, tools for devs) - known users

Lack of support is OK

What is a PolyFill?

Try not to use UA sniffing, instead feature detect: Modernizr does that

Dependable Features


39 box shadows, no good reason
CSS drop-shadows without images
text-align: centaur

input autofocus & placeholder

css3 Pattern Gradient
CSS3 Please
Gradient scanner

chop slider

Experimental Features

progress bars
web workers to offload logic

file api (information about a file that someone is trying to send you). - DropMocks

<input type="file" accept="images/*" multiple>
<input speech>

Edge features

CSS Mixins (SASS, Less) regions - column 1, 2, and 3. Just flow the content between them. Polyfill - A way to support HTML 5 features in older browsers using JavaScript shims. HTML5 Cross Browser Polyfills Everything added to the page slows it down. jsperf & browserscope HTML5 Rocks Mozilla MDN