TRICK to level up your HTML?

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

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!)

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.

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, 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

.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!! 😍️

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

This is the codepen version:

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 or their website pugJs or even github!

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 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"

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 :

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

.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:

res.render('home')

write this:

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

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

from this:

p This is a desc

to this:

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:

.simple__desc
    p= someStuff

to this:

.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 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 🤣️