A unique way to meet people

The days of static UIs that only have jarring transitions between pages are pretty much over. With frameworks like CoreAnimation or jQuery, it's easy to add useful animations to applications and webpages. In the case of jQuery, you can easily animate any CSS property, and you get free work-arounds for browser bugs to boot. You can run multiple animations (of arbitrary duration) at the same time, queue animations and even animate complex properties like colors or clipping rectangles.

But what if you want to go beyond mere CSS? You might have a custom widget that is drawn using <canvas>, whose contents are controlled by internal variables; maybe you're using 3D transformations to scale and position images on a page, and simple 2D tweening just doesn't cut it.

In that case, it would seem you are out of luck: jQuery's .animate() method can only be applied to a collection of DOM elements, and relies heavily on the browser's own semantics for processing CSS values and their units. However thanks to JavaScript's flexibility and jQuery's architecture, we can work around this, and re-use jQuery's excellent animation core for our own nefarious purposes.

Hackity hack hack

First, we need an object to store all the variables we wish to animate. We use an anonymous <div> outside of the main document, so that jQuery's DOM calls still work on it. We simply add our own properties to it:

var vars = $.extend($('<div>')[0], {
  foo: 1,
  bar: 2,

  customAnimate: true,
  updated: true
});


In this case, our properties are foo and bar. We also set customAnimate and updated to identify this object (see below).

Next we need to override jQuery's default step function, which gets called for every step of an animation, and applies new values to an element's CSS properties.

   // jQuery.fx.step._default
    _default: function(fx) {
      fx.elem.style[fx.prop] = fx.now + fx.unit;
    }


We can replace it using the following snippet:

var $_fx_step_default = $.fx.step._default;
$.fx.step._default = function (fx) {
  if (!fx.elem.customAnimate) return $_fx_step_default(fx);
  fx.elem[fx.prop] = fx.now;
  fx.elem.updated = true;
};


With the new step function, jQuery will check for the presence of a customAnimate property on any element it is animating. If present, it will assign the (unit-less) value to element.property rather than element.style.property and mark the element by setting element.updated to true.

Now we're ready to animate, using the normal $.animate syntax:

$(vars).animate({ foo: 5, bar: 10 }, { duration: 1000 });


The values vars.foo and vars.bar will now smoothly change over time. You can use any of jQuery's animation abilities as usual.

Now what about that updated variable? Well to actually use these animated values, you will need some kind of timer or step callback to read them back and draw them on the page. If you're using <canvas>, you need to redraw your entire widget for every change, but you don't want to be wasting CPU time by constantly refreshing it. Furthermore, if you're running multiple animations at the same time, you'll want to aggregate all your property changes into a single redraw per frame. This is easy with the updated property and a simple timer:

setInterval(function () {
  if (!vars.updated) return;
  vars.updated = false;
  
  drawWidget();
}, 30);


Now your widget will only refresh itself when its values are changed by the animation step function we defined earlier, and very few CPU cycles are wasted. As a plus, you can render updates as fast or as slow as you want, without affecting the duration of your animations.

Demo

I whipped up a quick demo which renders a cloud of bacon using <canvas>. All the motion in the demo is created through $.animate(), with a bunch of animations running at once.

This demo will not work in Internet Explorer, and has only been tested in Firefox 3 and Safari 3.

This is a rather esoteric example, but there are plenty of useful ways to apply this technique. I've used it to implement smooth, beautiful, usable widgets. You can combine multiple motion and opacity animations triggered by clicks and hovers without issues.

Final notes

While this technique works great, there is one big caveat. You should avoid animating any property that exists in CSS ('float', 'display', 'opacity', ...) because these have unexpected side effects depending on the browser.

There are also a couple of weaknesses:

• jQuery does not support continued easing. That is, when you override an animation that is already in progress, the variable being animated will instantly stop and restart from its current position. The rate of change is not continuous between the two animations.
• Animating angles is tricky. E.g. when animating from 350˚ to 0˚, you want it to animate across 10˚ and not the long way around. This requires manual correction.

And obviously, it would be cleaner if jQuery's animation core was refactored to separate out the CSS-specific code instead...

