Cutting down: say hello to ES modules on this site!

I’m pretty happy with all the background work that’s been happening in getting this site to depend on fewer and fewer moving parts and external dependencies. Eventually, I want to rely as less as possible on Eleventy itself in an effort to stay portable.

Here’s some more things I’ve done lately: [1]

A huge lap on the circus that is removing TailwindCSS.

I started this process months ago. So, yes, it’s a circus.

I’ve talked about removing TailwindCSS before and I’ve been making strides in that process slowly. Almost all of my site now uses BEM naming pattern (is it well done? I don’t know). The next step would be finish my own CSS system and boot out TailwindCSS completely.

As of right now, there should be almost no perceptible changes. Assuming I have done this all correctly.

On the positive side of things, this did teach me something…

Just like we build insulation layers in our JavaScript/any-other-programming-language software by providing an interface rather than accessing an external dependency directly, we should do it for HTML/CSS too. I could have started with BEM classes and still used TailwindCSS through the stylesheets (which is now the current state of things).

I’m no genius, but this would be somewhat akin to a facade design pattern. The underlying styles can keep changing while still providing the same API to the HTML templates/views!

No more guest comments.

Kev Quirk chimed in on Mastodon about guest comments and I think he’s right – it’s just unnecessary headache. I did start to get loads of spam submissions this last month; no surprise there! Its removed now; poof!

If you wish to comment and don’t have a Twitter account or a Mastodon account (responses on those networks get backfed here), drop me an email instead.

Moving to ES Modules.

The biggest change with surprisingly little effort: moving to ES modules. Browser support is fairly good and I’ve been told it’s time already I made this change by Darshak Parikh.

You can now have a look at my shoddy JavaScript skills just by clicking view source, like the good old days.

TyChi and Paul Kiddle have been phenomenal in inspiring me, intentionally or unintentionally, to make changes such as this one. The web should be simple, and accessible to new developers. I have a feeling these ideas are going to flow through to my other work and I’m really excited. 😊

To give you some more perspective, I’ve been able to cut out roughly 20 direct dependencies from my package manifest. Twenty! [2] Who knows how fewer the dependencies are, now, when you look at the dependency tree? Given the nature of the Node ecosystem, hundreds?

There’s now also a script to generate lodash’s debounce function as an ES module that I can directly include at runtime. Happy days!

"lodash:build": "lodash modularize exports=es include=debounce --production --output public/assets/js/lodash",

No more bundlers, minifiers, or uglifiers. All gone. There’s no React/Preact/Svelte/SPA here anyway, so anything else was overkill for a while now; especially since I had removed Preact about a month ago.

I’ve also moved to yarn — long due after Nathan DeGruchy had re-educated me on Mastodon back in November 2020 about how yarn is the more “open-source” option of the two (the other being the default: npm).


This is Day 006 in my 100 Days To Offload.

Footnotes

#fn1 The last, little thing I need to do is implement my hamburger menu in pure CSS. Hopefully I’ll get around to it soon?

#fn2 Granted some of these were also a result of other, unrelated cleanups: I wasn’t aware I ended up using two date libraries through the course of 2020: luxon as well as date-fns. I’ve let the latter go in favor of luxon as I find the API a bit easier to use in comparison.