My Writings. My Thoughts.

The Art Of Zen Coding

// February 21st, 2011 // No Comments » // Programming

Creating the markup for a page has always been repetitive endeavour. Copy and paste was your best friend and if your text editing program had intellisense available, it was usually not helpful. That’s why the Zen Coding Plugin was created.

Zen coding allows you to write shorthand code and with a single keystroke be able to create the markup for an entire page.

Getting Started With Zen Coding

To get started, go to the Zen Coding Plugin home page and download the plugin for your IDE/Text Editor. Personally, I use Notepad++ for all HTML/CSS based projects but there is a plugin for many other IDEs. Such as:

A more up-to-date list can be found on the plugins home page.

After installing the plugin, you can begin using it immediately.  Just open up your text editor of preference and type in the following:

div#header>ul#nav>li*5

Then, press the expansion hotkey (for Notepad++ it is Ctrl + Alt + Enter) or click on Expand Abbreviation under your Zen Coding menu. This code will result in:

<div id="header">
	<ul id="nav">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

This code would require several mouse clicks and copy+pastes before, now it is just a couple of key combinations and you’ve build an entire page!

Online Demo

To try out zen coding without having to install anything, you can view the online text editor here.

Reach Enlightenment

All in all, I think this is a great tool that every web developer should have. Not just because it saves time and energy while coding but if you learn all the short codes by heart you can drastically increase your productivity while creating HTML. If not for that, then maybe just for the fact that it will take your code to a higher level much like that of buddhist monk after several hours of meditation.

jQuery 1.5 Released

// February 16th, 2011 // No Comments » // Programming

From the official blog: http://blog.jquery.com/2011/01/31/jquery-15-released/

Defferred Object

Defferred objects return objects that allow chaining of functions. When you execute a function that returns a Deferred object you can keep attaching callbacks to that object and they will get executed. If the functions are bound after object creation they will execute immediately.

This allows callbacks to be added at any time and have the object be passed around to other functions that attach their own handlers and it will all get resolved immediately.

What’s $.sub()?

This new function allows developers to create and modify a clone of jQuery while taking advantage of all the jQuery functions. This is useful if you need to override native jQuery methods without affecting other plugins, or create APIs for your own plugins that avoid namespace collisions.

Better, Faster, Strong(ly typed)

As with most major jQuery updates there have been some performance tweaks for some commonly-used functions. There have been improvements with the following traversal methods: .children(), .prev(), .next(). Some pretty graphs showing the actual improvements: