Article | Posted on March 2021

Building the new site with ES6 and Custom Elements

Reading time: 10 minutes

Topics: ES6, Custom Elements, Web Workers

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

The previous version was broadly structured this way:

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