Syntax highlighting

First you should install the LESS-sublime package from Sublime Package Control. To the check if it is working properly, just create a new file with the less extension. And add some code like this:

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

The code should be correctly highlighted.

Compiling

Now you need something to compile the LESS file into a CSS file. There are two ways of compiling LESS: the client side and the server side.

Client side

The client side is pretty straight forward:

1. Place a link to the LESS in the HTML:

   <link rel="stylesheet/less" type="text/css" href="styles.less">

2. Add the script to the HTML file:

   <script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js" type="text/javascript"></script>

I’m not very fond of the client side compiling. It puts unnecessary load on the browser, leaving the page blank while the JavaScript processes the LESS file. And it’s a clear violation of the Progressive Enhancement rules, where the presentation (CSS) an behavior (JavaScript) layers should be separate.

Server side

For the server side compilation, there are two different approaches: using the Sublime Text’s LESS-build package on build or using a simple app like LESS.app.

The Less-build package is very simple for Windows users, just install it from the Package control in Sublime Text. This package, in Windows, uses dotless to compile the LESS files into CSS files and there are no changes required. You can skip to the “Build” part.

For Mac it’s not that simple, you’ll need the lessc package, that requires nodejs and npm.

If you have mac ports, install nodes and npm:

sudo port install nodes npm

If you don’t have mac ports installed please check this tutorial to install nodejs and npm.

Now you need to install lessc:

sudo npm install --global less

You need to check if the lessc file is where the LESS-build package wants it to be:

ls /usr/local/bin/lessc

If the file does not exist you need to find it’s path. Unfortunately the LESS-build package doesn’t have a reliable way of configuring the path to the lessc file, you can place it inside the package config files, but it will be removed when you update the package. To solve this you can create a symlink to the lessc file, that should be located in the /opt/local/bin folder, like this:

ln -s /opt/local/bin/lessc /usr/local/bin/lessc

You’ll need to set the build system in Sublime Text’s Tools menu, to LESS or LESS-min (minified compiled file). And now you will be able to compile the LESS file on “Build”.

If you are a Mac user and want a simpler way, you can download LESS.app. Then add the folder that holds the less files and every time you save the file a compiled CSS file will be generated or updated.

Place the compiled CSS file in the HTML as an usual CSS. And you’re done!

If you want to give LESS a try check this article: A Comprehensive Introduction to LESS from Sitepoint.

There are many advantages to use LESS such as variables, mixins, function and operations. The resultant code is cleaner, stricter, structured, minimizes the vendor prefixes nightmare and therefore more maintainable. However there are some drawbacks and one of them is huge, the existing debug tools are almost useless. When debugging with tools like Firebug, the lines refer to the compiled css file.

Compatibility:

If you ever worked with YUI or Dojo frameworks, you must be familiar with this pattern, it consists on subscribing a widget’s event by supplying a method to run when the event occurs. The Observer or Pub/Sub (publish/subscribe) pattern is not new but has great effect in a language like JavaScript which is event driven.

How does it work

Imagine that we have a widget that loads on a page, and there are a set of procedures that we want to run when that widget fully loads. A conventional way to achieve this is by calling the methods from the widget, however this doesn’t seem right, since you may be using the widget in other pages. The proper way is to implement a mechanism that informs when the widget has loaded, and then run the procedures. We can easily implement this with the observer pattern.

Advantages

There are two main advantages using this method: independence and manageability. The object, widget or module that fires the event doesn’t care about their subscribers structure and if they still exist or not. We can also subscribe or stop subscribing without interacting directly with the publisher owner. So the code can be isolated which facilitates its management.

Disadvantages

The main disadvantage is that we need to know exactly how the environment should work. When we have multiple subscribers and publishers it’s easy to inadvertently create an endless loop.

Implementation

First we need the Observer constructor, it should create a stack that stores all the necessary information to run the handlers when the event fire and set the name of the topic. The name of the topic is used when the event is fired to inform the handler of the occurred event’s name.

var Observer = function (topic) {
	this._topic = topic || "";
	this._stack = [];
};

Next we need the subscribe method. This method should store the subscription information: the handler function, an arguments object and a flag that defines if the arguments object should be used as scope or not.

