Chris Vanrensburg: “In a similar vein to a recent experiment with animating position, I wanted to see how curves could be applied to animating size changes for an object. To be expected, applying different interpolation curves for the width and height CSS style properties produces some fun effects (to be seen towards the bottom of the list of presets).”

The Web 2.0 crowd love their rounded corners. How about animating them! This is where Chris takes his latest experiment. Click around in the demo area and watch the smooth effects.

There have been a few interesting posts recently. Trotter Cashion kicks things into gear as he declares his love and then goes on to show how you can unit test Raphael with some mocks.

Then we learn how easy it is to write a "plugin" a la jQuery, such as adding an arrow abstraction:

And finally, play with a great example usage thanks to Thomas Fuchs.

The Ample SDK, a unique GUI toolkit working to create a cross-browser abstraction backed by open standards, has gone open source! With the new 0.8.9 release the GUI framework is now an open-source project licensed under GPL/MIT and hosted on GitHub.

More about the Ample SDK:

The Ample SDK makes it easy to create interactive vector graphics in the browser, including on Internet Explorer, and create powerful web forms and GUIs. Even better, it supports all of this with a standard API that is the same across all browsers. You don't even need to learn anything new; the API itself is simply web standards such as SVG, XUL, DOM, the Selectors API etc.

Make sure to check out the Application Development Guide and Extension Development Guide tutorials which feature multiple aspects of client-side development. There is also a detailed reference API accompanying.

Sergey Ilinsky, one of the leaders of the project, reports that there is still a long way to 1.0, including polishing XUL components and implementing new visual themes and charts, but that he is targeting to have a 1.0 by the end of the year. Keep up the great work Sergey!

The aim of the technique is to provide an ExtJS plug-in that can capture dragged and dropped data from external sources, such as a spreadsheet, in order to easily import data inside a generic Ext.grid.GridPanel.

The textarea (my masking element) that is positioned over the grid receives mouseover, mousemove, mousedown , mouseup and other events.

The top masking layer is hidden for a moment, so we can figure out what element is below the mask at the event location.

The event is re-fired - this is where the W3 DOM Event model and the simpler Microsoft equivalent come into play.

Start the process again - ready for the next event.

The method used to understand which element is supposed to be the event target is document.elementFromPoint, also compatible with IE, Mozilla, WebKit, and Opera.

The technique does not necessarily need the ExtJS library but this demo shows a live Ext Grid example.

Michael Baldwin did more, and here he tells us more:

We wanted to allow users to upload their iTunes library files, so that we could extract artist names (to let users sign up for new album and concert notifications). The problem was that these .xml library files can easily run up to 20MB in size.

Which means 1) long, boring downloads without feedback that it's really working, 2) huge space requirements on our servers to support lots of concurrent uploads, and 3) big memory requirements to process the XML files.

What we did instead was to write a bare-bones custom web server just for this task in PHP (yes, PHP) which analyzes the file as it streams in (storing nothing on disk, and using negligible memory), gradually puts artist statistics into shared memory, and then responds to new AJAX requests every ten seconds which retrieve and remove the artist statistics from shared memory.

The end result for users: as users upload their library file over the course of several minutes, they get to watch their web page fill up with their list of artists at the same time, sorted and even animated. If the connection breaks, they can even choose to continue with just the artists that made it.

The end result for us: we can deal with gigabytes of uploads while using trivial computing resources -- just a couple KB of incoming buffer space and a couple KB of outgoing buffer space.

You can check it out yourself, where it will look a bit like this (but constantly updating!)

SimpleGesture is a GWT (and IT Mill Toolkit) implementation of the mouse gesture recognition method described by Didier Brun at bytearray.org (as I understand it). It allows you to register easy to understand (human readable) gestures, and receive events when these occur. Additionally, SimpleGesture can record new gestures, so that you don't have to write them by hand.

In this video demo, he's using a Wii to show it off (this confused me at first, but he's using the Wii as a mouse and isn't doing anything with the Wii-specific inputs):

You can also play with a live demo.

SimpleGesture relies on a bit of Flash to do its thing:

