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):
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’:
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.