Aptana on Steroids using Zen Coding

I’ve mentioned before in previous articles that Aptana is my IDE of choice; one which I’ve been using for a few years. I only use a handful of the many features available in Aptana, all of which are also available in other editors (Notepad++ being one), but I’ve got so used to the way it works I’m sticking with it for the moment.

One of Aptana’s helpful features is the ability to generate code using the easy to access menu bar at the top of the code window (see image):

A superb feature it must be said, but it is totally eclipsed when you start using the Zen Coding JavaScript Library. Zen Coding, written by Sergey Chikuyonok isn’t a JavaScript Library in the traditional sense, it isn’t uploaded and linked to in your web page; it’s installed as a plug-in for your selected text editor. As you can see from the list there are many versions available, so you aren’t restricted to only Aptana.

Let me explain what it does first, then I’ll show you how to install it (for Aptana). As a Front End Web Developer you will often find you’re writing out the same blocks of code again and again. You can just copy / paste then modify, but even that’s quite slow and tedious. Zen Coding uses a technology that you will be very familiar with: CSS selectors. It may seem confusing at first, but once you see it in action it makes perfect sense. Here are a few code examples I use all the time:

1
2
3
4
5
6
7
8
9
10
11
12

<!--
Entering
ul#mainNav>li*5>a
generates the list below
-->
<ul id="mainNav">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

Using simple CSS selectors we’ve been able to quickly generate an unordered list that can be used for example, as a page navigation. You can even use more advanced selectors like siblings and abbreviated groups to generate more advanced HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<!--
Entering
div#wrapper>div#header+div#content+div#footer
generates this div set below
-->
<div id="wrapper">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

<!--
Or a more advanced example
div#content>(div.primary-section>h2.header+p+ul>li*5)+(div.secondary-section>h3+p)
generates the sections below
-->
<div id="content">
    <div class="primary-section">
        <h2 class="header"></h2>
        <p></p>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="secondary-section">
        <h3></h3>
        <p></p>
    </div>
</div>

It may take a little while to get into the routine, it’s all to easy to slip back into typing the code by hand; but once you do you can build the basic mark-up of a page in a matter of minutes.

There’s a very informative article on Smashing Magazine from last year which you may find useful if you plan on investigating Zen Coding further; I highly recommend adding it to your “toread” list. There are so many more functions available that I haven’t even touched on in this article, you will be amazed.

Now that you’ve seen Zen Coding in action you may be wondering how you install it for use with Aptana. Well luckily it’s dead simple. First create a ‘new project’ in Aptana, call it whatever you like e.g. ‘Zen Coding’:

Within the new project create a scripts directory and copy the Zen Coding JavaScript into into the directory. That’s it you’re done! Restart Aptana and start using Zen Coding. Once you’ve typed in a string of CSS selectors you wish to convert to HTML, hit CTRL + E (Expand Abbreviation) and it will do the rest for you. One thing to note, you must keep the new project you’ve just created open at all times, else Aptana won’t be able to access the scripts.

You can customise the key you use expand an abbreviation by editing the “Key” value in “Expand Abbreviation.js”. For more information on available keycodes see the Aptana documentation here.

Hopefully you find Zen Coding useful, it’s certainly changed the way I code on a day to day basis.