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 into 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 has 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 magnitudes 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. I wish you could.
AI is basically the antithesis of all these values I just listed. It chooses the most widely used tool for the job not the right one. It is wasteful in every way possible. It uses tremendous amounts of resources both for training and running, and the code it comes up with is rarely efficient or elegant. But it sure has fancy animations and gradients! And yet they all look the same. No soul (surprising I know), no uniqueness.
AI also reinforces the worst practices of the modern corporate mentality. (Or the other way around? Probably both.) Like form over function, reinventing the wheel and sloppy or overengineered solutions. Not to mention all the issues everybody seems to be aware of but decides to ignore like ethical concerns or the spreading of misinformation and a myriad others.
Thinking about this often makes me feel depressed and hopeless, but at other times I feel inspired to show that caring about your passions and putting in the time and effort results in better things than an AI could come up with. This was one of the reasons I decided to rewrite my site and write this blog post.
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 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!