Observer.prototype = {

	subscribe: function (fHandler, oScope, bOverride) {
		this._stack.push({
			handler: fHandler,
			scope: (bOverride && typeof oScope === "object") ? oScope : window,
			args: oScope || {},
			override: bOverride
		});
	}
};

Now we should create the method to fire (publish) the event. This method may receive some arguments if needed and run the subscribers, stored in the stack, according to their settings. The subscription handler will receive as parameters the Observer’s topic, the subscription arguments and the publish arguments:

Observer.prototype = {
	...
	publish: function (args) {
		var i, li, cur;
		args = args || [];
		for (i = 0, li = this._stack.length; i < li; ++i) {
			cur = this._stack[i];
			cur.handler.call(cur.scope, this._topic, cur.args, args);
		}
	}
};

The publish method could be improved by using the Array.forEach if available, instead of the conventional for loop.

The last required method is the unsubscribe, that removes a subscription from the stack by the defined handler.

Observer.prototype = {
	...
	unsubscribe: function (fHandler) {
		var cur, res = [];
		while (this._stack.length) {
			cur = this._stack.shift();
			if (cur.handler !== fHandler) {
				res.push(cur);
			}
		}
		this._stack = res;
	}
};

In more advanced browsers you can use the Array.filter instead of the while statement.

There other useful methods to have in the Observer method, but not mandatory. The unsubscribeAll, unsubscribes all methods and is very useful when destroying a widget. The getSubscribers gets all the subscribers and enables to debug or filter the handlers.

Observer.prototype = {
	...
	getSubscribers: function () {
		return this._stack;
	},
	unsubscribeAll: function () {
		this._stack = [];
	}
};

Putting all together:

var Observer = function (topic) {
	this._topic = topic || "";
	this._stack = [];
};

Observer.prototype = {
	subscribe: function (fHandler, oScope, bOverride) {
		this._stack.push({
			handler: fHandler,
			scope: (bOverride && typeof oScope === "object") ? oScope : window,
			args: oScope || {},
			override: bOverride
		});
	},
	publish: function (args) {
		var i, li, cur;
		args = args || [];
		for (i = 0, li = this._stack.length; i < li; ++i) {
			cur = this._stack[i];
			cur.handler.call(cur.scope, this._topic, cur.args, args);
		}
	},
	unsubscribe: function (fHandler) {
		var cur, res = [];
		while (this._stack.length) {
			cur = this._stack.shift();
			if (cur.handler !== fHandler) {
				res.push(cur);
			}
		}
		this._stack = res;
	},
	getSubscribers: function () {
		return this._stack;
	},
	unsubscribeAll: function () {
		this._stack = [];
	}
};

How to use it

The usage is fairly simple:.

var event,
    obj1 = { a: "A", b: "B" },
    obj2 = { c: "C", d: "D" };

// create a new Observer instance setting the topic (testing)
event = new Observer("testing");
// create handler for the subscription
// the received arguments are the topic, the subscription arguments
// and the published arguments
function fn(sTopic, oSubArgs, oPubArgs) {
	console.log("inside the handler", sTopic, oSubArgs, oPubArgs);
}
// subscribe the event
event.subscribe(fn, obj1, false);
// publish the event
event.publish(obj2); // logs the information from the handler
// remove the subscription
event.unsubscribe(fn);
// publish the event
event.publish(); // shouldn't log anything

Conclusion

This a very simple pattern that should be used to keep the modularity of the scripts, leading to clean and reliable code. You may optimize the widget or add more events in an independent way without worrying about side effects.

Compatibility:

A versatile iterator, like the foreach, is a method that allows the iteration of Array, Objects or HTML elements (nodes) collections. Similar method exist in other languages, and can be very useful by using less code, optimized loops and profiting directly from the language enhancements.

Implementation

Handling arrays

Let’s start our each method by enabling its use for arrays. The method will expect an array (source), a function (fHandler) to be applied when iterating and the scope (oScope) where the function will run, this last one will be optional.

function each(source, fHandler, oScope)
{
    var i, li,
        scope = oScope || this;

    if(source instanceof Array)
    {
        for(i = 0, li = source.length; i < li; ++i)
        {
            fHandler.call(scope, source[i], i, source);
        }
    }
}

The for loop is improved by caching the array length, you can see some performance statistics here.

You may be wondering why the iteration handler (fHandler) receives those 3 arguments, I'll explain it without delay. Some modern browsers already implemented a native iteration method for Arrays:

