Armor-wielding shortcut with ZenCoding

When was the last time you have a nerdgasm? Was it since you last saw Iron Man's trailer where you've seen his suitcase armor expanded to an Iron Man suit and automatically costumed(armed?) him? Was it since you first learned Linq/lambda and all the expressiveness, succinctness and slickness you can accomplish with it?



Wow, that was so 3 years ago! In internet time it's an eternity! It's time to rectify that long drought. There are times we are in a Zen-like state (a.k.a. in the zone), wherein the code to implement something are all on your head already, your project is virtually done, ready to be coded/typed; and the only thing that is a bottleneck to implement the app is the interface between you and the computer, is the keyboard, is the typing.


With ZenCoding, typing humongous HTMLs off the top of your head will be a thing of the past. Given the following tags..

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li class="navitem"></li>
        <li class="navitem"></li>
        <li class="navitem"></li>
        <li class="navitem"></li>
        <li class="navitem"></li>
        <li class="navitem"></li>
        <li class="navitem"></li>
    </ul>
</div>

..you can type that automatically with ease with ZenCoding, just type the following (CSS-like syntax), then press the tab key(on most editors it's tab key, on Visual Studio press Alt+Z):

div#page>div.logo+ul#navigation>li.navitem*7

Neat isn't it? Tony Stark will be fuming with envy when he'll know that his suitcase armor is just a one-trick pony compared to your ZenCoding armor. How about the following contruct?

div#menu>table>tr>td*7>a.nav

That expands to this:

<div id="menu">
    <table>
        <tr>
            <td><a href="" class="nav"></a></td>
            <td><a href="" class="nav"></a></td>
            <td><a href="" class="nav"></a></td>
            <td><a href="" class="nav"></a></td>
            <td><a href="" class="nav"></a></td>
            <td><a href="" class="nav"></a></td>
            <td><a href="" class="nav"></a></td>
        </tr>
    </table>
</div>

And when you want to make multiple tr tags with multiple td tags with that construct, you already know the drill ;-)


With ZenCoding, every ZenCoding shortcut are an armor ready to spring from the master's fingertips and empowers the master and protects the people


Get the ZenCoding at: http://visualstudiogallery.msdn.microsoft.com/924090a6-1177-4e81-96a3-e929d7193130

Happy Coding! ツ