I have used the bytearray mouse gesture library for a Flash project before, and I love how simple the method is, and yet it works very well.
The method works by assigning a number depending on which direction the mouse moves in (moving right will produce "0", moving down will produce "2", and so on), and comparing the resulting string of numbers to the registered gestures. The gesture with the lowest Levenshtein distance (and below a set threshold), is considered a match.

and transforms it into this:

It's a complete re-write of the old plug-in and works on Firefox, IE, and Safari. Here's the feature list:

* No dependencies
* Optional use of easing plugin (still some work needed)
* Close and open content one after the other
* Close and open at the same time
* Choose trigger (mouseover, click ...)
* Easily control through external calls
* Open content on load
* Open content through hash tags in the url (#tab1, #tab2...)
* Position of handle (left, right)
* Mixed handle positions - 2 left , 2 right ...
* Cycle through content by interval
* Events when animations starts and ends
* Hide content until all has been assembled

Check out the demos.

Joining the world's collection of Growl-related libraries is Notimoo, a beautiful Growl implementation for MooTools. It's a little more sophisticated than most of the Growl ports as it supports persistence messages (that require a user's click to clear and scroll into view) and allows you to configure where on the screen the messages appear:

The Notimoo project is hosted on Google Code under an MIT license.

Christian Effenberger wrote in with another impressive piece of work:

Gauge.js 1.0 allows you to add programmable gauges (with shading and reflection) to your webpages.
It uses unobtrusive javascript to keep your code clean.

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, IE6+ and Safari.
On older browsers, it'll degrade and your visitors won't notice a thing.

Add to Firebug? ;-)

Riccardo Degni has created GX, his latest animation framework. He actually created moo.rd in the past, and this time he is playing on top of jQuery:

I’ve developed GX keeping in mind mainly two Design Patterns:

• the “Write Less, Do More” Pattern picked from the jQuery Library. With GX you’ll always write as less code as possible to get the best results.
• the DRY (Don’t Repeat Yourself) Pattern. If a GX’s functionality is needed more than once, it will be internally reused with no duplicate.

GX respects the Strict Standards and doesn’t generate CSS/Javscript warnings. Moreover it prevents possible Memory Leaks because it will always use the same instance for a determinate element (say goodbye to “flickering”) to avoid either memory leaks and flickering issues. This technique allows you to always keep track of your animation’s state.

Although GX is completely cross-browser, it doesn’t contain any Browser sniffing: it’s 100% pure Javascript engine.

Example

Guillermo Rauch, who has a really nice looking site at devthought has created APNG a class to bootstrap animating PNG images:

APNG provides simple frame-based animation functionality. It’s main goal is solve the problem of animating alpha-transparent images (PNG format).
Features

APNG is very flexible when it comes to the method of displaying the various animation frames.

The default behavior is taking the filename, for example spinner.png, and changing the src or background-image attribute to spinner-2.png, spinner-3.png and so on.

If the useNative functionality is in place, which is set to be on for Firefox 3 and Opera 9.5, the Javascript-based animation is not run. I encourage you to create an actual APNG for the default frame (spinner.png). If you do so, you’ll see increased performance for the browsers that support it -while also promoting the adoption of this new format-, and other browsers will just display the first frame and the animation will run via JavaScript.

You can also use background-position based animations to avoid making multiple requests, and avoid potential cache issues in old browsers.

The APNG class supports dynamic pausing, canceling, resetting and starting of animations. Frames can have a fixed interval or one can be assigned for each of them. Preloading is supported, which can prove useful for long animations or animations that are initialized and not run from the start.

Check out the demo page and see how to use it:

I am referring to the 390 screencasts that Bill Scott has published showing "captures of various sites illustrating patterns from each chapter."

Doug Bowmanepines about the job of doing just this, which is something he kicked off at Google, and we see the result in apps such as Sites and recently Gmail:

Doug does a really nice job at explaining the history of this work, and then detailing the issues at hand and various iterations of the work where he had some a-ha moments such as:

My 3.0 attempt relied on treating the buttons and everything inside them as inline elements. The top/bottom borders still needed to be rendered separately from the left/right borders to get 1px-notched corners. The left/right borders were rendered on the outer element. The top/bottom borders were rendered on the inner element. Because borders don’t compound and add to the width or height of an inline element, we get the 1px notches in each corner. I ran into a lot of frustration with this inline approach until I remembered display: inline-block. That seemed to solve everything at once.

And how he got rid of the gradient image and instead uses CSS:

A really nice read. It works pretty well for me. The only real issue that I saw was that the drop down in Gmail for "More Actions" can be greyed out when you don't have something selected. The type is subtle so at first I wondered why hover/click weren't doing anything.

Oh, hey, would be nice to open source this kind of stuff good Google UX guys ;)

