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.
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.
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 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).
- 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).