Ajaxian

Friday, January 16th, 2009

MooTools Update: Milk, MooBugger, JavaScript techniques, and more

Category: MooTools

<p>There has been a lot of interesting news in the MooTools community recently. Before it passes us by, I wanted to aggregate some of the goodies for your perusal:

MooBugger

Valerio and I spent a few weeks a while back putting together a bookmarklet that would give you a Firebug-style JavaScript console for browsers without Firebug (IE, Safari, etc).

It supports console.log statements in the various formats that Firebug supports (”console.log(’foo: %s, bar: %o’, foo, bar);”) and is really useful for debugging your code in non-Firebug browsers. I like to use it in conjunction with X-RAY to solve layout issues, too.

To use it, all you need to do is drag the link on the bookmarklet page into your bookmarks and then click it on any page to bring up the console (I.E. you have to right click and choose “Add to Favorites”).

You can see it in action on the test page.

5 Advanced Techniques for MooTools Development

The documentation for MooTools is robust and covers nearly everything in the library. There are a few items left out that are either not there on purpose (because they are not guaranteed to be supported in future releases) as well as several standard JavaScript techniques that can empower your development. Here are 5 things that you should know that aren’t obvious.

• Class.toElement and $
• Use Element Storage to Go the Other Direction (The Difference Between Element.set/get and Element.store/retrieve)
• Use Closures to Extend Native Methods
• Measure the Dimensions of a Hidden Element
• Use Element.Properties to Create “Built-in” Instances of Classes

Extending Class Families

A common convention in MooTools is to have numerous classes that break out functionality. This allows you to build upon the functionality of classes through extension and also keep your code base small when you don’t need everything and the kitchen sink. Consequently we get Fx, Fx.Css, Fx.Tween, Fx.Morph, etc.

What happens when you want to extend numerous classes with the same functionality? For instance, I have a popup manager called StickyWin. One of my scripts is called StickyWin.Ajax.js, which adds Ajax functionality to all the popup classes, creating *.Ajax classes (so, for instance, StickyWin.Fx is extended to StickyWin.Fx.Ajax).

Milkbox: Lightbox for MooTools

Features:

• SWF support
• xml gallery definition (quite a unique feature in lightbox clones)
• really improved autoPlay features
• really improved JavaScript direct launch (total control over number of gallery and file to start with; override of any autoPlay option)
• refined global options management ( see changeOptions() and restoreOptions() )
• custom events ( onXmlGalleries and onClosed )

Posted by Dion Almaer at 7:38 am
8 Comments