I decided to rewrite my website. No javascript, no fancy effects, just static content – as Tim Berners-Lee intended. Why did I do it?
Simplicity is elegance
It is also a virtue. Can an application be seriously impressive with a million configuration options and every feature under the sun most of which no one will ever touch? Maybe. But is it elegant? I don’t think so. And I don’t think anyone would say it is. When someone says a given solution is elegant, they usually mean: it’s a surprisingly simple, but correct solution to a problem first thought to be a lot more complex.
Overengineering is the opposite of elegance. Why bundle a full framework? Why use a million custom fonts? Why write code for a bunch of fancy but ultimately meaningless design elements? All these introduce unneeded complexity, and thus potentially faulty behaviors.
Function over form
I’m sure you’ve seen one of those fancy sites, where scrolling on the page does all those cool animations. Text floats in from the sides, shapes whiz around the screen, a 3D model of the product the company wants to sell you spins around, then it gets disassembled in front of your eyes. I admit… it does look cool the first time. But then…
You want to find some information about the product being advertised? It’s a bit hard, since you have no idea where it is on the site. No wonder because the right question to ask is not even “Where is it?” but “When is it?”. It just floated away a few seconds ago. You remember to scroll back and now… it’s half-transparent. You fiddle around a little with the mouse wheel… perfect! Now it’s fully visible.
You decide to take a screenshot of this and the other pieces of important info and send it to one of your friends. Wait… now all the other information has floated away from view. Oh well… you try to copy the text then and send that to your friend. And… the text is not selectable. And even if it were, it’s horribly botched and broken up by all the formatting applied to it. And the site is unusably laggy on any device that wasn’t made in the past 3 years. Does this sound familiar?
My point is: the design gets in the way of the information. I’d rather have something less cool looking if it lays out the information in a digestible and practical way. Or if you insist on some obtrusive but cool effects, then make sure to provide a more usable, alternative way of accessing that information.
Not to mention all these design choices are terrible for accessibility. Screen readers, high contrast color settings, screen magnification, system-wide custom font settings are seriously compromised if not outright made unusable by such applications and websites.
Resources are finite
It might have seemed for a good few years that the internet and all of modern digital infrastructure just had infinite resources. At least to the everyman. Let’s send 40MB of data on every page load! Let’s start autoplaying full HD videos on every page when someone visits our site! It’s also not just an IT problem. Are the summers too hot now? Let’s just get an AC and pump the heat outside! I’m sure it won’t make the problem even worse.
With all the water shortages and power outages all across Europe this summer, we cannot pretend anymore. We need to be more efficient and resourceful and stop wasting compute and thus energy where we can. Of course my site – that gets a couple of visits per month – not bundling a JS framework or using fewer images won’t make any meaningful difference in the grand scheme of things, but
Be the change you wish to see in the world
This phrase – attributed to Gandhi (though not necessarily in this form) – in my opinion is a good set of words to live by.
I remember when I could just open a website and find the information I was looking for. Crazy right? No popups to close. No cookies to opt out of. No newsletter subscription form. No AI assistant in the corner of the screen. None of that. Just pure unadulterated information. Maybe with a little unique flare added by the creator of the website with a cool pattern in the background or a fancy custom button.
Nowadays every website has a million design elements, animations, gradients, transparency, you name it. Yet they all look the same.
I also remember the times when websites would load faster on hardware that was orders of magnitude less capable than today’s machines.
Let’s bring back the good practices of those times! Me rewriting my personal site is my attempt at doing exactly that.
Nostalgia
I’ve only gotten a little taste of (what many call) the glory days of the World Wide Web since I was a bit too young at the time. Still, I do remember surfing from site to site and being amazed by the cool stuff people had on their personal blogs and hobby sites.
It felt like peeking into the mind of a person and getting to know them a little. The often random but almost always interesting set of topics they decided to talk about. You could feel how passionate they were about said topics. And they would link to other such sites, each with their own unique design and fun little easter eggs. All of them reflecting their author’s personality.
To this very day I love finding one of these websites and exploring or getting lost on them. Be it an old one from the early 2000s or one of the newer ones made by people with the same appreciation for them that I have. The best part is: no matter how many times you decide to revisit one of them, you always seem to find another interesting page or cool detail you missed on your previous visits.
It seems like there’s a sort of Renaissance for these unique personal websites, which I’m delighted about. To honor the people who take their time building these sites, and who inspired me to build my own, I would like to share a few of them here in no particular order nor with a shared set of topics they cover.
AI is threatening all of these values
Of course, you cannot talk about anything in the current year without mentioning AI.
AI – or more precisely, how most people use AI today – is basically the antithesis of all these values I just listed. It chooses tools and solutions based on popularity (because it’s the one most represented in the training data), instead of opting for the one most fit for the job. This is usually pretty wasteful, as the right tool for a job – in my humble opinion – is the simplest, but still sufficient one.
But using AI for every little task is also very wasteful in other ways. It uses tremendous amounts of resources both for training and running. All AI-generated site designs have fancy animations and gradients, yet they somehow all look the same and lack character.
AI also reinforces the worst practices of the modern corporate mentality. Or the other way around? Probably both.) Like form over function and overengineering.
Of course I’m not saying that you can’t make a good-looking site or a well-engineered piece of software using AI. If you care about your work and have a solid understanding of what you’re doing, you can guide the AI to not settle for the average of all human output – so by definition something colloquially known as “mid”.
But it’s also fun to learn something new and figure stuff out on your own. Not to mention that to be knowledgeable enough to guide the AI on the right path, you need to somehow get to the required level of understanding, and you do that by thinking on your own and building stuff on your own.
But how did I rewrite my site?
As I mentioned at the start, this site has no javascript at all. It’s all
statically generated content. A mix of handwritten HTML and pages generated from markdown
documents (like this blog post you’re reading). I used
Hakyll to generate the site, and since I really liked the
layout and look of the default template it generates, I only tweaked it very slightly.
The site does support light and dark themes by making use of the
@media (prefers-color-scheme: dark) CSS feature. The image on the home page also has
a light and a dark theme variant. The following snippet of html code is responsible for
loading the right image depending on the theme setting of the browser.
<picture>
<source srcset="<dark-mode-image-url>" media="(prefers-color-scheme: dark)" />
<img src="<light-mode-image-url>" />
</picture>It was a simple process with no unforeseen problems arising. Writing Haskell is always a joy, but – using the sample code – there wasn’t much of that needed. I only changed a few lines and added a couple of short helper functions for grouping blog posts by year and then I was done. I compiled my code and deployed it. If you like Haskell and are looking to build a statically generated site like this one, I highly recommend giving Hakyll a try.
Thank you for reading!