What is morphing?

Bush-Obama morphing

Morphing essentially describes a state change on an element, transforming it into another. Many UI frameworks have helpers for morphing, usually in the form of class animations. jQuery UI has made it transparent to animate jQuery’s class manipulation functions like addClass, script.aculo.us has Effect.morph which essentially does the same.

Why is it useful?

From a higher level UI perspective, morphing really describes that one element becomes another based on the context. It is essentially very powerful because it gives your users a visual cue what is happening, how is happening and why it is happening. Instead of doing an instant change, the users eye can follow the motion and you therefore give them a better feeling of control over the whole situation.

Show me!

Let’s do an example. While working on smart.fm’s new item builder, I had to visualize the following steps: Clicking on a button to add text, then displaying a text input, and hiding the button since you cannot add text twice. Usually, it would roughly look like this:

However, with morphing, it not only looks hot but solves the issue in style:

This was a particularly lazy example, since it doesn’t even truly morph one item into another – it just animates the width of the button and fades in the input on top. But visually, the element clearly transforms.

Morphing in the wild: Inline editing

One technique that was is heavily inspired by morphing is inline editing. Essentially, you click on a paragraph or element, and it transforms into and editable element. Most solutions don’t actually morph, but you get the idea. There are thousands of other usecases out there waiting to be discovered, and if you have some, I’d love it of you share them with me!

The standalone demos

To me, the new demos are truly outstanding. Let’s talk a bit about why. If you download the development package, or browse the trunk, you’ll see a demos/ folder, with sub directories for every individual plugin. If you open one of these sub-directories, you’ll see a index.html, a default.html and named individual demos, i.e. containment.html. Each of these demos:

1. Is a standalone demo
2. Includes all the files it needs (JavaScript / Theming )
3. Displays a description of the current demo at the bottom

This means that those demos are excellent for learning how to do something – they come completely uncluttered, so you can copy and paste JavaScript and markup easily. Additionally, the default.html shows you the most simple state of the plugin (usually without any provided options), and the index.html provides a easy named listing to all these sub demos. Even better, if you open demos/index.html, you’ll see a page that looks very similar to the website demos section, but works like this:

1. If you click on a plugin in the left hand navigation, i.e. ‘draggable’,
2. it fetches the content of demos/draggable/index.html using Ajax and displays it as right hand sub navigation
3. if you click on one of those links, the created iframe in the middle updates itself

The website demos

For the website demos, it got a bit more sophisticated. We removed the beautiful but unusable demo carousel, and created a unified demo section that automatically pulls the standalone demo files from the repository, therefore it’s never out of sync. However, the simple iframe approach couldn’t be used because of the incredible amount of server requests made that way. Here’s the technique behind it:

1. include the theme and jQuery UI once
2. include demos/index.html using PHP, filter out any script/style tags and the header
3. now using JavaScript, rewrite all links to plugins to point to /demos/plugin

This shows you the index file. Perfect. What happens if you click on a link in the left hand navigation now?

1. A server-side rewrite rule resolves demos/draggable to demos/?load=draggable
2. in PHP:
   1. we export the ‘load’ information to Smarty, so we can access it in the template
   2. we then retrieve default.html and display it in a div frame, but filter out any script/style tags and header
   3. and we do the same for draggable/index.html, to show the right hand sub navigation
3. in JavaScript:
   1. we loop through all demo links in the right hand nav and define click events,so the link isn’t triggered, but instead, a hash is set (for easy bookmarking) and
   2. the selected file is pulled in via ajax – again, we filter out any script/style tags with src attributes, and the header/footer, and update the frame div
   3. at last, we pull out the description at bottom of every file, and display it below the ‘frame’

So, with a little more work involved, we not only made the demos extremely responsive and fast, but also reduced the requests to the server dramatically. Every time you click on a demo, only one single request is made, to fetch the actual html page.

Pretty cool eh? Enjoy!

So I was looking at all the nice things the WebKit folks did, and one particular feature really got his way into my thoughts, and I was playing with possible usecases for weeks.. I’m talking about the CSS transforms.

This handy nifty new css feature allows you to do all kinds of 2d transformations on any element on the page, by utilizing custom CSS tags. This means you can rotate and translate DOM elements, but you can also use a generic matrix function to do whatever you want.

So here is where it get’s interesting. The fun thing about CSS Transforms is that they work today, in Safari 3.1, and on the iPhone, not only in one of the nightly builds, so it’s possible to target real-world users.

So now that I had all this power, I didn’t know what to do with it, until I remembered that I always wanted to do a cool iTunes like coverflow effect, already seen countless times in flash. Also helping me to remember was an Ajaxian post about the dojo.workers a couple of days ago, which features the same coverflow effect, done by Peter Higgins.

While this dojo.workers example is absolutely fantastic work and looks brilliant however, it doesn’t feel quite like the effect: You can’t scroll at once through many items, there’s no real animation (the images are already prerendered).

The result

So after a couple hours of work, I was able to create a coverflow effect that actually flows and animates in real-time, without using canvas or prerendered graphics.

While impossible to do a real perspective transformation using WebKit right now (that would require a 3d affine matrix), I’m using the matrix and scale css functions to create a somewhat similar experience, along with some viewport and zIndex logic.

To make a nice demonstration, it uses jQuery UI to create a actual coverflow widget, and jQuery UI’s slider to be able to slide through. You can also navigate through the items by clicking on them or using the left/right keys on your keyboard.

For those of you who would like to know how I was able to create the real experience: The refresh() function that updates the viewport does unlike other examples (i.e. frash coverflow scripts) not only handle single animations, but is capable of doing true half-state renderings. Right now, this is not shown too much in the demo, but it would be actually possible to change the next/prev keyboard behaviour to not move from one item to the other, but render each single half-state inbetween.

Finally, for those of you wondering if this will become a real plugin: Indeed, it’s already commited in the 1.7 branch of jQuery UI, and along with other Webkit specific plugins, come to UI in the near future. I’ll keep you updated!

The first conference is a great international hacker conference featuring both Perl and JavaScript sessions – its name is YAPC Asia, you can find their website here: http://conferences.yapcasia.org/ya2008/

Due to the popular demand, registration was already closed a couple of weeks ago, but they opened again to sell a couple of more tickets. So if you’re planning to attend, definitely register fast!

The second conference is a exclusive one-day event named JUI 2008 Tokyo, a day completely dedicated to JavaScript User Interface sessions. It will happen immediately after YAPC (after the weekend), on Monday, May 19th.

That one is most interesting – a couple of weeks ago, I wrote an email to Yusuke Kawasaki to find out about japanese conferences, because I wanted to get active in Japan. He was extremely kind and helpful, and immediately answered with a bunch of options, the most immediate was the YAPC Asia. Unfortunately, the call of papers was closed long ago, so he came up with the idea of a exclusive one day event, with the focus on jQuery UI (!).

Now that’s what we got – a great one-day event, featuring great japanese speakers and jQuery UI content all over, sponsored by Yusuke Kawasaki’s company RECRUIT. The details are still worked out, but we’ll soon post a timetable and more information (A facebook event page can be found here).

If you ever wanted to visit Tokyo, this would be a great time and chance to combine a holiday trip with a great business trip. Be sure to leave a a comment if you think about it!

Most conferences hosted in Japan are japanese only, with only a few english speakers and no english website/marketing, and although you will see great code if you attend, you might easily become frustrated because you don’t understand the details. However, there seems to be a small revolution or evolution going on – YAPC Asia is getting very popular, and it’s completely international – all session slides are translated from japanese to english and vice versa. They even have english-speaking staff!

I always had the feeling that from a knowledge perspective, Japan is a pot full of gold – but only if you learn japanese, you’ll receive the golden key to open it. Now there might soon be an easier way