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.

Jade is an HTML templating language. Actually, it is not only for HTML because it also provides an extension to writing javascript. Let me show you HTML vs Jade. One word of warning: If you intend to use PHP, don’t use Jade. It is javascript friendly, and unfortunately doesn’t play well with <% php> tags.

HTML — Example 1

<body> 
<h1>This is a header</h1>
<div class="container">
<h1>Headline 1</h1>
<p>Yes, this is pretty cool.</p> </div>
<div class="container">
<h1>Headline 2</h1>
<p>Life is good.</p>
</div>
</body>

Jade — Example 1

body 
h1 This is a header
.container
h1 Headline 1
p Yes, this is pretty cool.
.container
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.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.