Five things you can do to make HTML5 perform better

I think most mobile developers today probably already know most of these mobile performance rules, but #3 was interesting to me:
http://christianheilmann.com/2013/01/25/five-things-you-can-do-to-make-html5-perform-better/
Instead of using position: absolute and the positioning via top and left, Chris recommends using translate(x, y) to position elements outside their normal layout location…

This bit is backed-up by Paul Irish’s research.

Introduction to JavaScript Source Maps

Ever tried to find a bug in minified or obfuscated code?  Whether it is HTML, CSS or JS, it is a serious pain.  Until JS Source Maps appeared, that is…
http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

The article is thorough (read: a little long, for some), so here is a demo:

  • Go here: http://www.thecssninja.com/demo/source_mapping/
  • Right click something in the obfuscated code and click the “Get original location” link that appears
  • Be amazed at what appears in the text box above the obfuscated code…

How does this voodoo work??

  1. Two requirements: 1) Use Google’s Closure compiler to combine/minify/obfuscate your JS files, and 2) Debug using Google Chrome (currently only Canary, with the “Enable source maps” setting checked).
  2. Closure compiler, let’s you set a flag to create a Source Map file.
  3. A Source Map file is created and place on your server beside your minified JS file.
  4. A comment is added to your minified JS file telling Chrome that the Source Map file exists, and where to find it.
  5. When you click that “Get original location” link, the Source Map file is fetched and the look-up is done.

Not completely ready for prime-time just yet, but coming soon!