After more than three years since its inception, here’s the redesign of this site. There were three motivations behind this redesign: improving accessibility and performance, consistent design, and faster local development.
So, what’s new?
I overhauled quite a few things.
New layouts
Layouts now emphasize the content and semantics around the content.
New design system
This site uses a new design system with sane defaults, a more perceptually uniform color system, and calmer contrast. This design also respects your preferences on themes and even lets you customize some aspects (like text size) to make the reading experience pleasant and comfortable.
Prescriptive amount of JavaScript
I have also cut down the amount of JavaScript being shipped to the browser (from ~300 KB to ~70 KB). This is because the site is no longer a Vue SPA. Instead, it is mostly static with some interactive elements (for example, search, theme switcher, text resizer, etc) thrown in. As a result, the pages load faster, consume less memory, and are less of a burden on your network and device.
Improved accessibility
The new version has an all-green Lighthouse score. The score aside, I have added skip links on each page, pronounced outlines for links and buttons, and necessary ARIA attributes to make the site accessible.
Small carbon footprint
The carbon footprint of the previous version was already small. The redesign reduces this even further.
Behind the scenes
Even bigger changes happened behind the scenes.
- Switch from Gridsome to Lume: Gridsome hasn’t been maintained for a while and it stopped working on my local last year. I evaluated multiple frameworks before I settled on Lume.
- Switch from Node.js to Deno: Lume is built for Deno, an alternative runtime for JavaScript and TypeScript. With the latest surge in ESM adoption, Deno has finally become a lot more pleasant to work with. It also helps that there’s no package manager involved and mixing JavaScript and TypeScript is seamless.
- Switch from Vue to Alpine.js: Firstly, Vue is an awesome framework and I enjoy working with it. However, for the little JavaScript I needed for theme switching, search, etc, it’s an overkill. That’s why I used Alpine.js which fits my need and is pretty lightweight.
- Switch from CIELab to OkLab: The original color system of this site was based on CIELab, with which I consistently faced trouble dealing with the contrast at small text sizes and the infamous purple hue shift. I was looking for a color space to design new themes which were beautiful to look at, perceptually uniform, and accessible. OkLab provided a great alternative while I experimented on colors using Leonardo.
- Switch from Shiki to Starry Night: Although Shiki served me well in the older version, it never worked for me on Deno. Starry Night uses the same syntax highlighting engine and works well with Deno. It is also easier to customize since the themes rely on CSS properties (which are used extensively on this site).
What else?
- The markdown on this site is parsed by Remark and the HTML from the markdown is generated by Rehype. Lume didn’t support either of them at the time I was building this site. So I added Remark / Rehype support in Lume.
- There was no Remark / Rehype plugin to integrate Starry Night while I was building this site. So I created and published a plugin to add this support.
- I also wrote a library to parse codeblock metadata so that I can add support for line highlighting and captions on codeblocks.
With this, I am going to focus more on writing content for this site. I have a huge backlog of drafts and notes that I’ll be refining and making them public here. Also, I can finally break the design loop (for now).