The d’bug blog has a nice little post on javascript shorthand that’s worth looking at if you don’t know these tricks. Stuff like declaring variable defaults with the logical OR or using ternary , etc. One thing to be careful of is type coercion. Basically if you say “if (x) …” you can get a false evaluation if x is an empty string, null, zero, or false. Check out the mootools functions $chk, $pick, and $defined for easy ways to avoid these kinds of things. You can also express conditionals using === and !== to ensure you are evaluating for the right condition.

/*

    -----------------------------------------------
    Conditional Shorthand 1
    -----------------------------------------------

    If "a" is not defined, or is not equal to true,
    then "a" is equal to "b".

    Longhand:

        var a, b;
        if ( !a ) {
            a = b;
        }

    Shorthand:

*/

var a, b;
a = a || b;

/*

    -----------------------------------------------
    Conditional Shorthand 2
    -----------------------------------------------

    If some condition is equal to true,
    then "a" is equal to "b", or else
    "a" is equal to "c".

    Longhand:

        var a, b, c;
        if ( true ) {
            a = b;
        } else {
            a = c;
        }

    Shorthand:

*/

var a, b, c;
a = ( true ) ? b : c;

Check out the whole article »

Mootools contributor Digitarald (i.e. Harald Krischner) posted a while back about Mootools selector goodness that’s been added. CSS3 selectors arrive and it’s all nice stuff.

The $$() function in MooTools uses CSS selectors to select Elements from the DOM. Since last week, basic CSS2 was supported, but now the developers added more selector features. Check out the slick speed test and the blog entry about the tale of pseudoselectors describing the details and the development. I’ll describe some basic about the selectors here …

That was already possible

// Select all anchors
$$('a');

// Select all anchors inside list items
$$('li a');

// Select all anchors with class "ajaxified" inside an element with "menu" id
$$('#menu a.ajaxified');

// Select all anchors and images with the "title" attribute
$$('a[title], img[title]');

// Select all anchors with the "href" attribute, beginning with "http://" and with "ajaxified" class
$$('a.ajaxified[href^="http://"]');

$$ returns an Array of Elements, extended with Elements methods, so you can do this:

// Adding an ajax request to all ajaxified menu anchors
var menuAjax = new Ajax('', { // url is empty, we set it dynamically
	autoCancel: true, // when a new request starts and the previous one is running, its cancelled
	update: $('content'), // the target
	evalScripts: true // maybe we have script tags in the content
})

$$('#menu a.ajaxified').addEvent('click', function(e) {
	menuAjax.url = this.getProperty('href');
	menuAjax.request();
	return false; // see NOTE
})

This simple example adds ajax loading to menu items using the href url. Now you can add e.g. effects when the content is injected, a spinner when the request starts, selected items and more fancy stuff.

NOTE: This event handling is new in the svn trunk. You no longer need to use new Event(e), bindWithEvent or bindAsEventListener when you use Element::addEvent. The given event is automatically the extended cross-browser Event class and of course this (the scope in your event callback) is the Element. Furthermore you can return false to stop the event propagation.
When you want to use this example with MooTools 1.11, simply stop the event with new Event(e).stop().

And what is new?

The new CSS3 selectors are not ALL available like shown in w3c-specs, we added the useful ones. Of course the whole thing is super fast, uses XPath internally for cool browsers and is, like most things in MooTools, extendable.

// All list items which are childnodes of ul#top
$$('ul#top > li');

// all list items following li.head with the same parent node
$$('li.head ~ li');

// all anchors containing the word "Hello"
$$('a:contains("Hello")');

// The selector implementation and parsing allows also short-hand notations ...

// first list item in an ul element
$$('ul li:first');
// same as
$$('ul li:nth-child(1)');
// same as
$$('ul li:first-child');

// every second li inside an ul, starting from the second
$$('ul li:nth-child(2n)');
// same as
$$('ul li:nth-child(even)');
// same as
$$('ul li:even');

// simple and fast zebra table in one line
$$('table > tr:odd').addClass('odd');

Read more on The MooTools Blog – Selectors on Fire

Here’s a step-by-step and line-by-line example of how to write a Mootools Class. I wrote this example for a javascript class I taught here at CNET for our developers and figured I’d share with everyone else.

So in the last week or so I’ve been working on a bunch of CMS related tasks. I’ve added some new stuff and, for the first time, 3rd party scripts are now in our repository. Why? Well, why re-invent the wheel, right? In some cases I’ve implemented a few changes in these libraries, while in others I’ve rewritten them a LOT. You’ll find working examples and details in the wikitorials and I’ll be updating our docs shortly. Read the rest of this entry »

Bas Wenneker has a nice little article over at solutoire.com on sorting javascript arrays. The docs over at Mozilla on Array.sort demonstrate the same stuff, but Bas’s article is a quick read that’s worth it if you ever see yourself working with data this way.

objectArray.sort(callbackFunc);

/**
 * After sorting the objectArray will be like this:
 * [
 * 	{firstname: 'Will', 	lastname: 'Brown',	age: 28},
 * 	{firstname: 'John', 	lastname: 'Doe',	age: 25},
 * 	{firstname: 'Marie', 	lastname: 'Doe',	age: 28},
 * 	{firstname: 'Sarah', 	lastname: 'Doe',	age: 25},
 * 	{firstname: 'James', 	lastname: 'White',	age: 28},
 * 	{firstname: 'George', 	lastname: 'Williams',	age: 25}
 * ]
 */