They say imitation is the most sincere form of flattery, and I agree. I had the pleasure of running an experiment writing an identical widget in Dojo, jQuery, and Prototype, and naturally ended up at the script.aculo.us website. Its one of those elegantly simple involving websites, where even if you don't care about JavaScript you feel compelled to see what it's about, or at least drag some thing around ... Great example, simple, clean ... So I copied it (but not without permission), and made it into a Dojo demo.

Have you ever noticed how things are just that much cleaner in Safari?

I have other motivations for writing this "parody" website, too. That's what the blog is for:

The current stable version of the Dojo Toolkit is 1.0.2 ... A beta version of 1.1 should be available Q1 2008 (march, maybe?) but I couldn't hold back: I want to demo what's coming ...

Announcing Robert Penner easing

A small change in the Animation system to accommodate the inclusion of the entire set of Robert Penner's Flash easing functions to The Dojo Toolkit. They were contributed under CLA to the Dojo Foundation, and ported to JavaScript (dojox.fx.easing) by Bryan Forbes, a Dojo committer, and maff mastermind.

He had released them BSD some time ago, officially. This CLA only insures a clear traceable licensing path: written permission from the author. Its a huge win for JavaScript, and the toolkits using or wanting to use those functions (Dojo now included). A big personal Thank You is in order, from all the OpenWeb.

The dojo._Animation change is transparent, though these functions will not work with the Dojo 1.0.x branch, basically because numbers were being clipped beyond "100%" of the Line (like in the elastic easing functions, the "snap back" after overshooting the target).

The moj.oe demo started out as a simple preview of this _Animation change, and the fun easing functions. The gravity button uses the bounce transition to drop the circles to the ground (and bounce), the snap-back when you drag the circles (or logo) uses the elastic easing function, and the "Live Download" dialog uses the backIn easing method when you click "hide", for that "little boost immediately before leaving" ...

Other Notes of Interest

The term "dojo.moj.oe" came from an idea, like coffee, a "daily serving of dojo.moj.oe", mini blogs ripping apart (for example) this demo, and writting short tutorials on each of the parts. I will/should be writing some short tutorials about how it was done shortly.

I amazed myself just now: I hadn't actually looked at the size of the demo "on the wire". 38k, because apparently dojotoolkit.org has gzip enabled. the Core dojo.js + erroneously rolling an unused dojo.parser totals 27k. My custom layer file including mojo._base, mojo.download, mojo.roller, and mojo.drop, and all the modules needed (dojo.io.iframe, dojo.fx, dojox.fx.easing, dojo.dnd.Moveable, and dijit._base.place because I wanted a single function: dijit.getViewport()): 8k after gzip (24k after shrinksafe) ...

The demo functionality is namespaced mojo, and consists of a few parts:

• mojo._base - startup animations and base setup stuff (drag and drop)
• mojo.download - all functionality for the download bubble and form
• mojo.drop - the gravity logic and controls
• mojo.roller - the UL text-roller logic

... which all gets loaded into my layer file, and gets compressed with ShrinkSafe.

I was trying to be completely unobtrusive. The page shouldn't "break" without JS on, as all of the links to things are natural, though the Live Download buttons will not work. There is a good chance the demo would validate W3C as well (which is a common criticism of the Dojo, but is actually more directed a Dijit).

The neat thing is, after viewing this demo dojo.js is cached, and whatever layer for whichever demo you are viewing is only a small piece of code appended. And with dojo.require() and the preventative measures built in during the build, you won't break anything by accidentally dojo.require()'ing something that is already loaded, or if the same resources happens to appear in two layers.

The demo should be almost completely identical in FF2, Safari 3, Opera 9, and IE7 ... it was verified to work in IE6 at some point, though I have not personally tested there. Very few cross-browsers checks are being made, in fact, perhaps only to replace shot3.png with shot3.gif to remove any alpha images for the IE's.

quirks: IE7 doesn't fire onchange until onblur it seems, but only occasionally? This makes the gravity logic slightly terse. A simple dojo.isIE check and an additional dojo.connect() call would remedy that, but I didn't discover it until after I'd done my build. (perhaps a good dose of moj.oe to writeup how easy it would be to re-roll my build and update the site?)

FF2 suffers a thing I thought I'd only seen in IE6, where fading an element affects the opacity of an unrelated element should the elements have transparent backgrounds. FF2 also doesn't respect advanced delay: params in animations when being combined by dojo.fx.combine(). Safari, and surprisingly IE7 behave as expected. Very strange.

