This is the new version of my website. It's the fourth version, and while not very different from the previous iteration, it has a few changes that I think might be interesting to explain a bit: how it uses ES6 features to build behind the scenes, and how it uses custom elements and new JavaScript features on the front.

Previously, on clicktorelease.com...

The previous version was broadly structured this way:

• it was built with a node js 6 script, using packages like fs or webp-converter.
• most of the subprocesses like minifying, copying, etc. would be done via exec calling installed CLI tools.
• the script would read the structure of work, blog posts, talks from different json files and iterate through all of them, loading templates and stamping the final pages: header, content, footer.
• the templates were files with strings, and the script would match pieces to replace with regex, like finding /<img thumb-lazy src="([\S]*)"[\s]*\/>/gmi; to add to the list of images to create thumbnails and webp versions.
• the webp and jpg version of the images with variable quality would be generated with web-convertt and mozjpeg
• the thumbnail was generated with my own library to calculate the blurred image via DCT transform.
• finally it would generate a new bundle, version it, and update the service worker with the new version.

New site

So this was working, but eventually there was a big issue: the site was rebuild from scratch so images were processed every time. With more and more articles, the script took longer and longer every time. So the solution would be to improve the process and add caching, but I kept putting it off and stopped updating the site. I started using GitHub pages for most content.

So during lockdown 2020 I decided to pick it up again and start doing those improvements. The new site was going to be slightly different:

To begin with, it's ES6-only: the previous version was coded in ES5 and build to be compatible with IE and such. This time it's going to be just ES6, async/await, arrow functions, the works. What is supported by current modern browsers, considering they're up-to-date. That means using modules instead of scripts, using custom elements where necessary, and no shims, polyfills or fallbacks. The only fallback is going to be for no JS.

Next, the code in v3 was bundled and included in each page. This time, each module is going to be its own filel, minified, and included only in the pages where it's needed.

Finally, It's going to support blurred thumbnails, lazy loading, quality control over bad connections, dark mode support.

Let's take a look at each part.

Building from pieces

Comments