Bryan Williams

Previous Post Zen Coding Next Post

Posted: January 11th, 2010 in Web Development. No Comments

I am a front-end web developer. The bulk of my day is writing and editing html and css. If you’ve ever written css and fought with browser compatibility or tried a million ways to get something to show up where and how you want it to on a website, you know how frustrating it can be.  Occasionally I come across tools and tips to help make my life easier, which of course gets me excited and I just want to share them. Sometimes they are small and help a little bit, other times I smack myself in the forehead and say, “man, why didn’t I know about that?”

So my first post on coding tips is on something that I ran across today called Zen Coding. I must publicly thank Elijah Manor for his tweet about it this morning. Elijah is actually a great developer to follow on Twitter. He usually has fabulous tech tweets for developers running the whole gambit front-end to back-end. This morning he linked to a tutorial by net.tutsplus.com on Zen Coding. Zen Coding is a plugin created for a lot of major text editors that expedites writing html and css. The project and code to download for the plugins can be found http://code.google.com/p/zen-coding/

Html and CSS is notoriously repetitive. With nearly everything there is an opening and closing tag, with id’s, classes, and attributes. When Zen Coding tries to do is limit the data that you need to type down to the essentials, while allowing the text editor to fill in the necessary yet repetitive parts of the code. Lets take a look at an example:

Take for instance a typical site navigation.

<ul class="nav">
  <li class="nav-1"></li>
  <li class="nav-2"></li>
  <li class="nav-3"></li>
  <li class="nav-4"></li>
  <li class="nav-5"></li>
  <li class="nav-6"></li>
</ul>

Zen coding simplifies this down to:

ul.nav>li.nav-$*6>a

That tells the editor you want a ul with the class “nav” and 6 list-items with the class “nav-( and number of how many li’s you want)” and an anchor tag inside each one, all instantly. Now all you have to go through and add is the content. This method works more than just for nested items. You can also add items after. Instead of > you can use +. Say for instance you know you’ll have 3 paragraph tags and then a div. That can be created with:

p*3+div.test

That will output:

<p></p>
<p></p>
<p></p>
<div class="test"></div>

Not bad eh? My first thought was, “oh I just copy and paste.” but I decided to give it a shot anyways. In only the few minutes I’ve messed around with it I became pretty impressed. Even new to the system I found I was writing code significantly faster. I can only imagine that if I continue to use it where it become second nature, it will significant reduce the time (and not to mention dullness) of writing standard Html.

It looks like there is a similar plugin for css and I’ve tried messing around with it, but couldn’t get it really to work yet. I’ll keep trying though.

So to use the plugin in textmate go to that google code link I mentioned earlier, download and install TextMate.Zen.CSS.1.3.1.zip TextMate.Zen.HTML.1.3.1.zip and Zen Coding for TextMate v0.5 Create an Html file and enter in the code like how I mentioned then use command+e for the plugin to expand the line of Html.

Have fun, I hope you find it as useful as I do.

Share on digg