![]() I publish a few articles and tutorials each week, please consider entering your email here if you’d like to be added to my once-weekly email list. pug file looks like, and why a template engine is important in web development. Hopefully, you can now understand what Pug.js is, what a. You can view the weather website full code (using Pug) on Github. With Pug, you can’t copy HTML from anywhere, you have to convert everything to Pug before you can use it.The slightest mistake in your formatting/indenting/spacing means big problems for your code. Most importantly, we can write JavaScript that actually (almost/kind of) looks like JavaScript within our pug files.There are even shorthands for classes (.) and IDs (#) Pug makes use of indentation to determine the nesting of tags. This greatly improves code-readability and streamlines projects with multiple developers. When you write with Pug, you write code that looks like paragraphs.Switching from EJS to Pug brought our code down from 27 lines to just 17!. ![]() ejs file looked like in my last tutorial: Set up your view engine: app.set(‘view engine’, ‘pug’).Install Pug into your project: npm install pug -save.Recall the following code from my: Build a Weather Website in 30 minutes with Node.js + Express + OpenWeather tutorial where we used EJS as our template language: // TERMINAL npm install ejs -save // SERVER.JS app.set('view engine', 'ejs') The same way we use other template engines. ![]() In short: At run time, Pug (and other template engines) replace variables in our file with actual values, and then send the resulting HTML string to the client. To understand Pug, you need to remember that the browser reads HTML and CSS and then displays formatted images and text to the client based on what that HTML and CSS tells it to do.Ī template engine allows us to inject data and then produce HTML. I strongly encourage you to check out those links before proceeding. Here is the tutorial, and Here is the full code on GitHub. In this tutorial, we’re going to be examining a weather website that I previously built with Node.js, Express JS, EJS, and OpenWeatherMap’s API. Pug is a template engine for Node and for the browser. But for expressions and raw code, pug-js uses JS, and pug-php uses PHP. Pug-js and Pug-php provide both, a HAML-like syntax for markup and some abstraction of the language behind it (loops, conditions, etc.). I laughed at this picture for a long time - via Prerequisites First remember pug-php is a PHP template engine. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |