Visualizing WebKit’s hardware acceleration

Want to know which parts of your web page are hardware accelerated on Safari or Mobile Safari? It’s easy to find out.

Just start Safari with…


$ CA_COLOR_OPAQUE=1 /Applications/Safari.app/Contents/MacOS/Safari


..and all hardware-accelerated layers will show up in red. Try apple.com or Every Time Zone or Freelancember.

Same goes for Mobile Safari, in the iOS Simulator:


$ CA_COLOR_OPAQUE=1 /Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone Simulator.app/Contents/MacOS/iPhone Simulator


Try surfing over to HTML5 Mobile Pro, and see the Core Animation layers in all their red-tinted glory.

You can mess around even more with the various Core Animation debugging flags. For example, if you specify CA_PRINT_TREE=1 you’ll get complete dumps of the rendering tree that Core Animation uses to composite the image, and CA_COLOR_FLUSH=1 will show you when hard-accelerated parts of your page are updated/redrawn.

(Hat tip to @thijs for this handy tip!)

CSS animation transition-timing-functions and why they are not enough

If you hop over to Apple’s website you’ll notice a fancy shiny new navigation bar. And you’ll notice the fancy shiny animations the navigation bar has. There are even better animations on the Mac subsection, all springy and bouncy and whatnot.

While it’s pleasing to the eye and fun to use, implementing this is less fun:

