Write HTML faster

Posted on 24/01/2016

TL;DR: real-time Jade editor. Click here to see it in action.

Unless you are working with a templating engine that streamlines HTML, chances are that you have to write pure HTML often - from testing snippets and forms to full layouts. This is because most of the template engines will not change the way you write HTML itself, but will just limit the amount of logic you have available.

One of the most well known engines is probably the one used in Django. It is probably also the most important one, as it inspired the creation of a myriad of other templating engines and implementations in other languages. On the bottom line, Django uses pseudo-code in templates, in order to avoid dealing with something that has higher chances of bringing the site down or presenting a security vulnerability (e.g. printing unsanitized user input), such as raw Python code.

On the other side of spectrum, there are Haml and Jade which are not only used for limiting the logic you have in the templates, but also change the way you write HTML. Even though they might look more advanced at a glance, they are very easy to pick up. Templates can look messy if the blocks are more complex, but both Jade and Haml are unparalelled when it comes to writing simple HTML.

I personally find Jade syntax to be much more natural to write. In order to speed up writing HTML, I put up a real time editor that translates Jade syntax into HTML output. The advantage of this is that you don't necessarily need to have Jade running in your project (which is sometimes impossible or impractical) and all you have to do is to open the editor and type Jade syntax.

You can use the editor here or browse the source code.

Here's a quick example:

  1. !!!
  2. head
  3.   title My website
  4. body
  5.   #page
  6.    header#header-main Header
  7.    main#content-wrap
  8.      aside#right Sidebar
  9.      section#content Content
  10.    footer#footer-main Footer

Corresponding HTML:

  1. <!DOCTYPE html>
  2. <head>
  3.   <title>My website</title>
  4. </head>
  5. <body>
  6.   <div id="page">
  7.     <header id="header-main">Header</header>
  8.     <main id="content-wrap">
  9.       <aside id="right">Sidebar</aside>
  10.       <section id="content">Content</section>
  11.     </main>
  12.     <footer id="footer-main">Footer</footer>
  13.   </div>
  14. </body>

To read more about Jade, click here. If you are interested in having something similar as an editor extension, check out Emmet. It's available for Sublime Text, Atom and many other text editors / IDEs.