Labelize is a handy jQuery plugin that lets you give input-containing elements <label/> like properties, so that clicking on the container activates the input inside. The goal? To improve usability by giving hard-to-click input elements like radio buttons and checkboxes generous target areas. Surprisingly, this can’t be done with a <label/> element alone—if you want it supported in IE6, that is.

Say we have the following markup:

<div class="myLabel">
  <input type="checkbox"/>
</div>

To make the “myLabel” div become a label-like container for the checkbox its holding, we simply do the following:

<script>
  $('.myLabel').labelize()
</script>

That’s it! Now if we click anywhere on “myLabel”, the checkbox is clicked—and its onclick() event is fired too. Huzzah.

If you’d like to see the plugin in action, I’ve whipped up a quick project page with some working examples. Please have a look and let me know what you think.

If there’s one distinct argument I keep hearing against the use of JavaScript frameworks like Protoype, it’s that their large file sizes trump any perceived improvement in developer productivity. The naysayers may have a point: the latest version of prototype.js (without script.aculo.us) now weighs in at an unsightly 93kb. In terms of both page loading times and total bandwidth considerations, that’s more than some may be willing to swallow.

The thing is, if you’re willing to invest a few hours you can overcome the file size issue. What follows is a list of compression techniques and alternate libraries for making it happen. And don’t worry, you’ll earn the time back.

Whitespace minification

Just as it sounds, whitespace minification is the technique of removing all comments and whitespace from your JavaScript files. For heavily commented or indented code, the benefits can be surprising. The downside is that Prototype will essentially become unreadable, but you can always keep an unaltered version handy during development.

There are a number of tools out there to get the job done, but they all do the same thing, so you might as well use JSMin.

Running JSMin on prototype.js yields a final file size of roughly 71kb. That’s a significant improvement (~76% of its original size) for very little work, but still might be too large for some.

Code compression

JavaScript code compression involves re-writing code to be as concise as possible. This usually involves removing whitespace and comments, reducing variable and function names, and some form of encoding or ASCII compression. A pretty simple web-based tool for doing this is Dean Edward’s packer.

Seems simple enough, but most compressors require that JavaScript code have semi-colon delimited lines, which Prototype doesn’t have. A couple of folks have taken on the task of adding semi-colons to Prototype, and have begun distributing an unofficial version in various compressed forms , getting file sizes below 20kb, and even lower when paired with gzip compression (see below). Unfortunately these aren’t official releases, so you may have to wait longer for updates, plus they’re unsupported.

GZip compression w/ mod_deflate

If you’re not familiar with this technique, here’s a quick summary. Your clients’ browsers tell your server that they support gzip compressed files as part of their HTTP request headers. Your web server returns in kind with a smaller, compressed version of the content that is downloaded, decompressed and finally interpreted by the browser.

Dynamically compressing outbound files can mean an increased load on your server, but this can be avoided by compressing your JavaScript files ahead of time. Even if you don’t, the load is pretty marginal. Known browser incompatibilities can also be handled easily with the right set of rules. The upside over other compression techniques is that your JavaScript is still human-readable from your browser.

By enabling mod_deflate on Apache 2.x, I was able to reduce prototype.js 1.5.1 to roughly 23kb – about 25% of its original size. Similar modules are available for most web servers.

Alternate libraries

If you’ve decided that file size trumps all, and you’d rather not do the leg work on your own, then there’s a couple of alternate JavaScript libraries that provide slimmer versions out of the box.

JQuery is distributed with a compressed version that weighs in at 19kb. The uncompressed version is 55kb. Prototype users will find the syntax fairly similar.

Another library is mootools, a fork of Prototype that’s also distributed in compressed form. Their website also lets you pick and choose the components you need, which may result in a significantly smaller library file.