Friday, January 16th, 2009

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

Category: MooTools

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:


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.

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


  • 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

4.2 rating from 33 votes


Comments feed TrackBack URI


Comment by Aimos — January 16, 2009

Valuable comment dzr, thanks.

Good to see MooTools get some Ajaxian love.

Comment by davidwalsh83 — January 16, 2009

@davidwalsh83: there’s no room for a playful comment on a Friday afternoon?

Comment by dzr — January 16, 2009

@dzr: Said in jest.

Comment by davidwalsh83 — January 16, 2009

Twisted? The name means cow f**k!

Or is it another deliberately “humourous” name choice?

Comment by ExtAnimal — January 17, 2009

Note: it was named by an italian. It’s not like everyone knows every esoteric usage of their non-native tongue.

Comment by anewton — January 17, 2009

I be buggered if I use this…

Comment by christoff — January 19, 2009

To be fair it doesn’t take much to find it and seems to be the concensus regarding the significance of the word :)

define:bugger in google brings up… well… this :

Comment by Joeboneuk — January 28, 2009

Leave a comment

You must be logged in to post a comment.