Minus the _Animation change / easing functions, this demo would work the same w/ Dojo 1.0.2

Demo Dojo Animations:

There are thirty-one dojox.fx.easing functions in all now, and one default in base dojo.js including them is as easy as:

// slide a node to top: 100px, left:100px; elastically. 
dojo.require("dojox.fx.easing");
dojo.addOnLoad(function(){
	dojo.animateProperty({
		node: "floater",
		easing: dojox.fx.easing.elasticOut,
		properties: {
			top: { end: 100 },
			left: { end: 100 }
		}
	}).play();
});

and to be fair, if you are doing a lot of animations you'll probably want the core FX library too (though base's animateProperty can do most anything) for added convenience:

dojo.require("dojo.fx");
dojo.require("dojox.fx.easing");
dojo.addOnLoad(function(){
	dojo.fx.slideTo({
		node: "floater",
		easing: dojox.fx.easing.elasticOut,
		top: 100, left: 100 
	}).play();
});

both are functionally identical. dojo.fx adds approximately 2k of .js, which is nominal after being compressed and built.

dojo has NodeList-fx, too, which wrap the animation functions around dojo.NodeList. if you are familiar with jQuery you'll recognize this [though there are significant differences in dojo.fx and jQuery FX -- like .slideTo here returns an _Animation instead of the jQuery object you are expecting to continue chaining] snippet:

dojo.require("dojox.fx.easing"); 
dojo.require("dojo.NodeList-fx");
dojo.addOnLoad(function(){
	var $ = dojo.query;
	$("#floater")
		.addClass("foo")
		.slideTo({
			top: 100, left:100,
			easing: dojox.fx.easing.elasticOut
		}).play(); // no more chaining for you, dojo
});

there are also a number of experimental animations in the dojox.fx project, too: CSS animations, scrolling animations, Shadows (very experimental), and more. There is a test page setup, which partially previews the functions, as not all were used in the moj.oe demo.

Also being demo'd

I'm triggering a file download based on some form settings, using an iframe to prevent the navigation from leaving the current document. Its not the most viable solution, but it works. IE7 doesn't like me triggering a _second_ download while the first is running, and throws a popup warning about files trying to be downloaded onto your computer. Which they are.

For what it's worth: This demo was done with the permission of Thomas Fuchs, author of the Script.aculo.us library. Other than visual inspiration, and hue-shifted images, the dojo.moj.oe demo is 100% original code. No script or Dom was inspected (okay, css fonts and margins not withstanding) in the making of this demo, and any parallels other than those mentioned are merely coincidental.

And my thanks goes to Thomas for making this little demo a possibility, and being a good humoured human being.

New in Dojo 1.1

While I'm talking about new stuff coming up in 1.1 (with a projected beta at or around Feb 15th, 2008), I wanted to mention another great piece of code contributed under CLA: highlight.js, namespaced dojox.highlight ... It is a standalone package that works with any version of Dojo > 0.9, and provides client-side syntax highlighting of <code> blocks in a number of different programming languages.

The full list of supported languages and sample highlighting can be seen at highlight test page in the nightly archives.

Many many thanks to Ivan Sagalaev for contributing the code, which I in turned ported to use the dojo package system, and shrunk slightly. (The original code is BSD released, and carries no toolkit dependencies, so unless you already have dojo.js on a page, you may be better off with his version, unless you want all the other great things included in dojo.js, too). +1 Open Source, and yet another tool in the kit whose usage is optional, but ready to use should you need it.

The goal was to be able to replace GeSHi php highlighter in drupal. Turns out it acts as a very robust dynamic code highlighter, too: dojox.highlight.init(someCodeNode) applies all the highlighting to someCodeNode, or you can do the dojo.query method: dojo.query("pre > code").forEach(dojox.highlight.init); to highlight all code nodes in a page (or portion of a page). I find myself highlighting code snippets fairly often now.

Other new things included in 1.1 not present in 1.0: Wizard, new dojox.data stores, the ScrollPane, more NodeList animations, new Image widgets including a Magnifier and an updated Lightbox, and a plethora of fixed bugs, and serious style improvements to dijit/tundra. 1.1 is looking to be a strong follow up to 1.0, with no API changes coming any time soon. (we're in the deprecation cycle rules now).