How to Become a Faster Programmer

Want to take this info with you? Download the Level Up WP Emmet Cheatsheet!

What is Emmet and how will it help me be a faster programmer?

As showed by the many questions and blog posts floating around the Internet, most programmers want to be faster.  It’s a popular question among developers. For web developers, there’s one method that I’ve found to work every time. Known as “the essential toolkit for web developers,” Emmet helps you write code faster by expanding HTML and CSS snippets into full code.

If you’re wondering what that means, just head over to emmet.io and check out the demo video.

Go ahead, I’ll wait…pretty impressive, right?

With Emmet, typing angle brackets and tags is a thing of the past.  Using this new tool allowed me to code as fast as I could think. I no longer dreaded long lists of items or nested children elements.

Ready to try it? Let’s get going.

Installing Emmet

Emmet works with an impressive number of text editors and online services.

Emmet Downloads

For a full list, head over to the Downloads page.  Grab the plugin for the editor of your choice and follow all the download instructions.

In my case (Sublime Text), Emmet links me to a GitHub repo with installation details.

Once you think you have everything configured, jump into an HTML file, type div.emmet-works, hit the Tab key, and it should expand to <div class=”emmet-works”></div>. If your snippet expands, then you have Emmet installed and configured!

If it didn’t expand, make sure your editor knows you are in an HTML file.  In most editors, this means the file has a .html extension or the file is set to HTML type.  You can verify that in Sublime by looking in the bottom right corner of the window.

HTML File in Sublime

If snippets still won’t expand, double check that you followed all steps in the installation instructions.

Otherwise, let’s start using this powerful tool.

General Syntax

Emmet abbreviations are just the CSS selectors you would use to target the element. As you saw above, that means div.class-name will turn into <div class=”class-name”></div> when expanded.  Likewise, div#emmet will turn into <div id=”emmet”></div> when expanded.  All without typing a single angle bracket!

You can chain these selectors together to create more complex elements.  div.class-name#id-name would generate <div class=”class-name” id=”id-name”></div> when expanded.

For attributes more uncommon that classes and id, you can also expand custom attributes.  For example, p[title=Hello] would become <p title=”Hello”></p> when expanded.

Likewise, you can also insert text into the elements you are creating by including the text in curly braces.  For a clickable link with text, a{Click me} becomes <a href=””>Click me</a> when expanded.

Example: Starting an HTML template

Emmet’s killer feature is how much code writing it can save you.  This is never more evident than when you are starting a new HTML file.  When in an HTML file, type ! and it will expand into a HTML boilerplate:

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

</body>
</html>

This is great for getting started and sets you up to start building out your HTML template.  From here, you can add scripts and stylesheets in the head.  link and script:src will expand to <link rel=”stylesheet” href=”” /> and <script src=””></script>. If you need to manipulate the viewport, meta:vp will expand to <meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″ />.

Children, Siblings, Multiplication and Numbering

Once you have your initial HTML structure set up, you need to start populating it with elements.  As we looked at earlier, Emmet shortcuts look just like their CSS counterparts.  This means we can nest child elements, construct sibling elements, and more!

div>p will nest a paragraph tag inside a div, resulting in <div><p></p></div> when expanded.

div+p will create a pair of sibling selectors, resulting in <div></div><p></p> after it’s expanded.

Even more powerful is the multiplication feature, which generates more elements in even less time. For example, to generate 5 divs, you would just need to expand div*5.

When you’re expanding many elements, you may need to assign unique information to each of them. For example, 5 divs with unique, numeric-based IDs.  div.number-1$*5 will product the following:

<div class=”number-1></div>

<div class=”number-2></div>

<div class=”number-3></div>

<div class=”number-4></div>

<div class=”number-5></div>

You can combine all these techniques to build out complex elements with much less typing and in much less time.

Example: Populating a List

We can put all these concepts together to create a nav bar.  Keep in mind you don’t have to write this entire string all at once.  You can write the outer containers, expand them and then write the inner elements.

We can construct a basic nav bar with the following string (taken from Scotch.io):

nav.navbar.navbar-inverse>div.navbar-header>a.navbar-brand{Crazy Fast}^ul.nav.navbar-nav>li.menu-$*3

which would result in the following HTML:

<nav class=”navbar navbar-inverse”>
<div class=”navbar-header”><a href=”” class=”navbar-brand”>Crazy Fast</a></div>
<ul class=”nav navbar-nav”>
<li class=”menu-1″></li>
<li class=”menu-2″></li>
<li class=”menu-3″></li>
</ul>
</nav>

You can see all the concepts we’ve just discussed.  This gives you an idea of how these shortcuts can interact and help you become a faster programmer.

Common CSS Shortcuts

Besides just being able to expand HTML, Emmet can also help you with your CSS. There are preset snippets for almost every CSS property available.  For a full list, see the Emmet documentation.

CSS snippets work the same way as the HTML snippets we saw earlier.  With CSS snippets, Emmet will sometimes pre-fill the most common values for you. tt will expand into text-transform: uppercase;, with uppercase highlighted so you can change it if need be.  Likewise, cl will expand to clear: both;, with both highlighted in case that’s not what you want.

Example: Vendor Prefixing

If you still write vendor prefixes in your CSS, Emmet can handle that as well! Prefix your CSS snippet with a dash and the resulting expansion will include vendor prefixes.  For example, -bdrs will expand to the following:

-webkit-border-radius: ;

-moz-border-radius: ;

border-radius: ;

Bonus Tip: Adding Custom Snippets

If you love the power of Emmet and want to use it for code other than HTML and CSS, custom snippets are your solution.  Within Sublime Settings you can define an extension path.  Once you’ve defined your extension path, you can add JSON for any custom snippets you want to define.  This could look like the following (sourced from Josh Nederveld):

{

    “snippets”: {

      “css”: {

        “snippets”: {

          “mza”: “margin: 0 auto;”

        }

      }

    }

}

You can see full documentation on further customizing Emmet in the docs.

Wrapping Up

Now you’ve seen how Emmet can speed up your development workflow and make you a faster programmer.  You’ve seen how to expand HTML tags, CSS properties, and even your own snippets.  With Emmet in your toolbelt, it’s easy to cut your development time in half, or even further.  Now go put Emmet to work and let those fingers fly!

Comments

comments