I’m a big fan of the static site builder Eleventy. I’ve found the ability to put together a small site or landing page with minimum effort and complexity to be extraordinarily useful.
(Eleventy is fundraising at the moment! If you use it and can help out, head over to their site and give them some money. This blog post will still be here once you’re done.)
There are others – Eleventy is just the one I prefer – but one thing they share in common is that things tend to be great right up until you need just a little bit more from your front end JavaScript.
For these kinds of projects I’ve been experimenting with using module CDNs like esm.sh instead of a build system.
It works. For the most part.
But, I wanted something that would simplify the process a bit, so I put together a no-frills web-based tool that calculates module bandwidth sizes for me and more: Basic, Beautiful, and Buildless
From the intro page:
- Figure out the correct URLs for loading the package from a CDN like
esm.sh.- Pinning their version to ensure you will consistently get the same package even though new versions get released.
- Load them safely, using subresource integrity (SRI) hashes that prevent the browser from even loading them if they’ve been changed.
- Map them to friendly package names you can use in your scripts using import maps.
- Automatically include a polyfill for import maps so you don’t have to create a separate bundle for older browsers.
- Create
modulepreloadlink elements for every dependency module that a package imports to minimise the performance impact of not bundling everything.- Calculates the overall payload size of each individual packages so you know what you’re in for even before you add it to your project.
I’ve also found it useful to get a quick calculation of how many KiB a dependency might be. See, for example, the results for dompurify.
It’s a hastily-hammered-together first version, so expect bugs and other weirdness, but it’s something I’m personally finding helpful.
Have a look at the intro page to get more details on what it’s about.
Test it, see what you think, and if you find an issue, let me know.
The title of the site – Basic, Beautiful, and Buildless – is a riff on the original tag line used to promote Yashica’s no-frills SLR FX-3 when it was first launched in 1979: “Basic, Black, And Beautiful”. A used FX-3 was my first SLR when I started to take photography seriously as a teen, so I have some nostalgic feelings towards it.