var a = [1,2,3],
    f = function(value, index, structure){};

a.forEach(a, f, this);

The f function receives 3 arguments: the current iteration value, the index and the array that's being iterated. We can profit by using this native method. If we want to use this native method we need to ensure that its usage is compatible with our each. So the 3 arguments used by function f must match the arguments used by the each handler

However this functionality is not available on all major browsers, which makes it unreliable to use it without testing its existence. But we can integrate this to improve our each method:

function each(source, fHandler, oScope)
{
    var i, li,
        A = Array.prototype,
        scope = oScope || this;

    if(source instanceof Array)
    {
        if(typeof A.forEach === "function")
        {
            A.forEach.call(source, fHandler, scope);
        }
        else
        {
            for(i = 0, li = source.length; i < li; ++i)
            {
                fHandler.call(scope, source[i], i, source);
            }
        }
    }
}

Handling objects

Now that we have covered the Arrays, it's time to direct our attention to object iteration. Conventionally an object is iterated by using the for in statement. Before iterate we need to make sure we are handling a standard object, not a function, which is also an instance of object. We should also include a validation for the object member in order to avoid iterating through unwanted properties, that's why we add the hasOwnProperty verification, this is a JSLint recommendation.

function each(source, fHandler, oScope)
{
    var i, li,
        A = Array.prototype,
        scope = oScope || this;

    if(source instanceof Array)
    {
        if(typeof A.forEach === "function")
        {
            A.forEach.call(source, fHandler, scope);
        }
        else
        {
            for(i = 0, li = source.length; i < li; ++i)
            {
                fHandler.call(scope, source[i], i, source);
            }
        }
    }
    else if(source instanceof Object && typeof source !== "function")
    {
        for(i in source)
        {
            if(source.hasOwnProperty(i))
            {
                fHandler.call(scope, source[i], i, source);
            }
        }
    }
}

Some may ask why we shouldn't use the for in statement to also iterate Arrays, there are two main reasons: the for in statement is much slower that the conventional for loop and when looping through an array we will be accessing some unwanted properties, like the length.

Handling collections

JavaScript collections are structures that hold nodes, like those that we get from the getElementsByTagName or using the document.forms[0].elements. They are not arrays, they are objects with the length property. However we can handle them as arrays.

function each(source, fHandler, oScope)
{
    var i, li,
        A = Array.prototype,
        scope = oScope || this;

    if(source instanceof Array || ((typeof source === "object" || source instanceof Object) && typeof source.length === "number"))
    {
        if(typeof A.forEach === "function")
        {
            A.forEach.call(source, fHandler, scope);
        }
        else
        {
            for(i = 0, li = source.length; i < li; ++i)
            {
                fHandler.call(scope, source[i], i, source);
            }
        }
    }
    else if(source instanceof Object && typeof source !== "function")
    {
        for(i in source)
        {
            if(source.hasOwnProperty(i))
            {
                fHandler.call(scope, source[i], i, source);
            }
        }
    }
}

How to use it

The usage is simple, the first parameter can be an Array, Object or Collection, the second is a function that serves as iteration handler, which means the action you want to apply in each iteration and the third is the scope where the handler will run. The scope is optional but it can be very useful.

each(Array/Object/Collection, Function, Object);

The only thing to keep in mind is the arguments that the handler receives: the value of the current iteration position, the index (current iteration position) and the structure being iterated. If you want to access the scope just use the this statement.

function handler(value, index, coll)
{
    //code to execute in each iteration
};

Performance

So what about performance? I wrote some tests with this each implementation, against conventional implementation and the jQuery each method.

The most obvious conclusion is that the jQuery method is the slowest. Although the performance of the conventional implementation is faster than the each method in most of the browsers, the each method requires less code and less weight over the wire. But in my opinion, the most important thing is profiting from the Array.forEach implementation and its future optimization. One day we won't need this each implementation but until then I'll be using it.

Here’s a quick a simple way to fix it: https://trac.macports.org/wiki/howto/InstallingOlderPort

YUI Compressor is a very useful tool to compress code, JavaScript or CSS. Integrating java based tools in Sublime Text is pretty simple. Here’s how to integrate YUI Compressor.