Two months ago I got a Nokia N73 hand-me-down from Roland thanks to Nokia's Blogger Relations Program. It's a 'smart phone' with a large 320x240 screen, a 3 megapixel camera and more. Before this, I'd been using an old Nokia 3310 brick (monochrome screen) so this was quite a step up. Still, I wasn't particularly unhappy with my old phone because all I really needed was voice calls and SMS. So I was curious myself to see if I'd actually use all the bells and whistles.

The good news is that making calls and sending text messages has become easier. The default interface has a quick launch bar to access contacts, text messages and other features. Selecting a contact by typing some letters is fast and accurate, and the big screen is easy to read. I also have no problems using predictive text input thanks to years of SMS'ing, while the improved controls (such as the 4-way stick) make entering symbols easier.

Managing my contacts is now a non-issue. I edit my entire address book in Mac OS X and just sync it to the phone, including everyone's pictures. Plus, with Adium address book syncing, this means that it automatically imports IM icons for contacts that don't yet have a picture. However, I did try editing contacts on the phone itself, and it was way too complicated.

Now, the first phone feature I really enjoyed was the built-in camera. Unlike most camera phones, the N73 has a pretty good camera and lens, with auto-focus and all the works. The phone also has a flip cover, so to take a picture, you just slide open the cover on the back and hold it like a real camera (including holding down the snap button half-way for focus). There is even a button to go straight to your pictures.

However, there is a big annoyance here: it takes 5-7 seconds to open the camera application. This is way too long and makes it impossible to snap spontaneous pictures. Also, in spite of all the technical wizardry, pictures in low-light conditions and at night look very bad and washed out. The pictures it takes are also compressed too much. There's a 1GB memory card in mine, so I really wish I could save images to (near-)lossless JPEG.

The second interesting feature was the MP3 player, especially in light of the 1GB of storage which would fit a lot of music. I even found a nice OS X app iTuneMyWalkman that automatically syncs iTunes playlists for me.

However, the phone's music player is simply horrible. The UI makes no use of the N73's buttons: I'd expect to be able to fast forward or backward by holding the stick left/right, and clicking it left/right to go to another song. Instead, you have to press up/down to reach the right on-screen button and then press the stick to push it.

Even more annoying is that leaving the music player stops all playback. If you wish to use the N73 like a real MP3 player, you have to go into a context-menu, scroll down and select "Play in background", then lock the keypad from the main screen every single time. The current behaviour only makes sense if you wish to listen to random audio clips at random moments, which I really don't see myself doing.

To top it all off, there's the fact that you can only use the official Nokia headphones with the N73, because they have a proprietary connector. I already have headphones for my laptop and I don't want to carry another set around.

Next, I've gotten to really like the calendar and the alerts it can provide. However, here I also stick to iCal on OS X and simply sync all my events to the phone. The phone's own calendar input is, again, clunky and cumbersome to use.

After this, I looked at the other capabilities of the phone. A highlight is the included Snakes game, which is in full 3D and features whacky snake action on square and hexagonal grids, even on curved surfaces. I've played it several times while queueing up for various things, and it's fun and easy to pick up. Bonus points for the automatic checkpointing of your progress in the game.

For playing video, the phone uses RealPlayer. Now, I realize this might sound a bit irrational, but I for one don't want anything to do with Real. They have screwed over their users for years on end producing ridiculously crappy players bundled with some of the most insidious spyware and adware seen. But even disregarding that, RealPlayer is a horrible choice as it doesn't play any of the most popular video formats, like DivX or QuickTime. With open-source players like VLC being able to play every format under the sun, there is really no excuse for this.

As for the internet features, I can't try them out because I have no data plan. It's apparently impossible to get an unlimited data plan in Vancouver, unless you get a Hiptop or have connections.

Finally, more small annoyances:

