Smart & Faster Coding with Sublime Text and Emmet, A.K.A zen coding - The HTML

For developers, speed is always a welcome addition, that's why are always looking for ways to to add speed and effeciency to our work through automation and good decision making. A good text editor choice can sometimes be the difference between projects finishing on time and falling well short of deadlines.

Since Sublime Text is the editor 'du jour' at Watabelabs due to the amount of free plugins it has and the fact that, its easy to automate without being much of a programmer I am going to show how to harness the power of Sublime Text + the Emmet plugin to write code faster & efficient.

One of our favorite plugin is Emmet, A.K.A Zen Coding, this plugin can really boost your work experience and make you feel like you are cheating (I am serious about this), and the good thing is, Emmet is not only available for Sublime Text, it can be installed in other editors as well, just check the plugin's official site for more information.

Now I am not going to talk about how to install Emmet in Sublime Text, I will just try to show how you could use it to automate most of the stuff you do in your daily workflow.

HTML:

Again I am assuming that you have emmet installed, so i'll start with that assumpition in mind. Lets say you want to create the following html code

<div class="row">
<h1>Text</h1>
<a href="#">link text</a>
</div>

That's a lot of lines of code just to get that simple markup, now if you have Emmet installed in your sublime text, here's how you'd write that markup and then press Tab

.row>h1{Text}+a[href="#"]{link text}

Magic!, now lets take a look at what we wrote on and see if we could try to understand the pattern. If you just type .row and enter tab, Emmet, assumes you want to create a div with class row like this <div class="row"></div> so by default if you don't prepend the .row with any element it assumes that you are creating a div, however if you need something else like paragraph, just do p.row and that will create <p class="row"></p>

Okay, so right after .row we added '>', this looks familiar right? yep it looks like a css child selector and guess what it does, it creates a child element whose parent is the div with the class "row" so on our case, that child is the "h1" tag, We also needed text for our h1 tag and to do that with Emmet, just add {and text here},the curly braces tells Emmet whatever we put inside it is going to be the tag's text, and right after the h1{Text} we added a "+", that's like telling Emmet we need a sibling element which in our case happened to be an anchor tag, Now since anchor tags contain attributes and text, to add attributes, we add them inside square brackets [] right after the anchor tag,anything specified inside the square brackets is going to be the attributes for the anchor tag, so we if you want something like this

<a href="index.html" title="anchor" alt="anthor">link text</a> 

you would have to write it like this

a[href="index.html" title="anchor" alt="anchor"]{link text}

and press tab.Now that we got the basics out of the way, lets dig deeper.

Suppose you want to create a basic html 5 boilerplate code, in sublime text just create a new document, make sure the type is set to html, then just write
html:5 and press tab, this will automatically create html5 markup like this

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

Multiple Elements

One of the most common things we do everyday when creating a web pages, is adding navigation menus, so basically you would want something like this

<nav class="navbar">
	<ul>
		<li><a href="#">link-text</a></li>
		<li><a href="#">link-text</a></li>
		<li><a href="#">link-text</a></li>
		<li><a href="#">link-text</a></li>
		<li><a href="#">link-text</a></li>
	</ul>
</nav>

As you can see our list items are repeated five times and the anchor text is also repeated, we can automate this using Emmet, by just writing the following code

nav.navbar>ul>li*5>a[href="#"]{link-text}

Note the *5 right after li, that tells Emmet, repeat the list items five times, even better suppose you already got your navigation menu figured, like lets say we are going to have the following menu

Home
About Us
Work
Blog
Contact Us

We need a way to wrap these elements under a nav element with class navbar like this

<nav class="navbar">
	<li><a href="#">Home</a></li>
	<li><a href="#">About Us</a></li>
	<li><a href="#">Work</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">Contact Us</a></li>
</nav>

To do so just hightlight all the elements then press ctrl + w (I am on a mac), Emmet will open a text field at the bottom of your sublime text and automatically wraps all your menu items inside a div element, now since we need them to be wrapped inside a nav just start typing this

nav.navbar>ul>li*>a[href="#"]

You will notice everything will automagically be wrapped under a nav element (make sure you selected your menu items), you may have noticed the " * " after the li, that tells Emmet, just wrap each individual menu elements under a li, removing the it will only wrap all of them under one 'li' element.

That's it for part one of this series, for more shortcuts, be sure to read the documentation. Next up we will look at how to use Emmet to write faster css, if you are having trouble getting anything done,just leave a comment below and i will try to help, otherwise, happy zen coding.