Using Jade (Pug) to preprocess HTML
HTML looks like soup as you create complex layouts. You have to use opening <tag> and closing </tag>. They are everywhere and you can’t forget to close one. Okay, I know that if you’re using a text editor like sublime text, it sort of takes care of these problems with plugins. Jade Templating language, now known as Pug, transpiles into HTML and fixes this issue.
HTML — Example 1
<h1>This is a header</h1>
<p>Yes, this is pretty cool.</p> </div>
<p>Life is good.</p>
Jade — Example 1
h1 This is a header
h1 Headline 1
p Yes, this is pretty cool.
h1 Headline 2
p Life is good.
Compare the examples above. Instead of closing tags, Jade relies on indentations. Indentations seem much more intuitive to the eye in seeing parent-child relationships between elements.
Go ahead, go to HTML2Jade and play with the two formats yourself.
The other advantage of using Jade is that it supports partials. This means that if you’re making a static website, you can re-use the same code in your pages. Where is this useful? How about the navigation menu. You’ll likely have the same navigation menu for all your pages, so when you add a new link to it, you don’t have to update all your pages. The partial feature part of Jade will update them for you and keep your code DRY (Do not Repeat Yourself).
I’ve noticed a difference in comprehending the page when using Jade in my code. I open the document, and I can quickly understand what is going on.
Since Jade is a templating language, that means that it must be preprocessed before you get an output HTML file. I really like using Prepros to automatically process any Jade files in my selected watch folder. The other great thing about PrePros is that it automatically refreshes the browser for me when it detects changes to the document. If you’re on a Mac, you can use CodeKit.
Originally published at www.basicdrop.com on October 19, 2015.