Most of us are familiar with the popular Zen Coding utility by now. For those who aren't, it turns the process of creating complex markup into a CSS-like selector. This can save you an extraordinary amount of time; however, it does have a few short-comings. Luckily, another tool, Sparkup, inspired by Zen Coding, remedies these issues, and pushes your productivity even higher!

Prefer a Video Tutorial?

Wait...What's Zen Coding?

Consider the following markup:

<div id="container">
   <nav>
      <ul>
         <li>
            <a href=""></a>
         </li>
         <li>
            <a href=""></a>
         </li>
         <li>
            <a href=""></a>
         </li>
         <li>
            <a href=""></a>
         </li>
      </ul>
   </nav>
</div>

This is fairly common markup that you'll create for every new website. Assuming that you don't already have this saved as a snippet, it can easily be recreated within seconds, with Zen Coding.

#container > nav > ul > li*4

• Target ids and classes with the # and . selectors.
• Use the > to filter down the tree and create children elements.
• Request multiple elements by using the * symbol.
• Use the + symbol to create siblings.

Room for Improvement

Unfortunately, there are a few issues that I have with Zen Coding.

• To the best of my knowledge, there's no easy way to travel back up the tree. For example, if I create a ul > li*4 selector, I'm not aware of a way to filter back up to the ul, and then create a sibling element.
• There isn't a way to assign innerHTML to an element. Wouldn't it be great if I could type, ul>li {Some Text Here}?
• I don't believe there's a way to tab between stops, after you expand.

Luckily, a utility, inspired by Zen Coding, fixes every one of the issues listed above. It's forward compatible -- meaning, all of your Zen Coding knowledge will transfer over seamlessly.

Availability

At the time of this writing, Sparkup is available for TextMate, Vim, and for general usage, via the command line. It's fairly trivial to install. For more information, refer to the screencast above.

Climb up the Tree

With Sparkup, we can travel back up the tree.

The Syntax

ul > li*3 > a < < + #contents

Notice how we're using the < to travel back up the tree. From the anchor tag, one < will take us to the list item, and another will bring us back to the unordered list, at which point we can create a sibling with the + symbol. Very helpful!

The Output

<ul>
   <li>
      <a href=""></a>
   </li>
   <li>
      <a href=""></a>
   </li>
   <li>
      <a href=""></a>
   </li>
</ul>
<div id="contents"></div>

Add Text to Elements

By using curly braces, we can assign values, or innerHTML to the elements we create. This feature was badly needed.

The Syntax

ul > li > p { My Text Here }

The Output

<ul>
   <li>
      <p> My Text Here </p>
   </li>
</ul>

Tab Stops

With Sparkup, we can tab over the necessary stops, so that we can manually insert our attributes/values as quickly as possible. With MacVim, as shown in the screencast, you can use Control + N and Control + P to switch between the stops.

This way, rather than having to resort to numerous directional key presses, a single command will take you where you need to be. Refer to the screencast for an example.

So what do you think? Will you be making the switch?