HTML5 buzzwords in action

Amy and I have made a version of the PepsiCo Zeitgeist for BlogHer 2010 (Safari 5 highly recommended to view in full glory!), and updated the visualization technology we use to the latest and greatest buzzwords in the process.

What is the Zeitgeist? It visualizes what attendees at the BlogHer conference are tweeting about, what the most important topics are, and how the attendees are connected (who is talking to who).

Big thanks to PepsiCo at this point, they’re doing some awesome things! Cheers!

But you’re here to read about buzzwords and if they are really applicable, so let’s have a look!

Hardware acceleration and scripty2

Sounds great, but is all the trouble good for something? Yes, it is. By using hardware-accelerated CSS animations, much smoother and less CPU-intensive animation is possible, plus you get ultra-smooth 50fps animation on iOS devices (iPhone, iPad). The Zeitgeist is not optimized for the iPhone, but if you have an iPad, be sure to check it out. It’s completely and utterly smooth.

We’re using mainly for the tweets visualization, but also for the bubbles on the connections page.

How does it work? Instead of animating standard CSS positioning properties like left, use -webkit-transform instead. Using that the browser has no need to recalculate the layout or do a complete rendering of the page for each animation step, instead the element is just a texture and is moved around with the facilities of the GPU, which is optimized for just that. The best thing is, it comes for free if you already use Scripty2—it does all the hard work for you of rewriting your “traditional” animations to hardware-accelerated ones.

It’s pretty new however, and right now only Safari 4+ (Mac), and Safari 5 (Mac & PC) support hardware-acceleration fully (no, Chrome doesn’t support it either). It seems that other browsers will catch up very soon, with at least Firefox and IE having announced hardware acceleration already (and when those are released, all that is needed is an update to Scripty2).

One big drawback: from time to time you hit some memory limitations and bugs, and these can be hard to reproduce. Keep in mind that it’s a very new technology and one that tries to push the edge of what web browsers can do! One thing that often helps is forcing the browser into making more elements into textures (try this first if you hit strange visual bugs like flickering):

body {
  -webkit-transform-style: preserve-3d;
  -webkit-transform: perspective(-900);
}

someelement {
  -webkit-transform: translate3d(0,0,0);  /* force texture */
}

Dean Jackson from Apple writes me:

In essence, any transform that has a 3D operation as one of its functions will trigger hardware compositing, even when the actual transform is 2D, or not doing anything at all (such as translate3d(0,0,0)). Note this is just current behaviour, and could change in the future (which is why we don’t document or encourage it). But it is very helpful in some situations and can significantly improve redraw performance.

The big payoff is the performance on mobile devices. There’s no other way to do this than using -webkit-transform and you get super-smooth, super-awesome animations, and your clients will want to have your babies.

CSS3 gradients

Oh my god, these save so much work. We’re using a background composition with a pattern (provided as 24-bit transparent PNG, left/bottom aligned), two overlaying gradients for the blue background, and 4 gradients for the vignetting effect. The whole CSS block looks like this:

background: #2b4e94 url(../images/bg-pattern.png) left bottom no-repeat;
  
