DEV Community

Cover image for Pug in 5 minutes

Pug in 5 minutes

Jhey Tompkins on May 13, 2020

What is it? A template engine for node and browser environments. It uses an indent sensitive syntax allowing you to write clean markup ...
Collapse
 
marcusatlocalhost profile image
Marcus • Edited

I love pug (since jade days) and especially the markdown filter is neat for simple content that might need some more complex html.

pugjs.org/language/filters.html

:markdown-it(linkify langPrefix='highlight-')
  # Markdown

  Markdown document with http://links.com and

  ` ` ` js
  var codeBlocks;
  ` ` `
script
  :coffee-script
    console.log 'This is coffee script'
Enter fullscreen mode Exit fullscreen mode

someone wrote an article about it here: dev.to/patarapolw/pug-with-markdow...

PS: I'm using the php pug port :D which is a bit weird, but works well.

Collapse
 
jh3y profile image
Jhey Tompkins

Yeah, me too! 😅

I've never really used filtering though. I'll definitely give it a look 👍

I was unaware of some of the ports and packages that have come out. Yet to try out the React integration 😎

Collapse
 
jsn1nj4 profile image
Elliot Derhay

Is the port weird or is using it in PHP weird?

Collapse
 
marcusatlocalhost profile image
Marcus

It was weird that the php port comes with the full node package - in case node is available (if I remember right) and it's weird because the handling of variables was not 100% consistent. Sometimes you had to write $var['key'] - but maybe these problems are solved now, haven't installed it for quite some time.

But else, it rocks.

Thread Thread
 
jsn1nj4 profile image
Elliot Derhay • Edited

Oh so it still requires Node to run and provides a $var array for variables? That is weird. 😕

Thread Thread
 
marcusatlocalhost profile image
Marcus

No no, it doesn't require Node at all! The information I gave was probably old or misleading.
I know their goal was to make it 100% compatible with the Node version, so I'm sure everything in the Node version, works in the php version.
github.com/pug-php/pug

Collapse
 
jpkeisala profile image
Jukka-Pekka Keisala

I have done one project with Pug but I went back to HTML because it did not improve my productivity at all. I don't buy saving keystrokes since IDE's have code completion on HTML. Instead with pug I get constant indentation problems and it was harder to read that colour coded HTML in the IDE.
Pug just did not sit on my tooling at all.

Collapse
 
jh3y profile image
Jhey Tompkins

Totally get that it's not for everyone 👍

For me, I've not had a great experience of relying on IDEs for things like that 😅 However, I imagine if I was to give emmet a serious try, that could work out.

I try to split things up atomically where possible and use a rainbow indentation extension 😅
For me, it saves me a bunch when I'm working on demos etc. It's rare I use it for work though.

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

It is only partially about indentation, but also about closing tags.

Does any human (not html linter) needs named closing tags. Why not just closing brackets, or nothing (using indentation instead)? Like, I love build.gradle more than pom.xml.

Collapse
 
jh3y profile image
Jhey Tompkins

Yeah 💯

It's an interesting topic. Reminds me of this article about optional HTML and what the browser will put in for you if omit closing tags.

Funny how the thought of .xml to me seems more awkward than .html although they are similar syntax 😅 It's likely the thought of huge configuration exports from programs, etc.

Collapse
 
surjithctly profile image
Surjith S M

How do I convert this to pug?

  <div class="words">
      <span style="animation-delay:1ms">Lorem</span>
      <span style="animation-delay:1.8s">Ipsum</span>
      <span style="animation-delay:3.6s">Sit</span>
      <span style="animation-delay:5.4s">Amet</span>
      <span style="animation-delay:7.2s">Text</span>
      <span style="animation-delay:9s">Random</span> 
    </div>
Collapse
 
iamntz profile image
Ionut Staicu

Who wants an unpopular opinion? Nobody? Ok, here it is: template engines similar to jade, pug, haml & co sucks and should be avoided like plague.

Adds unwanted complexity to a fairly simple concept (basically if you're familiar with XML, you can dig HTML too), make things harder to debug, impose some limits and rises the entry point for beginners.

Collapse
 
jh3y profile image
Jhey Tompkins • Edited

It's fine. It's your opinion 👍🙂

Collapse
 
sm0ke profile image
Sm0ke

Nice, thanks for writing. PUG is such a great engine.
Super flexible and minimalistic.

Collapse
 
jh3y profile image
Jhey Tompkins

No problem! 😎
Yeah, I'm a big fan of it for my demo work. Think it's a great fit. Especially when wanting to generate random markup.

Collapse
 
jh3y profile image
Jhey Tompkins

It's definitely a personal preference 👍 It's not for everyone.

I've rarely worked in teams using "indent-based" syntax. But, I find it great for working on my own demos, etc. In these scenarios, it's only me working on the code 😎

Collapse
 
adnanbabakan profile image
Adnan Babakan (he/him)

Thanks for this great post
Although PUG seems pretty cool in practice but I think it is not that much effective and efficient in production and real world.

Collapse
 
jh3y profile image
Jhey Tompkins • Edited

No problem! 😎
Thanks for your reply. Yeah, it's cool. There's even a React integration now.

By "production and real-world", do you mean "work, commercial, etc."? I completely get this.
I'll admit, I've rarely used it for work. For one, it would require everyone in a team to be using it. I guess it was a similar thing with CoffeeScript. Potentially more risk of error and not everyone likes using indent based syntax.

That said I find using it very effective and efficient for all of my side projects, demos, etc. 👍 Pretty much the majority of my work on CodePen uses .pug.

Collapse
 
shinigami92 profile image
Shinigami

And if you need pug to be formatted... just use my prettier plugin <3

github.com/prettier/plugin-pug