Whatever your text editor of choice (I just can’t quit you Atom) there is a wide range of plugins to enhance its capabilities. One such plugin that I use constantly is Emmet.
Emmet can be used for a number of things, but where it really shines is speeding up my HTML production. Emmet uses a CSS like syntax to quickly produce common HTML code.
The most common situations I find myself using it is when I initially create an HTML document. To do this you just type ! and hit tab. The result will be:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>Perhaps most useful of all is adding repetitive blocks of HTML like lists. Just type ul>li.lego{Awesome}*10 then hit tab and you’ll get:
<ul>
<li class="lego">Awesome</li>
<li class="lego">Awesome</li>
<li class="lego">Awesome</li>
<li class="lego">Awesome</li>
<li class="lego">Awesome</li>
<li class="lego">Awesome</li>
<li class="lego">Awesome</li>
<li class="lego">Awesome</li>
<li class="lego">Awesome</li>
<li class="lego">Awesome</li>
</ul>Or you can get super fancy and nest all sorts of things. Give something like this a go. Type div.awesome>(header>ul>li.item$*5>a{Awesome thing $})+footer>p{Awesome} and hit tab. Boom you get:
<div class="awesome">
<header>
<ul>
<li class="item1"><a href="">Awesome thing 1</a></li>
<li class="item2"><a href="">Awesome thing 2</a></li>
<li class="item3"><a href="">Awesome thing 3</a></li>
<li class="item4"><a href="">Awesome thing 4</a></li>
<li class="item5"><a href="">Awesome thing 5</a></li>
</ul>
</header>
<footer>
<p>Awesome</p>
</footer>
</div>As you can see, once you learn the basic structure, everything is awesome with Emmet.