
We’ll start by installing it from npm, go over its basic syntax and then look at several examples of using JavaScript in Pug. In this guide, I’ll demonstrate how to get up and running with Pug.

Pug makes it easy both to write reusable HTML, as well as to render data pulled from a database or API. It compiles to HTML and has a simplified syntax, which can make you more productive and your code more readable. Pug is a template engine for Node and for the browser. This can be a nightmare to debug and to maintain. HTML is also static, which means that if you want to display dynamic data (fetched from an API, for example), you invariably end up with a mishmash of HTML stings inside JavaScript. This is where the Pug HTML preprocessor comes in. And while this is not the most difficult task, it can often feel a little boring or repetitive. However, I would need to be careful not to have space between my elements.As web designers or developers, we likely all have to write our fair share of HTML. It makes more sense to have this be in the "presentation" layer of the application. My goal is to completely migrate to 100% Jade and use margin. If HTML ignored spaces completely, this would be a non-issue.

If you're designing pill buttons (buttons that group together, you either would need no space and no margin, or enough negative margin to compensate for a single space character). But, you have to choose between one or the other, because if you don't, you either end up with more space than you need, or too little space. If I don't want my buttons to butt-up next to each other, then I would either need to put a space character between them or add margin to them. The whole "separate from content and presentation" argument can only reach so far, especially when it comes to spaces.
