New Website

Improved Performance

I've measured performance from day 1 and strive for it be a top feature, so currently most pages get scores between 90-100 on Lighthouse (see here) and https://pagespeed.web.dev/. However, some pages, particularly the ones with high resolution photos, get lower scores (but still reasonable, often around 80+). Additionally, it becomes a challenge when I enable third party scripts like Firebase and Google analytics

My previous website used Jekyll with static pages and had no SPA so it meant full page reloads when navigating between pages. The newer version uses React and Next with no page reloads but comes at the cost of a larger bundle size ~411 KiB (before third party scripts).

I will continue to find ways to reduce the size (using Preact instead of React took off 80 KiB but led to some unexpected issues so I'm back to using React).

Dark and Light themes

In 2022, it's fairly standard for websites and applications to offer users the ability to switch between dark and light themes, so I've added a toggle switch.

I've personally preferred dark themes on my desktop but if I'm ever in a bright environment (like mobile on my phone) then a light theme theme can be preferable.

Regardless, I think it's a good feature to provide the option, but as a developer it also means I have to strive to provide quality styles for both themes.

Accessibility

There's still a lot I am working on for accessibility but I've been making a strong effort by testing that the website can be navigatble without a mouse (i.e. keyboard only) and accessible through a screenreader.

Offline Support

This is something I'm still actively working on but I've added initial service worker support so that this site can still function offline at a basic level when there's no internet. However, I am still working on the supplementary features like the "add to homescreen" experience.

Updated Technology

The technology stack I've chosen is possible to change but after experimenting with GatsbyJS, Hugo and Docusaurus, I've settled on Next.js, React, TypeScript, MDX, and Tailwind, building on top of the excellent starter kit created by Timothy Lin. While it has its own issues, I've decided to give it a chance if anything so I can better understand the technology stack.

While GatsbyJS offered great performance out of the box with many of the features I wanted, I found it to have slow build times. Docusaurus offered great tooling and I really loved the built-in keyboard search component (provided through Agolia or self hosted through Typesense), but I found it focused more on documentation and lacked features I wanted in a personal development website.

However, I'm open to revisiting all of these technologies, especially as their ecosystems and features change. On the opposite end of the spectrum, I may challenge myself to create a website with minimal JS, libraries and/or frameworks, or more likely I may look into https://kit.svelte.dev/ or https://astro.build/.

Developer Experience

From an authoring perspective, I've enjoyed using MDX as I previously used markdown with my former Jekyll website so I was able to just copy and paste most of my former posts into my new site but also augment them with custom react components.

However, the journey to get here has not been pleasant and that's one reason I stuck with Timothy Lin's starter kit since it solved lots of the integrations I struggled to figure out myself (for example integrating MDX with Sass or performant syntax highlighting)

Managable Cost

The elephant in the room is why did I choose https://minh.lol as my domain? Well, a good reason was the $2 yearly registration cost, and it was a good way for my to try out https://vercel.com/ on a custom domain so I could compare it versus https://www.minh.io.

SEO

Since I don't really market this site, my hope that good search engine optimization can surface in google search results to bring in visitors