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. The example below shows how you can set up a layout with a header and footer.As web designers or developers, we likely all have to write our fair share of HTML. This is one way Pug allows you to follow a DRY (Don't Repeat Yourself) pattern when building things. This is beneficial for a few reasons: first, it saves lots of time because you don't have to write the same thing over and over (or copy and paste while checking formatting), and second because when an update is needed it can be done in one place. What that means is that you can write your header and footer once, then extend it where you want it. Then if you needed to update something down the road, you'd have to check EVERY SINGLE PAGE to make sure you updated it, lest you end up with broken links or images. Imagine a time when you built a website using plain HTML and had to copy and paste the header and footer to every single HTML file you wrote. I will explain what this means and why it's useful. If you've ever worked with something like Laravel, React, or even WordPress then this concept should feel somewhat familiar. Pug allows you to use inheritance to create a layout for the frontend and then insert blocks of data into the layout where appropriate.

That's what I will be talking about in today's post.

Those things are enough to get a frontend up and running, but there's still more to learn which can make your developer experience much better. So far in this series, I have covered basic templating and how to use logic when creating a frontend with Pug. Using the Pug Templating Engine Part 3 - Layouts

Pug template