DIY Developer
software and power tools, yay!

13 October 2013

As a web developer, I have regularly found myself needing to type a large amount of HTML layout code. Your page starts to grow, and your eyes begin to glaze over as you type DIV after DIV.

Enter Zen Coding. In a nutshell, ZenCoding is a set of editor extensions, allowing a developer to use shorthand for common tasks. Microsoft have incorporated these extensions into Web Essentials for Visual Studio 2013.

I can’t overstate how awesome this feature is. For example, if I type:


div

…and then hit the tab key, I get:


<div>
</div>

A div has been added for me. But what if I need to add a CSS Id?


div#mainContent

// tab...
<div id="mainContent">
</div>

We can add a CSS class too:


div#mainContent.redbox

// tab...
<div id="mainContent" class="redbox">
</div>

Maybe we need some test data to check our layout? Zen even supports Lorem Ipsum!


div>lorem

// tab...
<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada semper mi, id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
</div>

This part is cool. What if we want 3 table rows, each with 2 columns? (yes, I know, you all use pure CSS now - not tables)..


table>tr*3>td*2

// tab...
<table>
<tr>
        <td></td>
        <td></td>
    </tr>
<tr>
        <td></td>
        <td></td>
    </tr>
<tr>
        <td></td>
        <td></td>
    </tr>
</table>

If you find it isn’t working after installing Web Extensions, make sure you are using the release copy of Visual Studio 2013 (the latest version of Web Extensions doesn’t work with VS2013 pre-release). Let me know if you find more handy short cuts.



comments powered by Disqus