The anonymous function wrapper

Closures in JavaScript allow us to keep the global scope tidy – we can create one by declaring an anonymous function in the global scope, and then immediately calling that function, like so:

(function() {
// variables and functions declared here are not visible in global scope

})();

The syntax is strange but if you break it down it makes sense: we place brackets around the function declaration so that it’s clear to JavaScript that we are then operating on the function as if it’s a variable.

It might help to remember that in JavaScript, we can also declare a function like this:

var myFunc = function() { // function body
};

// now we can call the function like normal:
myFunc();

So, all the brackets around the function declaration do is take out the unnecessary step of assigning to an intermediate variable. Then, we immediately call the function with (), just like we did above with myFunc – calling the function ensures that the code is actually executed, which is rather important if we actually want to achieve anything inside the wrapper!

The beauty of these anonymous function wrappers is that once you memorize the syntax, you don’t really have to think too hard about the mechanics of them.

The jQuery version

jQuery works hard to avoid polluting the global variable space by design. Out of the box, it only contains 2 global variables: the jQuery object itself, and its alias shorthand $. Building on the standard anonymous function wrapper, we can use the version illustrated below which has the additional benefit of ensuring that any use of $ inside the wrapper will be a call to the jQuery object and not to $ in another library such as Prototype or MooTools, if those happen to be used on the same page.

(function($) {
// code in here can safely use $, knowing it will reference jQuery

})(jQuery);

Here, the $ shorthand is a named parameter in our anonymous function, whose value becomes the jQuery object in our immediate call – (jQuery). Importantly, the value of $ outside the function is retained - this works because with with JavaScript closures, function parameter variables are also local in scope to the code in that closure, and any values with the same name outside that closure are not affected.

There is one gotcha: if you are using jQuery with Prototype or MooTools, it’s easiest to include jQuery before the other library, so that it doesn’t override the value of $ outside the anonymous function. If for whatever reason you must include jQuery after Prototype or MooTools, you can call jQuery.noConflict() before you call the $ shortcut in the other library – more information on this is available in the jQuery documentation here.

Once again though, the beauty of the jQuery wrapper code is that once you memorize it, the mechanics of how and why it works don’t really need to be fresh in your mind. But it still doesn’t hurt to know the how and why.

So, you know how in the CSS box model padding is NOT regarded as part of the width of the box, and you always have to rack your brain to subtract out the padding from the marquee you’ve measured in your graphics app? Well, not any more!

The Math bundle, among other things, lets you evaluate arithmetic expressions in your text documents. So let’s say I’ve got a div (#column_1) that has horizontal padding of 26 pixels, but a total width of 228 pixels as in the image below:

All those CSS experts out there know that I really need the width set to 228 – 26*2 pixels to take the padding into account, so let’s type that out:

Now, before I grab that sheet of paper and/or caffeine to do the sums, I just highlight the expression, press Shift-Ctrl-C and I get this:

Now I hit 2 to replace the expression (since my browser surely won’t understand my advanced mathematics), and voila! Instant box-model love:

Like I said, you gotta love TextMate! Makes me wonder why I even bothered studying maths up to a university level…

I’m not so mad on the available skins however – in particular, the Aqua theme takes on the look and feel of the first few releases of Mac OS X when those white and grey background stripes were not-so-subtle and not-so-attractive. No, I wanted a skin that was a little more up-to-date for a project I’ve been working on, so after a few hours in the lab here is the Minium skin (also based on a theme name I’m using for said project).

Yep, it’s heavily inspired by Mac OS X, and in particular, Apple’s “pro” look and feel, which probably stuck in my head when I checked out Numbers the day it was released Hopefully this will be just the ticket for polishing up your web application too!

Download Minium for jscalendar.

To use the skin with jscalendar, place the minium folder contained in the zip file inside the skins folder in your jscalendar install, and add a link tag to the theme.css file inside.

<input id="first-name" name="first-name" type="text" classic="text" />

Using this convention also means I can place the id and the name adjacent to each other – also handy. While this may not be the preferred convention for everyone, I find it’s just one more thing that helps me read that code in 6 months time – if I stick to it, it’s pretty quick for my eye to scan to that all-important information.

Far from being the next great JavaScript effects library (that domain is pretty well covered) JEL is focused on the utilitarian, and was borne out of me being sick of writing the same old date-handling, string-handling or form validation code over and over again. Which means you’ll have more time to pimp your site up with JavaScript FX! Hooray!(?)

The JEL site contains full API Documentation built with NaturalDocs, inspired by the MooTools documentation which is one of the best documentation sites I have ever seen (thanks Greg for NaturalDocs, and Mad4Milk for pointing me toward a brilliant way to document JavaScript code). And for those who don’t like reading reference docs, I have written up some Manual pages to help you get started.

And yes, I know my site looks pretty much like the default WordPress template (“lame!” as John Dorian would surely say), but I’m tired of lurking and content is king right? Now that the first release of JEL is done, I’ll have more time to devote to a pretty template of my very own!

I’ve got a lot more to say about things I’ve picked up while developing JEL so stay tuned…