Hey guys! I wanted to tell you about my current stack for this website because I have cute dog that appears when you mouse over the part about Pug.
Pug
I like Pug because it takes a lot of the verboseness of HTML away. Think Markdown but you can still actually do things with Pug. Yes, Pug is a little more verbose, but it makes up for it by allowing you to do more than a handful of things! The limitations of Markdown make me wonder why so many people like it. Anyway... I ❤️ Pug.
It has support, although, while creating this site, I just seems as though there is less support than before.
Parcel
Parcel is a site packager that supports Pug out of the box. Version 2 doesn't advertise it though. One of the reasons I think Pug is on the way out.
Vue
I'm not sure if Vue was a requirement, but when comparing it to React, Vue supports Pug.
Bootstrap
Not really a requirement, but I haven't looked into alternatives and I sort of know it.
NPM
I'm not sure why I'm even listing this. Seems projects suggest Yarn more than NPM. But I'm not having the best experience with either of them.
Issues (so far)
# 1 style(type=application/scss) errors
I was trying to use the correct type (I thought) when using Sass. It wasn't work and ended up creating a Github issue just to be told to use `type=text/scss`.
# 2 SVGs aren't properly minimized
I have to set `"minifySvg": false` in .htmlnanorc.
# 3 Pug imports wonky
If you have Pug templates or other external files several layers deep, the resolving of directories stop working. Either have to limit how you can layout your files or use "absolute" paths from the project root.
# 4 Sass variables not passed down
Actually, this might not be an issue. The idea is I want to define some Sass variables in a file and be able to use those in my pages and Vue components. I haven't tried too hard yet to get this to work. I have to read up on CSS modules.
# 5 CORS
On a couple of pages I want to load some external images and CORS gets in the way. I eventually just turned if off locally using `.proxyrc.js`
#6 - #8
TBD
# 9 segfaults
The Sharp imaging package causes segmentation faults. It can transform images during your build and I was looking forward to using imgsets and webp images.
# 10 strange imports
I think this is duplicate of #3.
# 11 No logging
Seriously. I tried turning on verbose logging, changing the log levels, using debug and nothing! `--log-level=verbose` doesn't seem to do anything
# 12 Some reporter is broken
When I was trying to increase logging, I set up some "reporters" and one just failed. I asked about logging and really didn't get a satisfying answer.
# 13
I was trying to put a countdown timer on my site and had to resort to directly depending on a forked repo.
"countdown": "git://github.com/mckamey/countdownjs.git#1902fb23d21d84958b302c117fe472634a5bcf52",# 14 Can't use styling in <head>
I *have* to use an external stylesheet because of a bug where Parcel doesn't seem to honor the configuration in `.cssnanorc`.
# 15 cssnano
I have to turn off minifyGradients because of a bug in cssnano which removes the first stop in gradients. Or use the workaround: use a really small decimal like .0001px
# 6 - 8 Syntax Highlighting
I'm using Visual Studio Code
to code front-end apps and found the Pug syntax highlighting failed in the case where a script tag had the type attribute set to "module". It isn't the end of the world, but annoying enough I went down the path of trying to fix it. I went to the VS Code documentation site and searched for syntax highlighting and found this guide. I tried to injection grammar but I didn't know what I was doing so I had to give up on that. (How am I was supposed to know what value to "injectTo"?) So I poked around in the application source and found pug.tmLanguage.json. From there I was able to find the section that deals with Javascript and add in some regex to allow "module". But it simply said that not to reject the script if it found "module" -- it didn't highlight the attribute nor value. At the top of the file is a disclaimer:
So I perused the repo and found that someone had already created a PR that correctly colored what I hadn't. It was opened in 2019. Ugh. So I think the repo is abandoned.
Tests
I wasn't worried about tests until I push out my site with a broken link, navigation broken, and posts not loading. I spent all last night working on it and it has come down to this: if I want to use Mocha I have to use webpack. Or I can switch to Jest. That's a story for another post.
Conclusion
When starting out, Parcel with Pug is easy and straightfoward. But man, anything beyound that and it gets yucky.
