We developers are always looking for tools to improve our process or speed up common tasks. I often save bits of code I reuse in Dreamweaver’s snippets. Today I discovered a plugin/extension which allows even more flexibility and it even works in HTML5.
Let’s assume you are creating a new web page. You can create the blank page easy enough in DW but adding all the layout elements could take a little while. What zen coding allows you to do is type a short string similar to CSS selectors then expand the string (abbreviation) to the full HTML markup.
header>div#branding>nav>+ul#mainnav>li*5>a
expanded becomes
<header>
<div id="branding"></div>
<nav>
<ul id="smainnav">
<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>
</nav>
</div>
</header>
If you have a list of items (ie sidebarlinks) you want to format quickly
you can use the “Wrap with abbreviation” syntax to format the list.
<div> item1 item2 item3 </div> Place cursor on any one of the link items and type this: aside>nav>ul#sidebarnav>li*>a into the Wrap with abbreviation input box, it becomes: <aside> <nav> <ul id="sidebarnav"> <li><a href="">sideitem1</a></li> <li><a href="">sideitem2</a></li> <li><a href="">sideitem3</a></li> <li><a href="">sideitem4</a></li> </ul> </nav> </aside>
Zen Coding extension works with several code editors. You can learn more at: http://code.google.com/p/zen-coding/
