Monthly Archives: February 2007

ClassAnim & HoverHijax: Keeping Presentation out of Your JavaScript

Heads up! This was written in 2007 and many things have changed since then. Nowadays, CSS transitions are widely supported by browsers and a better approach.

Ever since the dawn of CSS and compliant browsers web developers have been squeezing the presentation layer out of HTML and into external CSS files. It has become a web development battle cry and having a tableless website was worn as your badge of honor. To the web dev elite, having <br> tags in your HTML is a sin punishable by death (or at least severe laughing and poking).

Now we are moving in to the so-called ‘Web 2.0’ era. The time of shiny websites with page refreshes cut down to a select few actions. Animations and special effects compliment the content as it fades in and out of view. Libraries like YUI, Dojo and Prototype are making these things increasingly easy and well supported. But with all this, I feel we’re forgetting something. Where’d the presentation layer go?

When you’re animating a rollover or fading some colors do you stop and thing what you’re doing? You’re putting the colors, dimensions and effects into your JavaScript! The presentation layer that you’ve worked so hard to externalize is leaking into your JavaScript code. This is a slippery slope that we have to prevent now. The presentation layer should remain in the CSS, markup in the HTML and logic in the JavaScript. If you want to change the colors or sizes the elements are morphed into, you should be making those changes in CSS.

This brings me to my solution. I present to you an extension to the YUI animation library that will perform your cool animations from the styles defined in your CSS. I call it ClassAnim.

How it works

  1. ClassAnim starts by reading the styles from the base element.
  2. Then it quickly applies the new CSS class to it, reads the new styles and removes the class. This happens quicker than the user can notice.
  3. Now it compares the styles from both versions, extracts the differences that can be animated, and invokes the animation.

With ClassAnim, when you want to make a color or dimensional change you don’t have to go searching through your JavaScript, you make the change straight in the CSS — the way it was meant to be.

See the demo
(Please note: This API is still beta)

Link Rollovers (HoverHijax)

Here’s a simple implementation for rollovers. You’ll notice that all the links on my site have a fading hover effect on them (try mousing over one). This uses a simplified version of ClassAnim that I call HoverHijax. It only animates colors and does it on mouseover and mouseout. My original prototype would actually honor the :hover pseudo class, but good ‘ol Internet Explorer wasn’t allowing me to get to those styles through JavaScript. The current implementation adds a ‘hover’ class to all links when they are being moused over.

See the demo
(Please note: This API is still beta)

The best thing with HoverHijax is that it follows the Progressive Enhancement (or Hijax) strategy and can easily work with or without JavaScript as long as you use the ‘hover’ class along with a ‘:hover’ pseudo class. The only difference is that without JavaScript it wont have the cool fade effect.

a:hover, a.hover {

   color: #000;


Where to Download

You can download these new ‘experimental’ APIs from my subversion repository.

Browser Wars Episode II

Looks like Yahoo is getting pretty active on hosting exciting web development events! In their latest offering they will be hosting “Browser War Episode II” where the “Jedi Masters” behind Internet Explorer, Firefox and Opera will converge on a single floor to talk about DOM scripting — and perhaps we’ll even see a death match. OK, that’s my wishful thinking creeping into my blog again. This will all be moderated by the very smart Douglas Crockford.

This should be a very exciting and insightful night!

Browser Wars: Episode II Attack of the DOMs
Feb 28, 2007 Wed 6:00pm
Yahoo Building C, 701 First Avenue, Sunnyvale , California 94089
Douglas Crockford, Architect at Yahoo & Founder of JSON (Moderator & Host)
Chris Wilson, Group Program Manager of the Internet Explorer Platform at Microsoft
Mike Shaver, Director of Ecosystem Development at Mozilla Corporation
Håkon Wium Lie, CTO at Opera & Founder of CSS

New Site Design — Built with Web 2.0 ;)

Last weekend I had some spare time, a picture and a bit of inspiration and decided to redesign my website. The reason it has taken me so long to create my own design is that, simply put, I’m not a designer. I usually don’t know where to begin and how to get the design to flow correctly. I mean, I know good design and can even sometimes spit out things that are viewable, but I’m no designer.

So where did I start? <Leans back in chair> It all started a couple weeks ago when my Dad and I decided to go hiking up at Sanborn Park. Originally we were going to go Jeeping, but it had just rained the night before and his Jeep doesn’t have a winch yet, so we went hiking instead. The conditions were perfect and I was able to snap a few pretty good pictures. Out of the set, I was really drawn to the misty trail image. I liked it so much I decided to play with it in GIMP and afterwards decided to design my entire site around it. Once I had the picture, the rest of the site practically designed itself.

So browse around and let me know how you like it. I’ve also added some cool new Web 2.0 features:

  • All links have a new animated fading rollover effect pulled in from the CSS and animated with YUI.
    • This is part of an API I’m building in order to keep presentatin separate from the JavaScript.  More on this soon!
  • The tagline text fades into view when the page loads. I plan to add more random statements over time — any suggestions?
  • Comment submission is now done with XHR. I plan to make this more robust in the future.
  • And of course, shiny title bars.

The fading effects and XHR comments were all built with the YUI libraries.

Misty Trail - Sanborn Park

The YUI’s First Year Party

If you haven’t heard yet, the YUI team has put out an open invitation to their first year party.

Quoting Nate Koechley from the YUI blog:

This month the YUI Library turns one year old. When we started last year I wrote that I was “thrilled to have you with us.” That’s never been truer than it is today. We owe an outstanding first year to you. Libraries aren’t achievements themselves — it’s what people do with them that’s exceptional. We love everything you’re doing, so we’re throwing a party to thank you, our amazing community.

Join us Thursday, February 22nd, from 5:30 to 8:30 PM, at Yahoo! HQ in Sunnyvale, California. Visit for details and to RSVP. 300 people max, so RSVP early!

You can bet that I’ll be there along with many other WebDevs from PayPal. The guest list is up to 197, so RSVP now!

Czech Beer