Jade/Pug : enabling quick HTML coding .

Image for post
Image for post
Jade a templating engine

Jade is a programming language which generally builds/compiles HTML. It brings totally new syntax inside of HTML. Personally I prefer writing jade language is, it can be easily read and understandable. Moreover its so quick to code.

Jade is so cool, it gives us its usage to write markup in a new way with a hand full of advantages over just plain HTML. Jade syntax must be properly cared while writing as because it is case sensitive and relies hugely on indentation.Jade is also well known as brother of Haml.

div
h6 Jade is clean and elegant programming launguage
ul
li elegant
li clean
p.
I personally love coding my front end web-flow using jade, sass, yeoman, Gulp and Bower.

Now, Lets look how it is compiled to :

<div>
<h6>Jade is clean and elegant programming launguage</h6>
<ul>
<li>elegant</li>
<li>Clean</li>
</ul>
<p>I personally love coding my front end web-flow using jade, sass, yeoman, Gulp and Bower.</p>
</div>

Looking at the code difference. Jade is far more clean,fast,elegant and much efficient language to be used.We need not worry and care about the closing braces and overall is a beautiful coding structure :)

Jade has some really neat features, allowing us all to write reusable and modular markup.So lets discuss about what Jade have to give us.Lets start with basics.

Any text wrote at the front/beginning of the code is regarded as tags.The advantage of Jade is its does opening and closing tags for us.Jade uses indentation (white-spaces) to determining how tags are nested unto each other.

Body div.main
h1 this is a jade language
p jade is cool

div
footer please try using jade

This is output as :

<body><div class="main">
<h1>this is a jade language</h1>
<p>jade is cool</p>
</div>
<div>
<footer>please try using jade</footer>
</div>
</body>

Adding attributes to our class is rather easy in Jade.

div.music#rocknroll
h1.music_alive rocknroll-bands
img.poster(src="/img/band.png")
ul.bands
li Kiss
li The Who

This is output as :

<div class="music" id="rocknroll">
<h1 class="music_alive">rocknroll-bands</h1>
<img src="/img/band.png" class="poster">
<ul class="bands">
<li>Kiss</li>
<li>The Who</li>
</ul>
</div>

Lets assume we have a large paragraph text to be place inside a document file.As we discuss earlier event first letter is assumed to be a tag.So the question is how can we place a multiple line paragraph inside jade if the first letter in a first row is assumed as a tag.The answer is simple end the line of the paragraph with a full stop. eg:

div
p How is the day going on?
p.
Ya, its fine.
But i m bit messing around my design complication issue today.
Its a pretty headache.

After Compilation:

<div>
<p>How is the day going on?</p>
<p>Ya, its fine.But i m bit messing around my design complication issue today.Its a pretty headache.</p>
</div>

To avoid writing a whole code inside a single document which may create a confusion and irritation to the other developers/designers they have a extend template feature.It helps to extend a new separate file to a main file. eg:

// This is a Layout.Jade Filedoctype htmlhtmlheadblock titletitle Default titlebodyblock content

Now we have another file which includes our layout.jade file inside this main.jade file

// This is a main.jade file extends ../layout.jadeblock titletitle Article Titleblock contenth1 My Article
Image for post
Image for post

Other Smart Features:

Using JavaScript along Jade:

Using script inside of Jade is simple we just need to add is — before a script starts.eg:

- var x =4;
div
ul
- for (var i=1; i<=x; i++) {
li Hi!
- }

Output:

<div>
<ul>
<li>Hi!</li>
<li>Hi!</li>
<li>Hi!</li>
<li>Hi!</li>
</ul>
</div>

Jade provides cool looping script syntax inside it. eg:

- var friuts = ["mango", "blackberry", "pineapple"];
div
h1 tasty friuts
for name of fruits
div.fruits
h2= fresh-fruits

Output:

<div>
<h1>tasty fruits</h1>
<div class="fruits">
<h2>fresh-fruits</h2>
</div>
<div class="fruits">
<h2>mango</h2>
</div>
<div class="fruits">
<h2>blackberry</h2>
</div>
<div class="fruits">
<h2>pineapple</h2>
</div>
</div>

Jade has a simple way to deal with interpolation using text like this:

p= “Hello there, “ + myName + “. How are you ?”

- var profileName = "Ishan Manandhar";
div
p Hello there, #{myName}. How are you?

Mixins acts like a function which helps to take parameters as input and give markup as output. Is is initialized by mixin variable.

mixin thumbnail(imageName, caption)
div.thumbnail
img(src="/img/#{imageName}.jpg")
h4.image-caption= caption

We can u the defined mixin as:

+thumbnail("Hitman", "Classic one of my fav movie.")
+thumbnail("ToyStory", "All times fav animated movie")

I just covered the basic level to get starting with jade to get more into it I recommend u giving a look to their documentation site JADE

Image for post
Image for post
Jade is renamed to pug due to copyright issue.

Important: Jade is renamed as Pug due to copyright naming issue.

Jade can also be used as a command-line tool after installing it with the -g or — global option via NPM. For more info, see the official documentation.

Other learning resource:

Happy Coding :)

Written by

Product Designer and Frontend Developer | https://twitter.com/ishan02016

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store