@-webkit-keyframes open-1 {
    from { opacity:0; -webkit-transform:translate3d( 210px, -145px, 0); }
    25%  { opacity:1; -webkit-transform:translate3d( -15.6px, 4.1px, 0); }
    30%  { opacity:1; -webkit-transform:translate3d( -10.3px, 2.7px, 0); }
    35%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    40%  { opacity:1; -webkit-transform:translate3d( 4.5px, -1.2px, 0); }
    45%  { opacity:1; -webkit-transform:translate3d( 2.9px, -0.8px, 0); }
    50%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    55%  { opacity:1; -webkit-transform:translate3d( -1.3px, 0.3px, 0); }
    60%  { opacity:1; -webkit-transform:translate3d( -0.8px, 0.2px, 0); }
    65%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    70%  { opacity:1; -webkit-transform:translate3d( 0.4px, -0.1px, 0); }
    75%  { opacity:1; -webkit-transform:translate3d( 0.2px, -0.1px, 0); }
    80%  { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
    85%  { opacity:1; -webkit-transform:translate3d( -0.1px, 0, 0); }
    90%  { opacity:1; -webkit-transform:translate3d( -0.1px, 0, 0); }
    to   { opacity:1; -webkit-transform:translate3d( 0, 0, 0); }
}

That’s not exactly easy to change or readable or flexible, or DRY. So why does Apple have to resort to these keyframe-based animations? The reason is that the transition-timing-function CSS property works only with cubic bezier curves, and not with arbitrary easing formulas.

Adding easings would be pretty easy, and in fact you can right now reuse easing calculation like the ones in Scripty2 and just generate CSS keyframes with them. That’s clunky and awkward however, and I think the browser should do that for you.

I’d love to see callbacks to JavaScript in the transition-timing-function to fix this issue, but meanwhile it would be awesome to have a little JavaScript library to help with this. Any takers?

Zepto.js v0.4 – JSONP & more DOM goodness

The first release in the new year sees JSONP and lots of DOM goodness coming to Zepto.js! Zepto.js v0.4 is now available for download.

We’re now up to 89 forks and 1073 watchers on GitHub, and patches keep rolling in! If you spot a missing part in Zepto.js, like an incompatibility with the jQuery API or something yet unsupported, please don’t hesitate to fork and bring those pull requests!

Here is what’s new in Zepto.js v0.4:

• JSONP Ajax requests
• Optimized and cleaned up .each & .find
• .append, .prepend, .before, .after now accept Zepto objects
• Function arguments to .html and .attr
• .val (rudimentary support)
• Blackberry detection
• .size, .parent, .parent, .eq, .removeAttr

Again a big thank you to all the contributors! Let’s get work started on v0.5!

Download v0.4 and grab the source at GitHub.

P.S. Want to support Zepto.js development but can’t contribute source code or documentation? There’s a HTML5 Mobile Pro Workshop coming up in February!

Add a tip to DOM Monster and win a seat for HTML5 Mobile Pro

ONLY TODAY, January 12, 2011! If you submit a pull request on GitHub for DOM Monster today we’ll include you in a draw for a free seat for our HTML5 Mobile Pro workshop (either this Friday or any future dates for it!).

What’s a useful patch? Any patch that enhances the structure of the DOM Monster to make easier to add more tips, or additional tips for the DOM Monster. Here are some suggestions:

• Look for external webfont service and advise against them (serving fonts yourself is probably faster and you don’t suffer from downtimes)
• Look for stats scripts that are included in HEAD instead of the BODY
• Provide pointers that JavaScript can by loaded in parallel in some browsers (async/defer attributes)
• Plug into popular JavaScript libs to see how many event listeners are active and give some warnings if there are too many, or too many nested event listeners (e.g. use event delegation instead)

There are many, many more possibilities of course. I’m looking forward to see what you come up with!

The DOM Monster is now open source

The DOM Monster is our answer to JavaScript performance tools that just don’t give you the full picture.

The DOM Monster is a cross-platform, cross-browser bookmarklet that will analyze the DOM & other features of the page you’re on, and give you its bill of health. It also works great on mobile browsers!

You’ll get helpful hints and tips about things like:

• Average node nesting depth, and if it’s too high
• Total size for the HTML on the page (even after ajax calls, etc)
• Use of deprecated elements
• Empty and comment nodes
• Out-of-date JavaScript libraries
• …and many more!

The best thing: the DOM Monster is free and open source (MIT license). Contribute your own tips and tests. Visit the DOM Monster repository on GitHub to fork and contribute!

The DOM Monster! is the brainchild of Amy Hoy and was programmed by yours truly—we originally included it with our JavaScript Performance ebook (you should still get that ebook because it shows you how to fix issues pointed out by the DOM Monster!).

Give the gift of JavaScript! 50% off JavaScript Performance Rocks!

Need a last minute gift for a JavaScripting friend? Or even yourself? My JavaScript Rocks! Performance ebook is now 50% off and available until the end of the year for just $19.95 (a total steal if you ask me!). That includes not 1, not 2, but 3 ebooks, plus our DOM Monster bookmarklet-based performance analyzing tool.

And the best thing is, with digital delivery of the PDF and the bookmarklet, you’ll get it guranteed just in time for Christmas! 🙂

Tip: Put it on a USB stick and add a little ribbon to it!

Grab your copy now at javascriptrocks.com.

Zepto.js v0.3 – bug fix galore, toggleClass, .attr(‘value’), .last, $ fragments (element creation), .undelegate, .die, proxied event objects

Just in time for hack nights during the holidays, Zepto.js v0.3 is now available!

What’s new in this release?

• First off, lots of little bug fixes and enhancements to existing functionality
• .toggleClass
• .attr(‘value’) now returns the value for INPUT elements
• .last
• $ fragments (element creation)
• More event goodness with .undelegate, .die and proxied event objects

A big thank you to all the contributors to this beta release (…and Zepto.js v0.4 is just around the corner for the new year!) 🙂

As always, get the source and contribute on GitHub (at the time of this writing we’re up to 957 watchers and 78 forks, awesome!).

P.S. Want to support Zepto.js development but can’t contribute source code or documentation? There’s a HTML5 Mobile Pro Workshop coming up in January, plus Amy’s and my JavaScript Performance Ebook is on sale (50% off until December 31!). Hint: the ebook and the workshop make great gifts! 🙂

Learn advanced JavaScript and mobile HTML5 in 2011!

Yours truly and Amy have set up new dates for our popular JavaScript Master Class and HTML5 Mobile Pro Workshop, in early 2011.

If you’re fast and book your tickets in December, you can both get a last-minute tax write-off for 2010, and save by taking advantage of the early bird pricing!

We also have plans for two brand-new workshops and a JavaScript learning platform, but more on this later! 🙂

Freelancing? Check out Freelancember!

Are you a freelancer? Amy and I put up a calendar with a new gift every day to make your freelancing life so much better! Check it out at freelancember!

Zepto.js v0.2 — backbone.js compatibility, .unbind, .text, better Ajax

Zepto.js is alive and kicking, and we just pushed version 0.2! Thanks to a contribution from Sam Stephenson of Prototype.js fame, Zepto.js now sports compatibility with Backbone.js, which opens up a bag of awesome possibilities for mobile apps:

Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface

Compatibility was achieved by adding some missing functionality to Zepto, namely a more robust events system, and support for $.fn.text.

Also added in this release is proper support for Ajax calls, with optional JSON encoding. Thanks to Jakub Nešetřil for this contribution!

The best thing is, Zepto.js is still only 2.5k in size when properly minified and gzipped!

Grab the new release from zeptojs.com and stay updated on GitHub and Twitter.