About this site

I basically ripped off the design for this website from the good folks (it's just one guy, David Copeland) over at brutalist-web.design. Read the page, it's worth it!

I did add a couple of "rules" of my own:

🏃🏾‍♂️‍➡️️ Don't hide "skip links"

People who use keyboard navigation or screen readers are used to having a link at the top of the page, which allows them to skip to the main content of the page, instead of having to jump through a bunch of unnecessary navigation links, etc. Some designers like to hide this link from view, because the user doesn't need to see it. My guiding principle is to not hide anything that the user can do on the page, so I've chosen to display it as a normal link.

😊 Emojis instead of icons

Emojis are ugly as hell compared to some sleek minimalist flat icons, but in the interest of using "raw materials" to construct your designs, they seem like the way to go.

Now, they will render differently on different devices, but that's fine: we're brutalists. The emojis' look isn't a crucial part of the design; they only exist to serve as a visual helper, to direct the user's eyes towards the content they are looking for.

The obvious benefit is that they're already there. They will render based on what is already installed on the user's device, so the user doesn't have to download a bunch of additional .svg assets to render them. That's great, because although an image can say a thousand words, when addressing the user's bandwidth, it only has two: fuck you.

I like to keep things simple, so there won't be a whole lot to say here, but maybe you want to build a website like this, so here's the breakdown:

🎨 The frontend

The CSS... is CSS. Don't need a framework for something this simple.

I added 15 lines of JavaScript to allow the user to toggle the color scheme. It's a nice feature to have since not everyone loves dark mode, and people sometimes want to switch modes at various times of day. If the user doesn't allow Javascript, the page will still be loaded with their preferred color scheme, as determined by their browser settings. Hooray for using the platform of the web!

🍑 The backend

It's PHP. That's it.

It's a single index.php file which has a little bit of routing and a parser for Markdown files.

If I want to write a post, I'll write a Markdown file in posts/drafts, and when I want to publish, I just move it to posts/published, and it'll get served.

I wrote a little function to parse post metadata in .ini format as front matter from my Markdown files. That allows me to dynamically render things like a <meta name="description"> tag, and change the slug for each post. I chose .ini format because PHP already has a built in parser for it. Hooray for using core language functions instead of adding more dependencies!

The front matter at the top of this Markdown file will look something like this:

title = "About this site"
author = "Al Jakobsson"
slug = "about-this-site"
description = "Information about this website's design and construction."

The version of the site that you are using may or may not have been statically generated, as I've also written a small function in my index.php that grabs each route's contents and spits out an .html file.

The Apache server then handles caching of all static files via its .htaccess script.

It really doesn't have to be any more complicated to build a simple site that is friendly to the user as well as the author.