Skip to main content

Microflash: Version 2

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.

Home Page (old on left, new on right)
Home Page (old on left, new on right)
Post (old on left, new on right)
Post (old on left, new on right)

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.

Lighthouse scores
Lighthouse scores

Small carbon footprint

The carbon footprint of the previous version was already small. The redesign reduces this even further.

Carbon impact estimates
Carbon impact estimates

Behind the scenes

Even bigger changes happened behind the scenes.

What else?

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