• The Nokia proprietary connector is almost-symmetrical, which means half of the time I'm trying to plug it in the wrong way.
• The default setup and some of the applications (like the photo browser) contain annoying plugs for online services and various lame ideas (like Nokia Lifeblog). Most cannot be removed and just get in the way.
• The phone always complains I unplugged it incorrectly after using the USB data cable. I haven't found any 'right' way to unplug it (and yes, I do unmount/eject the drive in OS X).
• The phone automatically formats the memory card in an obscure directory tree that mixes user-owned content with system libraries and applications. Images and video are saved in nested subdirectories with a weird numerical format that includes a sequence number and date, but not a single separator character. When was 28012007240.jpg taken?
• There is an utterly useless second "Quick launch" button that pops up an elaborate directional menu where you can choose up/left/right to pick a command. Of course, all that window dressing means it's actually terribly slow to use. It's an embarrasingly bad waste of a button and cannot be replaced or disabled.
• The data cable's connector is flaky and will disconnect momentarily if you fiddle with the phone while it's plugged in.
• The default menu setup is bizzare. Some features are located at the top level, some are inside "Tools", some are inside "Applications", some are inside "Downloads!" (yes, with exclamation mark). Luckily you can rearrange this to your liking.
• The keyboard is really small vertically, yet there is a lot of wasted space. Bigger buttons would be nice.

After two months, the only thing I've consistently used other than voice calls and SMS is the camera, because it is really good for a phone. All the pictures on my Flickr page since December 1st were taken with the N73. I also listen to music whenever I can, but the MP3 player and proprietary headphones are too cumbersome.

The only part of the N73 that really stands out for me is the phone's form factor. I love that in spite of all its features, it's only as big as a typical phone. It's clearly designed for snapping pictures with and the screen is large and gorgeous. If the data-cable and file system didn't suck so much, I'd probably use it as a USB stick too (or better, if you could mount Bluetooth storage as local, ejectable drives).

Having used this phone, I can clearly see why traditional cellphone makers should fear Apple's iPhone. I've consistenty avoided using the phone's built-in tools like address book and calendar editing, because doing it on my Mac is orders of magnitude easier and faster. From what I've seen, the iPhone changes that. I really wish the iPhone will bring a fresh wave of usability improvements for mobile devices. But, if usability was all that mattered, we wouldn't be seeing so many Windows installs out there either...

One of the things I worked on for Drupal 5 was to make Drupal smarter about itself. For example, the new status report tells you about security or maintenance problems, and can alert you if you need to run update.php after updating a module. These warnings are also pushed out to the main administration page.

This is a significant improvement in usability, as we try to make site set up and maintenance as painless as possible. The user can focus on the things they care about. If there is something that needs the admin's attention, it is clearly indicated.

The inspiration for this came from OS X. There are some really great examples of this in both Apple and third-party applications. For example, Mail.app automatically figures out if your mail server requires SSL or not: it simply tries both and sees which works when you set up the account. It happens transparently.

NewsFire does something similar. When you click the "Add feed" button, it automatically takes any URL on the clipboard, pings it and fetches the feed title (provided it points to a valid feed). All you need to do is press ok on the pre-filled form. If there is no URL on the clipboard, you get a blank form.

With our new _install and _enable hooks, and _requirements to examine the server environment, Drupal 5 modules have a lot of more opportunities to 'do the right thing' transparently.

We should encourage this practice as much as possible. Modules that require Drupal's configuration to match certain settings should make sure they are set correctly. If the setting is relatively benign and related to the module's purpose, it can be set automatically. Otherwise, it can be a requirement for the module to be installed/enabled.

We do need to walk a fine line between information overload and too much magic. But I think we've managed to do fine so far.

Updated video: now also highlights deep links (though gray, not white), bubbles are prettier and aligned better and video capture is smoother. I also changed the music to please termie.

Out of a whacky conversation on IRC comes the latest treat for Drupal 5.0.

The new administration section is nice, but it's a big adjustment for 4.7 users. It's not immediately obvious where to go to find a certain option. Wouldn't it be handy if you could find any administration page with a couple of keystrokes? Something like Apple Spotlight?

Today's usability special: a nice slice of jQuery with some search module on the side, sprinkled with menu magic and topped off with some sexy CSS. Feast your eyes on this:

Patch is available on drupal.org.