• Download YUI compressor from here.
• Unpack it in the Sublime Text Users folder located in the Packages folder. In my case is something like this: ~/Library/Application Support/Sublime Text 2/Packages/User
• I’ve named the extracted folder YUI Compressor
• Open Sublime Text 2, and go to Tools > Build System > New build System
• Add the following code:
  

  {
      "cmd": ["java", "-jar",  "${packages}/User/YUI Compressor/build/yuicompressor-2.4.6.jar", "$file", "-o", "${file_base_name}-min.${file_extension}", "--charset", "utf-8"],
      "selector": "source.js"
  }

• Save the file as “YUI Compressor”
• Restart the editor
• Open a CSS or JavaScript file, and select the YUI Compressor build system from Tools > Build System
• And you can run the build from Tools > Build, or using the shortcut super + b

Compatibility:

The single var pattern is a very simple and straight forward implementation, as opposite of the side effects of not using it. It consists in declaring all the vars in the top of a scope with a single var statement and the variables separated by commas.

var i = 0,
    a = 3,
    b = 5,
    c = a + b,
    oObject = {},
    el = document.getElementById("trigger");

There is more to it than looking pretty. This pattern is very useful, by creating a place to declare and control all the scope variables and avoiding collisions, unused variables or preventing logical issues due to uninitialized items (hoisting).

This pattern also good because is less code, even after using minifying tools, and maintains the readability. If the variables are initialized it will provide valuable information about scope environment when you return to fix or improve something.

Compatibility:

If you use “Chain assignment” or are considering using it, beware of implied globals. Take this example:

function vars()
{
	var a = b = "hello";
	console.log("a: " + a); // outputs: a: hello
}
vars();
console.log("b: " +  b); // outputs: b: hello
console.log("a: " +  a); // error not defined

Compatibility:

Using the defer attribute in a html <script> tag is commonly advised as a good practice, however it’s rare to see it in action. I think its lack of usage is related with browser compatibility and the developer’s skepticism to implement it.

Setting this attribute means that the script execution will be delayed and it will run after all the contents are loaded, parsed and executed, just before the onload event. The deferred files will start downloading when the <script> tag is parsed, however it won’t block the other process and it will allow parallel downloads of other resources of the page. This can be very useful to avoid heavy JavaScript execution at start that blocks the browser UI rendering leading to blank screens and unresponsive applications.

The experiment

In order to better understand how this attribute works, I have written the following code:

<!-- inline scripts -->
<script>
	var test1 = "fail";
</script>
<script defer>
	console.log(test1);
</script>
<script>
	test1 = "success";
</script>

<!-- external scripts -->
<script src="script1.js"></script>
<script src="script2.js" defer></script>
<script src="script3.js"></script>
<!-- document events -->
<script>
	window.onload = function()
	{
		alert("onload");
	};
</script>

The external scripts have almost the same code as the code in the inline <script> tags, the only difference is that instead of the variable test1, I use test2.

For a full defer implementation we expect the “success” string to be outputted in the console twice and finally the onload message.

The defer in Firefox 7, Chrome 15 and Safari 5.1 only works for external scripts. Internet Explorer implements it correctly. Opera does not work at all. Even if there isn’t a full support for deffered scripts you can profit from its performance capabilties in the compatible browsers.

Compatibility:

Inserting an HMTL string inside or as a sibling of a DOM node should be simple, even when the DOM node has already some content. Usually to insert a string inside an element, without replacing all of its content you need to concatenate strings or create and append nodes to accurately inserted it.

The DOM node insertAdjacentHTML method does that for you, believe it or not, this method exist in Microsoft Internet Explorer since version 4, but it is not currently supported by Firefox, it will when version 8 comes out.

See it in action

Imagine you have the following HTML content:

<ul>
<li>1st line here!</li>
<li>2nd line here!</li>
<li>3rd line here!</li>
</ul>

And you want to append some more content to the target element as the first line. Using the insertAdjacentHTML method should be something like this:

var t = document.getElementById("target");
t.insertAdjacentHTML("afterbegin", "<strong>Inserted content</strong>");

There are 4 ways you can use the insertAdjacentHTML:

• beforebegin – places the HTML before the element
• afterbegin – places the HTML inside the element as its first child
• beforeend – places the HTML inside the element as its last child
• afterend – places the HTML after the element

You can find more info about this matter at HTML5.org specs.