Bill Scott presented Designing Web Interfaces, a slideshow based on core items from his book (co-authored by Theresa Neil).

There are some really interesting posts on the site, such as 30 Essential Controls. Theresa has been pinging the major frameworks and will be posting a matrix of coverage by the various frameworks. But more generally it is a nice checklist of controls that can liven up an interface.

Yensdesign has a nice little example of a music player UI that uses mouse gestures and key handling to give a clean experience.

Songza did a great job here, and I still use it to find songs for the kids.

To build the thing itself you use Deep Zoom Composer and then you choose whether you want the Silverlight version or this Ajax one.

The embed viewer is easy to use too.

John Resig linked to an interesting new time picker UI that Maxime Haineault implemented as a jQuery plugin:

He made a "two click" time picker. The first click is within the time field. This activates the display and allows the user to choose the time - all of which is done by moving the mouse over the times that you desire. The final click is anywhere - filling in the time that was chosen. It's hard to explain, you simply have to try it.

One thing that you'll notice using it is that it's fast. Very fast. I'd argue much faster than clicking into the input area, moving to the keyboard for entering the time, typing the time, then moving back to mouse.

I would be remiss not to mention John's other post of the day, where he goes into detail on CSS Animations and CSS Animations.

The video above by Ron Brinkmann is his mockup of a non-euclidean browser UI which looks a touch like the magnifying glass tool on the iPhone, and aims to give you your data in a readable way, while still showing the larger context:

The reason why I think an interface like this can be superior in many ways is that it allows you to specify an area of interest where you get full, detailed information yet you can still see the full document/page/object at the same time. Which means that one is able to avoid the zoom(in/out)-scroll-zoom(in/out)-scroll paradigm that you often get stuck in when using, for example, the iphone. In many ways it gives the user an analogue to the way peripheral vision works in the ‘real world’. You have an area of interest that you can focus on but then you’re also aware of the surroundings and glean information from that as well.

(The mockup I did above just shows a single point-of-interest but it’s certainly expandable to multiple points if you’ve got a touchscreen or other such device. And there’s all sort of little refinements you’d want to implement if you really wanted to make it swank - drag&drop from one place to another might want to keep the source area zoomed but also follow the dragged object with a zoom-region until you get to the appropriate destination. This all gets even sexier once eye-tracking becomes more available - the area you’re looking at would bubble up to full resolution but you’d still be able to quickly scan the entire page and re-target the area of interest. Somebody get busy on this, okay?)

In his post, Ron then shows other subtle examples, such as mapping this to peripheral vision.

Dojo has some nice new compound effects in the works. Some of the new effects include block fades, disintergrate, explode, shear, and pinwheel.

Each effect can be tweaked with config such as:

• The number of rows and columns in which to split the element
• The distance the pieces travel (as a multiple of the element's respective dimensions)
• Whether or not to fade the pieces in/out
• How much the effect should be randomized (a percentage)
• Whether or not the pieces should appear outside the element's boundaries

You will also see effects that work on the text within divs, as well as pieces of the div itself.

Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers (<h1>, <h2>, etc.) to <span> elements and everything in between!

sIFR takes over the elements and puts small swf files into place. FLIR on the other hand generates images on the server and puts them in place. They both suffer from the progressive switch in place that you often see as you watch the page load.

Also, one downside is that once the text is an image you can't copy and paste it. Ben can once again drool over the typography.