I refurbished my website, and hopefully, most people won’t notice

I used refurbished intentionally. A redesign often implies completely changing what was before, while refurbishing keeps the object very similar to the original, just slightly improved, repaired, or polished. That was my goal.

Motivation

Everything I wrote in my “Hello world” post from a decade ago still holds: I enjoy having a reference place for my thoughts and writing, and I need a playground where I can practice my rusty front-end skills. I wrote then:

[…] I wanted to try out a few things here: it had to be a clean black site, I wanted to play with typography, build the whole site using ems, and build a mobile and content-first responsive website.

Mobile, laptop, and desktop screens were not as good back then as they are today, so I used a simple, readable sans serif typeface. And while it served the purpose, my heart was always with serif typefaces because I wanted to recreate a bookish feel. Luckily, our hardware and screen density has improved considerably since then.

Also, the operating systems started to build in support for dark themes in the past few years. My website was always dark, which made it somewhat hard to read in bright conditions, so I decided to go in the opposite direction and enable a light theme.

Besides the two things above, I was happy with the website structure and the color scheme. I chose a lighter and more sustainable approach to updating my website because I didn’t have time for a complete rebuild and redesign. If I compare it with home renovation, I left foundations, walls, and roof intact, replaced wiring and plumbing, and put a new coat of paint; it’s the same building, just better.

Modern CSS

The HTML of the new website is almost the same as the old one. It’s impressive how resilient and enduring HTML is. I wrote a short post about how I switched to another static website generator to render HTML, so I won’t repeat it here. Instead, I’ll focus on modern CSS.

I last touched front-end code professionally about five years ago, but I have continued to follow all advancements in HTML and CSS. I’m amazed and excited by how far the community and browsers have come. But then I look at floats and clearfixes in my codebase, and I cringe. It was time to modernize.

I used all of these for the first time:

• rem units
• calc() function
• flexbox layout
• grid layout
• text-decoration-* and text-underline-* declarations for link styling
• custom properties (CSS variables)
• variable fonts
• CSS filters
• hsl() and hsla() color functions
• (I was close to using :has, but Firefox support is still not there)

The result? I recreated the same layout with more readable and maintainable code, reduced total CSS by a quarter, and removed all JavaScript I used exclusively for CSS polyfills.

I particularly love this example. I have a white-on-dark gray illustration of a wizard’s hat on my homepage. When designing the light theme, I wanted to use the same image file because it takes time and bandwidth to load another one, and I might need to update the new image if I slightly change my off-white background. The problem is solved in two lines of CSS:

#homepage-image {
    filter: contrast(2) invert(100%);
    mix-blend-mode: multiply;
}

How amazing is that?!

What’s next?

When I bought this domain and had only one HTML page as an index of links to other places, I had this sentence in there:

This website will always be, like human character, in development.

That is going to continue to be true in the future too. So in that spirit, I’m preparing an extension of one website section. If everything goes according to plan, I should have it ready in November. I think most of the people who regularly visit my website will like it.