background:
  url(../images/bg-pattern.png) left bottom no-repeat,
  -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.24)), color-stop(0.1, rgba(0,0,0,0)), to(rgba(0,0,0,0))),
  -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.24)), color-stop(0.1, rgba(0,0,0,0)), to(rgba(0,0,0,0))),
  -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0.24)), color-stop(0.1, rgba(0,0,0,0)), to(rgba(0,0,0,0))),
  -webkit-gradient(linear, right top, left top, from(rgba(0,0,0,0.24)), color-stop(0.1, rgba(0,0,0,0)), to(rgba(0,0,0,0))),
  -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), color-stop(0.6, rgba(0,0,0,0)), to(rgba(0,0,0,0.1))),
  -webkit-gradient(linear, left top, left bottom, from(#1c4088), to(#3c639d));
    
background:
  url(../images/bg-pattern.png) left bottom no-repeat,
  -moz-linear-gradient(-90deg, rgba(0,0,0,0.24), rgba(0,0,0,0) 10%, rgba(0,0,0,0)),
  -moz-linear-gradient(90deg, rgba(0,0,0,0.24), rgba(0,0,0,0) 10%, rgba(0,0,0,0)),
  -moz-linear-gradient(0deg, rgba(0,0,0,0.24), rgba(0,0,0,0) 10%, rgba(0,0,0,0)),
  -moz-linear-gradient(180deg, rgba(0,0,0,0.24), rgba(0,0,0,0) 10%, rgba(0,0,0,0)),
  -moz-linear-gradient(-90deg, rgba(0,0,0,0.1), rgba(0,0,0,0) 60%, rgba(0,0,0,0.1)),
  -moz-linear-gradient(-90deg, #1c4088, #3c639d);

You do have to have two definitions for Webkit- and Mozilla-based browsers. I kind of like Mozilla’s syntax more, but it’s really a matter of taste.

No JavaScript code and nothing else is required, the background automatically adjusts to the window size (be sure to set html,body{height:100%;}, too). These gradients are even great if you don’t want to use them for a production site—you can use them while prototyping your page to quickly try out variations, settle on one and then do it the “traditional” way (i.e. cut out graphics with Photoshop).

Next to the background, we’re also using gradients for the navigation buttons.

On IE and other browsers that don’t support these gradients, we just use a solid background color and the pattern. Looks fine too.

SVG

There are many graphics technologies that come with HTML5 (well, two), but there’s only one SVG. And SVG is awesome, because you get real, manipulatable nodes in your DOM tree. Animation is really easy, especially if you use the Raphaël JavaScript library, which works great with whatever other libraries you are using (in my case Prototype and Scripty2).

If you don’t know Raphaël (you should!), it provides a JavaScript API to generate vector graphics, using SVG on HTML5-supporting browsers, and VML on IE. It makes this transition largely painless, and forces you to learn some SVG in the process (notably, the SVG path string syntax, which can come in quite handy to understand the generated output).

We’re using it to draw and animate the lines that connect the nodes. It works everywhere, although SVG is not the fastest on mobile devices—we can get away with that with the specific animation we’re doing in this case.

Prototype.js

Prototype is the secret weapon in my arsenal, and I wouldn’t want to trade it with anything else. It’s superbly powerful when it comes to data crunching and munging.

var popular = data.words.map(function(word,idx){
  return { w:word.word.word, r:parseInt(word.word.hits) };
}).sortBy(function(w){ 
  return w.r;
}).reverse().slice(0,10).sortBy(Math.random); // *

What’s best about it is if you use Ruby in the backend, it makes for a quite seamless transition between Ruby and JavaScript coding. I like stuff that doesn’t get in the way.

It’s also quite well suited to implement prototypes (ha!) of more complicated algorithms, like the iterative algorithm used for placing the nodes of the connections graph (basically works with nodes & connecting edges and shifts stuff around based on “attraction” between nodes). However, iterative algorithms like these are one of the few things that actually require going in and doing some heavy-duty performance optimizations (like minimizing function calls, unrolling loops, precalculating stuff, etc.).

Conclusion

Buzzwords reign supreme! It’s not all just a senseless arms race between browser vendors, it’s actually useful for something! Now would be a good time to get up to speed with all those cool new buzzwords (and learn how to integrate them with your existing knowledge, of course!).

Plus, you can make it work cross-browser without too much effort. We support IE7, IE8, Safari 4+, Firefox 3.5+, Chrome and Opera. There are almost no hacks required for this broad compatibility.

By the way, we have some more tickets left for our HTML5 Mobile Pro Workshop, where I will share even more details about these and other awesome things you can do! Hint!

Update August 6, 2010: Added quote from Dean Jackson (Apple) about how hardware compositing is triggered.

*I know that sometimes I should use longer variable names