5 More for HTML5: CORS, WOFF, App Skeletons, and More

By John Jainschigg (February 15, 2012)

CORS shares fluently. Cross-Origin Resource Sharing (CORS) is a well-supported HTML5 idiom that enables fluent communication across domain boundaries – formerly the arena of XSS (cross-site scripting) in JSON and other tricky or limited maneuvers, all arguably insecure. Flexible and powerful, one popular emerging application is to use CORS to enable provision of third-party services through simple websites. For example, an intranet site might use CORS to let employees drag-and-drop files to a box on an intranet page, triggering CORS upload to an authorized third-party site for processing – all without requiring a proxy effort or back-end programming on the intranet site itself.

Using CORS on the client side looks and feels a lot like using (non cross-domain) AJAX – almost identical for most browsers, which implement it as an extension of XMLHttpRequest. Internet Explorer, by contrast, uses the explicit term XDomainRequest for CORS object invocation, which is semantically more clear and arguably more secure, since it distinguishes between non-cross-domain and cross-domain functionality. On the server side, enabling CORS requires making small changes to your webserver configuration to add the appropriate HTTP response header, and is detailed at http://enable-cors.org/ and elsewhere. The CORS standard includes a basic security skeleton for mutual authentication, but programmers looking to use CORS in production scenarios will want to plan carefully and add more deliberate security to guard against potential vulnerabilities.

Even better "when can I use?" quickstart. I just read about this today and visited instantly. http://html5please.us is a gorgeous web page from the folks that make the Modernizr javascript library for feature detection and management, and maintain caniuse.com – the site with complete compatibility tables for modern browser features. Html5please.us is like a quickstart guide to what HTML5 features are supported by what browsers/versions, that includes clues about required fallbacks and what the elite are now calling "polyfills" (i.e. HTML5 audio and video require source files in Ogg Vorbis and AAC, because different browsers support each codec). Check them all out.

Fix your WOFF. While not strictly part of HTML5, Web Open Font Format (and SVG fonts, and upcoming TrueType standard font support) have become strongly associated with HTML5 as huge contributors to the improved appearance of modern web applications. In fact, we are now pretty much at the point where you can tweak a page (and license fonts) to produce substantially equivalent typography across essentially all contemporary browsers, plus (via EOT) back through IE6. The folks at Fontspring are highly motivated to keep up with this stuff, and helpfully maintain an up-to-the-minute CSS3 @font-face syntax model recommendation that (in tandem with the proper licenses) should (hold your breath, now) make all browsers load an equivalent font in whatever format they best support. Check out the arcane, unfolding dialogue (and get the CSS) at http://www.fontspring.com/blog/fixing-ie9-font-face-problems.

Mobilize your boilerplate. When I was a lad, my webdev friends and I hand-tweaked our carefully cultivated libraries of cross-browser CSS fixes and comment-hiding tricks (uphill, both ways!) and made supercilious comments on QuirksMode about them. Yes, we were obnoxious – it was just the way we rolled. Today, however, you don't have to beat your head against the wall, because better solutions, like Gridless (http://thatcoolguy.github.com/gridless-boilerplate/) exist. Gridless is an opensource sub-meta-"framework" (the quotes mean "it's not really a framework") for cross-browser mobile webdev: it's a normalized HTML/CSS/javascript template that bakes in the tweaks you need to do for just about anything you can think of, cross browser and mobile-friendly, including typography, text semantics and grouping, embedded content, deterministic box-model management, and more. The name Gridless, as it suggests, means the meta-framework doesn't lock you into fixed page grid – the assumption (true, I would imagine, for most webdevs accustomed to working with grids like 960p) being that you can roll whatever grid you need around the encapsulated functionality.

Pin it up. The site-pinning capability of IE9/Windows 7 can give your site desktop presence for a growing bloc of users – enabling notifications and new kinds of metrics. Making a site "pinnable" isn't hard, but it's even easier with sites like http://www.buildmypinnedsite.com, which offer a combo of tutorials and wizard-driven code generation to get you pinnable in a big hurry. Worth a visit, even if pinning isn't your goal, because part of the pin-ready process involves creating a high-res favicon, which is the kind of thing webdevs sometimes forget to do unless they have a marketing manager hitting them over the head saying "you promised to make a high-res favicon."

John Jainschigg is a contributing editor for SourceForge and Geeknet.