Value Interpolation in JavaScript Code using Pug

Watch out! This tutorial is over 6 years old. Please keep this in mind as some code snippets provided may no longer work or need modification to work on current systems.

Interpolating values is helpful if you need to pass a server-side variable to client-side JavaScript (or other languages that require it).

In the case of variables, numbers, strings, and the like, you can pass these types of variables directly into your JavaScript with bracket syntax plus an explanation point (so that the code inside the brackets is not evaluated.) This is useful for parametrizing JavaScript code that require something from your server.

Continue reading

Server Side Variable Interpolation with Pug

Watch out! This tutorial is over 6 years old. Please keep this in mind as some code snippets provided may no longer work or need modification to work on current systems.

It’s possible to pass variables from your server into Pug for dynamic content or script generation. Pug templates can access variables passed to the res.renderfunction in Express (or pug.renderFile if you are not using Express, the arguments are identical).

Continue reading

HTML Element Interpolation with Pug

Watch out! This tutorial is over 6 years old. Please keep this in mind as some code snippets provided may no longer work or need modification to work on current systems.

Further to our previous tutorial, sometimes it may be necessary to nest HTML tags inside of each other. Element interpolation with Pug is done in a syntax similar to variable interpolation; square brackets instead of curly braces are used here.

Continue reading

Getting started with Pug template engine

Watch out! This tutorial is over 6 years old. Please keep this in mind as some code snippets provided may no longer work or need modification to work on current systems.

Clean and organized HTML is what Front-end Developers always aim for. Well with Pug (formerly known as “Jade” ),  a high performance and feature-rich templating engine, that’s easy to achieve. Simply put, Pug is a clean, white space/indentation sensitive syntax for writing html.

Continue reading