Chris Malven

While working on a recent Javascript/CSS3 web animation, I decided to experiment with several ways of storing the properties that were being updated on several dozen objects 60 times a second (position, rotation, and scale on the x, y, and z).

Because I was using jQuery in the animation, I decided to first try using jQuery’s .data() utility, which allows you to attach custom data to any jQuery object, by doing something like the following $('.item').data('rotation-x', 30);

Next, I tried creating each animated item as a Javascript object, and storing the values in the object itself, such as item.rotation = {x: 30, y: 45, z: 90}

To more accurately test the performance difference between these two approaches, I used jsPerf, a fantastic Javascript performance-testing website.

The results were pretty staggering. Storing and updating the animated properties through a Javascript Object is literally 100% faster than updating them using jQuery .data(), performing more than 100 million operations/second versus less than 100 thousand.

In fact, the difference is so great that you can’t even visually represent it on a bar chart. And it shows in the actual animation as well. Most experienced Javascript developers probably won’t be surprised by this, but beginners may find this helpful. I, for one, won’t be using .data() anymore when performance is at all critical.

Lately I have been dabbling in web animations created using the WebKit Animation and WebKit Transition CSS properties. For the uninitiated, WebKit is the engine that powers Apple’s Safari web browser and Google’s Chrome browser. The Animation and Transition properties are the WebKit team’s proposed properties for creating rich online animation using only CSS.

More information on using these CSS Properties is available in the Safari Reference Library.

The benefits of animating this way are: no reliance on Flash or other browser plugins, exists in the CSS presentation layer so everything degrades nicely for browsers that don’t know how to handle it, and extremely simple syntax for attaching animations to things like adding a class or hovering an element.

That’s all well and good, of course. But this means nothing if performance is terrible. I have read complaints that WebKit animation is as much of a CPU hog as Flash, so I decided to do some simple experimentation.

(more…)

I am a loyal Apple fan, and have been for almost 15 years. I am also an interactive designer, who occasionally employs Flash to create online content. Lately these two, seemingly separate aspects of my life are beginning to clash, originally sparked by the lack of Flash on the iPhone, later amplified by Apple’s anti-Flash comments regarding the iPad, and now coming to a head with Apple’s recent update to the Terms for it’s App Store, which forbids Apps built using non-approved compilers, such as the iPhone compiler in Adobe’s upcoming Flash CS5.

(more…)

I really love computer-generated art, mostly because I believe that it clearly demonstrates the inherent beauty in mathmatics, and therefore nature and all of the universe.

The Complexification Gallery of Computation is home to a series of small computer programs that you can watch create incredible things before your eyes. If you only view one of these, I think it should be Substrate by J. Tarbell. Oh, oh, it’s magic.

Complexification Gallery of Computation

Me neither! Wow, what a treasure-trove of design nerd information. If you don’t know who Ed Tufte is, shame on you. Seriously, though… His writings on information design, including The Visual Display of Quantitative Information, Beautiful Evidence, and Envisioning Information (my favorite) are some of the most insightful and beautiful books on the subject that I’ve come acrosss.

He has always seemed to me like the type of guy who is really keen on the theory of information design, but not very much in touch with how information design is playing a role in modern technology. How wrong I am. Tufte’s “blog” recently featured a short post critiquing info design in the iPhone, and even features a movie (narrated by his info-ness).

The movie is short but sweet. Tufte emphasizes many of the insightful decisions made by the iPhone design team, and points out some possible areas of improvement. He correctly states that while most of the iPhone screens are pretty to look at (stocks, weather, etc.), they waste a fair amount of space, and lack any means of digging deeper. Right on, Tufte. Great quote: “Clutter and overload are not attributes of information, they are failures of design.”

Ask E.T. (Tufte’s Blog)

Interface Design and the iPhone, by Edward Tufte

Of course, as an avid computer (mac) user and designer, I pre-ordered a copy of Apple’s newest operating system, 10.5 Leopard. There have been very few times in the past when I have first used a new Apple product and wasn’t immediately impressed with the design and usability. My first few minutes with Leopard, however, were filled almost entirely with disgust. So far, I have found a handful of things that will lower my productivity, and very little that will increase it. Some of these things are only small design details, but they add up to a very lackluster experience, and a step backwards in design for Apple.

(more…)

In my off-time there isn’t a type of application I use more than a web browser. Not surprisingly, there are a lot of web browsers out there, most of them free. I’ve used almost all of them enough to know where they stand. What really shocks and frustrates me, though, is how almost every single one of them fails to do at least one thing right. Safari has fantastic book-marking and built-in RSS, but lacks in most other areas. Firefox is fantastically customizable, but isn’t very fast or attractive (on a Mac). I tried Camino for awhile (meh), OmniWeb (great browser, but I’m not paying for it), Flock (too MySpace generation for me), and Opera (again, I won’t pay for something I can get for free).

Enter Shiira, a relatively new browser contender that just recently reached it’s 2.0 release. The Shiira philosophy seems to be, “What if Apple would have taken Safari the extra mile?”

(more…)

For anyone who not only reads this, but also has some interest in what I’m doing with my life: For roughly a month now I’ve been working at the Des Moines, Iowa based design firm On-Purpos. It is truly a great place with great people working there, and they are a relatively young studio with a big future. If you’re interested in what some of the best mid-Iowa design looks like these days, check out the OP web site:

On-Purpos, Inc

For everyone that I’ve been neglecting while I get settled into my new job, I apologize.

I’m a big fan of Donald Norman’s writing on usability. During my bi-annual skimming of his website I came across a few interesting tidbits. First of all, it seems that the Nielsen Norman usability group consults for H & R block, and that Donald Norman was involved in the development of H & R Block’s Tango online tax application. Unfourtunately, I’ve already done my taxes, but the Tango interface seems nice, and is described as being an “entirely new way to do your taxes”. If you haven’t filed yet, and don’t mind dropping seventy bucks to do your taxes, try it out and let me know what you think. How could tax preparation get any worse?

I also found an interview with Mr. Norman on NPR’s Radio Times. Its a free podcast, what’s not to like?

Tango Online Tax Preparation

NPR Interview with Donald Norman

Donald Norman Website

The new version of chrismalven.com has quietly gone live. I may be making small cosmetic or functional changes over the next few weeks, but don’t let that worry you.