Lately i’ve tested some techniques to overcome the blocking nature of script tags to improve page load performance, and i ended up using LABjs which seems a really promising project.
The main drawback of this non blocking technique is that, since JavaScript parsing is not blocking the interface anymore users may encounter several flash of unstyled (or un-behaviored) content (FOUC – FUBC), which may break the interface (and make your marketing team screams at you).

The solution here is: struggle a bit more instead of leaving script tags in the head.

What i’ve came up by following some suggestions by the LABjs author and the web community is to separate my CSS styles in two separate levels: one for un-behaviored contents and one for JavaScript enabled browsers.
The trick is simple: since the only tag script you need is the one of LABjs, just open it and add this line at the very top of the file:

document.documentElement.className = 'hasJS';

This way you will add a hasJS class to the html tag that you may target in the CSS rules to overwrite and implement styles to get your interface ready for JavaScript interactions.

The drawback of this technique is that adding a class attibute to html tag won’t validate, but that’s the only CSS addressable node before DOM ready event.

This way your interface won’t flash anymore and your users won’t notice any change while JavaScript is getting loaded in a more efficient way.

Even if a solid knowledge of JavaScript should be a must, a good way to avoid bad practices and headaches is by using a JavaScript library, which will make coding easier and much more beginner friendly.

MooTools is such a library, and offers a lot of methods and patterns for better JavaScript coding.

Introducing MooTools 1.2 Beginner’s Guide

Even if I’m not a MooTools novice, i had the chance to read MooTools 1.2 Beginners Guide by Jacob Gube and Garrick Cheung (Packt Publishing), which turned out to be also an interesting reading to better understand all of the improvements made by MooTools from the 1.11 version.

From this perspective the book, which aims primarily to beginner MooTools developers, may also be a good reference for users of previous versions willing to update their scripts.

That said, the book doesn’t cover all of the methods offered by the library, but is intended by the authors as a step by step introduction to MooTools development and gives a solid knowledge of its undergoing philosophy.

The approach is strongly examples-oriented to better and clearly show how the library works and to give some starting point for developers willing to practice hands-on.

The Good Parts

The guide’s table of contents spans from the core $ function to the plugin’s usage and factoring, introducing the most relevant and commonly used part of the library. Writing is fluent and familiar keeping it easy while accurate.

First of all, I really appreciated the well done part about utility functions which are, in my opinion, one of the library’s key features since they make possible to save lot of repetitive coding: functions like $type, $each or the Browser object grant a cross-browser and risk free development with little effort.

The other aspect which is deeply covered is the Class construction pattern.
By using this pattern every novice developer is able to code JavaScript classes with syntax similar to other programming languages like PHP, thus filling the lack of real classes in JavaScript and avoiding global object pollution.

Also well documented is the animation chapter about FX classes, which still are the best choice for performance and browser rendering (FX has been the first part of the original library).

A full chapter at the end of the book is dedicated to plug-in development, featuring not only an explanation on how write a plug-in, but also teaching how to design a plug-in starting from existing scripts and reusability requirements.
This part has been an unexpected surprise, since few guides intended for technical audience teach code’s design process with design sheets and documentation guidelines.

Beyond Examples

As of its introduction, the guide is intended as a step by step process in learning the bases in MooTools development; anyway little effort is spent in explaining why using MooTools is not just a smarter way of coding, but also and above all a better approach to JavaScript.

Learning common scripting mistakes is the way to understand that using a library is not just cool and that libraries aren’t vital, but still an affordable toolkit for JS scripting.

Talking about library presentation, it’d be a good idea to explain more in details some DOM manipulation methods, since many developers are used to circumvent (often too roughly) document and CSS limits by cutting and remixing elements with JavaScript.
MooTools has a big list of such methods which often are a better choice than native JS both for performance and browsers’ support.

Conclusions

As a whole, MooTools 1.2 Beginners Guide gives a clear and solid basic knowledge of how the library works, making it possible for a novice developer to dive into the official documentation without feeling lost.

Even if some background thoughts about its development patterns would be appreciated, I’d definitely suggest the book to MooTools beginners (but not to JavaScript beginners for the mentioned reason).
Moreover it’s a quick reference for commonly used methods and classes, therefore a book to keep on your desk.

You may check the publisher website to get the complete table of contents and read a sample chapter or just jump to the book main page here.

The best solution for our coding needs is to adopt a JS framework as backbone for our scripts. One of the very first framework I’ve worked with is Mootools, since it’s very developer friendly and fulfils lots of JavaScript’s “holes”.

In the next few days i’m going to receive a copy of:  MooTools 1.2 Beginner’s Guide, which I’m going to review for the sake of some of my followers and friends which are in need of a good starting point to learn how to improve their interfaces.

If you are interested you can check the details of the guide at the publisher website.

Stay tuned!

Day by day, i’ve understood why so many developers use libraries (or frameworks) such as Mootools or jQuery: It’s a matter of typing.

document.getElementById("test"); //native Javascript
$("#test"); // with jQuery

