TRICK to level up your HTML?
Tags: html, pug, webdev, tutorial
Published: 2021-01-16 15:24:32

If you are lazy or curious you can watch the video version, please consider to subscribe, help me to reach 100 subs :D

{% youtube Csb1GaeSnPI %}

# Why you should care?

The first times writing HTML it's cool and nice but when you learn it and get used to it starts to be a lot annoying to write every time open tag, close tag and all those brackets!!

Now I would show you a way that let you **get the same result** (output) **with less code**, so you will not have to write the redundant part of HTML but only the essential!

#### THAT'S FANTASTIC (YOU WILL SAVE SO MUCH TIME!)

![HTML compared to PUG](https://dev-to-uploads.s3.amazonaws.com/i/1aqdqx8ld25git14w5oz.jpg)

# COME ON!! give us the trick!

I'm talking about PUG, a well known template engine! But now you may ask why i should use it why loosing time... first of all you really don't have to learn something new, let's see the main benefits.

![2](https://dev-to-uploads.s3.amazonaws.com/i/2zrevoqit9fphhug2zwk.jpg)
 
## Cleaner code 
As you can see on the first hand written image the code at the bottom it's a loooooooot cleaner and easy to understand; This applies so much when you have tons and tons of code.

## Faster Development Time
Insted of loosing time opening and closing brakets repeating tag names you will go a looooot faster (I know snippet exists) but it always better to write .my_class instead of a snippet IMHO :D

## More Power
Things doesn't end here, with pug you could use all the power of javascript, you could use conditions, loops, mixins, import other pug files, extend layouts and more...

# Let's try it out

If you want to jump right into it **without wasting even a second you could use [codepen.io](https://codepen.io/)**, open the website and you are ready to go!

On the homepage *press the "Start Coding" button* then from the **left cog near HTML click it and on the settings under "HTML Preprocessor" select "Pug"**

If you want to use SASS like me (since in my opinion they are amazing together) go into the left "CSS" voice on the Pen Settings or click the cog near "CSS" and choose "SASS" as Preprocessor.

## Let's test it out :D

```pug
.simple__block
  .simple__title
    h1 This is a title
  .simple__desc
    p This is a description
```

Super fast and super easy as you can see ;)

Time for some SASS code, I absolutely love that to write my sass code **I have only to copy the PUG code and put it inside SASS!!** 😍️

```sass
.simple__block
  background-color: blue
  .simple__title
    background-color: cyan
    h1
  .simple__desc
    background-color: purple
    p
```

This is the codepen version:

{% codepen https://codepen.io/aspiiire/pen/RwGqbjP %}

# Time to try it locally

For those who are convinced and want to try it directly into their PC now we are ready to do it. Prepare you terminal.

To install it **I will use node with express to create a local server**, but! but... **there are other ways to install it.**

Let's **start by creating a new folder** that I'll call install-pug, enter it and type **"npm init"**... follow with the instructions bla bla bla

We are **ready to install some packages**... you have many ways for the **instructions to install PUG** for example [nmpJs](https://www.npmjs.com/package/pug) or their website [pugJs](https://pugjs.org/api/getting-started.html) or even [github](https://github.com/pugjs/pug/tree/master/packages/pug)!

let's copy the install command **"npm i pug --save"** and throw it inside our terminal press enter and wait.......

Time to **go inside the [ExpressJs](https://expressjs.com/) website** and as before copy up the install command under **"Getting started > Installing"** copy **"npm i express --save"**

As before put it inside your terminal and press "ENTER"

![Gif pressing button](https://media3.giphy.com/media/139lMwJ9ow7bKE/giphy.gif)

# Time to CODE!!!!

To go fast(since this article is not about ExpressJs or node) **Let's copy up this code that i got from the ExpressJS website** :

```js
const express = require('express');
const app = express();
const port = 5000;

app.set('view engine', 'pug');

app.get('/', (req, res) => {
  res.send('Hello World!');
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
})
```

**I have added to it a line of code "app.set('view engine', 'pug')"** that let express know that you want to read PUG files instead of HTML!

**Open up your project with your editor**, I'll go with Visual Studio Code!

**Create a new file called "index.js" and paste inside it the code that you have just copied...**

Now **run you server by pressing "F5"** and let's see if everything is running our terminal should log a message with **"Example app listening at http://localhost:5000"**.

Open the browser and go into this address **you should see a Hello Word! String** :D

# Yeah ready to write pug code

**Create a new file under /views/home.pug** and write inside it some pug code for example

```pug
.simple__block
    .simple__title
        h1= someStuff
    .simple__desc
        p This is a desc       
```

**Go back into your index.js file and change the 10th line** from  **"res.send('Hello World')** into **res.render('home')**.

**Restart your server** and you will see that everything works great :D

# Bonus

You could pass data before you render your PUG file to do that you have to pass an object as second parameter let's see how

instead of this:

```pug
res.render('home')
```

write this:

```pug
res.render('home', {
    someStuff: 'Wow thats cool'
});
```

Now if you go into your home.pug file and change your p tag

from this:

```pug
p This is a desc
```

to this: 

```pug
p= someStuff
```

Restart and you will see the magic (This is not a feature of PUG though)

# Super Mega Bonus

It was long journey man, for me that I had to write all this stuff and for your that you had to read all this!!! (people that jump back and forth are not included 😅️)

Now let's see a simple example of iteration 

change your last class from this:

```pug
.simple__desc
    p= someStuff
```

to this:

```pug
.simple__desc
    - 
        const anotherVariable = 'some stuff';
        let i = 0;
    while i < 10
        p This is a desc
        - i++;
```

## Ooook now?

Now with this trick you have saved soooo much time, in the time that you have left maybe you could subscribe on my [Youtube channel](https://www.youtube.com/channel/UC9FtVivCn-y_YFIxffP-qXQ) since i'm new and looking for subs or maybe not 😅️

Jokes aside, if you want more tutorials like this let me know so maybe I can write some... or maybe not 🤣️