At the same time i’ve learnt that libraries aren’t always worth their weight. Small projects don’t need them, and just writing a shortcut like:

function id(string) {
   return document.getElementById(string);
}

can make your life better (and more lightweight).

Introducing Bicycle 1.2

That said, here is a new version of Bicycle, my little “JavaScript Collection”. As from the name, it’s a lightweight and load-cost-effective library (about 9Kb minified) with everything is needed to keep your code simple and cross-browser. Here is a sample code:

var el = $getEls("test");  // get the element with id "test"
var input = $TN("nametext");  // get the first element with name "nametext"

Chainability

Anyway, if you need something more, since this new version Bicycle features a convenient chainability wrapper, with even new methods such as mouse and DOM-ready events and AJAX handling.

The chainable structure is bound to the $b namespace, so that you can use it along with other libraries. Here is a sample code:

$b("#test").css("color","red").txt("New text!");

See the documentation for more methods.

Form Handling

Finally, as a bonus, i’ve added a smart piece of code called Telegraph, which is basically a form handling library to quickly get and manipulate form inputs:

$b.getForm("myForm").value("testinput"); // get an input value
$b.getForm("myForm").serialize(); // serialize form data in a JavaScript object

Grab a copy

At last, more code can’t mean same weight, but i suppose you won’t mind it, ’cause  Bicycle core + chainability + new methods + Telegraph is just 22Kb minified.

Head to the main project page to get more infos and documentation, or grab a copy of the source code and “take a ride” with your brand new Bicycle.

Changes in this new version are:

1. Updated MooTools Core to 1.2.2 1.2.3 and MooTools More to 1.2.2.2 1.2.3.1
   
2. Added .getValue() to the compatibility file
3. Added .getSelected() to the compatibility file to fix some issues under IE
4. Added Json support to the compatibility file
5. Added window.onDomReady shortcut for DOM ready event
6. Changed MY_Behavior::mootoolsFix(); to handle new MooTools files 
7. Changed MY_Behavior::mootoolsFix(); to correctly render old tooltips format title::text for items with hasTip class (anyway, remember that classes to style the tooltip have changed!)
8. Added a validate.js replacement to fix an issue with changed namespaces. ( this replacement is no more needed)
   

The source code is released in the form of patch: unzip it and upload files in your Joomla root, eventually overwriting files. MooTools library is uncompressed to allow for a quicker debug. Anyway you may minify it with your tool of choice.

Here is the code: Mootools 1.11 to 1.2.2 (71.68 kB)

Update (again): Sometimes i can’t get if MooTools team is too vital or library milestones are not well defined… anyway here is an update to use latest MooTools 1.2.3. No major changes have been made to the fix library, anyway keep reporting compatibility issues. Here is the zipped  file: Mootools 1.11 to 1.2.3 for Joomla 1.5 (72.06 kB)

Update (09/20/09): New version available. Corrected some bugs in the compatibility file and added a loop check to replace MooTools 1.11 when called from a component as custom script. Now the validation core script doesn’t need to be replaced. Get source here (carries the original validate.js as in Joomla 1.5.14:  MooTools 1.11 to 1.2.x (72.88 kB)

The matter is that the code presented by the help page requires an onClick attribute, which is actually deprecated in XHTML.

To overcome this problem here is a simple jQuery plugin which converts any rev (or other given) attribute to a Google Analytics friendly tracking path (for both old and new versions of the app). Here is a sample code:

<a href="http://www.externalwebsite.com" rev="outbounds www.externalwebsite.com">visit this site</a>

Is tracked as /outbounds/www.externalwebsite.com

To apply this plugin call it inside a document loaded function, for example:

$("a").colt();

This calls the plugin on all A tags with an attribute rev.
Moreover you can use a custom element attribute by just passing it to the function:

$("a").colt("title");

And finally here is the source code:
jQuery.colt.js (908 bytes)

An example of this can be found on the Facebook Homepage.

Facebook Input Label

Though this is a space saving way to show labels and a much more focused way to point out the expected field value, addressing it by the value attribute introduces a semantic issue, since that’s not at all an initial value, not counting that pulling apart the label tag is an accessibility fault.

To overcome this problem we can rely on the powerfull JavaScript framework jQuery, to build an unobtrusive plugin mantaining both accessibility and usability. Let’s see:

1) Link the script in the head section:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.inputLabel.js" type="text/javascript"></script>

2) Semantically correct XHTML:

<label for="myInput">Email here<label><nput type="text" name="myInput" id="myInput" />

3) Run the plugin on document load (place this in a script tag before the end of head):

$(function () {
      $("#myInput").inputLabel();
});

That’s all. You can pass an options’ object to change, for example, the inserted value, or to prevent the plugin for running on already filled or pre-filled fields:

• color: initial text color (default : “#666″)
• e: event which triggers label text clearing (default: “focus”)
• force: execute this script even if input value is not empty (default: false)
• keep: if value of field is empty on blur, re-apply label text (default: true)

Check the demo page to see the script in action or download the source code below:
jQuery inputLabel Plugin (2.18 kB)