Holy hell, it’s been a minute, hasn’t it? I’ve spent the last few months redesigning this website from the ground up as I move from Nikola to Hugo. I did this because 1) The old design is ass 2) I’m tired of how slow Nikola was getting. Hugo is damn fast, and I’ve been able to reduce the output size of my site from over a megabyte of HTML to about 1/4th of that. But that’s not really the point of this post.
I’ve gotten way behind on updating a variety of information. I’ve been to two conferences this past year, and finally attended a C++ standards meeting. I’ll be writing trip reports for those (finally!) over the next few days, before the new year hits. For those that are subscribed to my RSS feed because of my rant on modules, I suspect many of you are interested in where they are and where they’re going. The version of modules that will be before the committee in Kona is pretty damn nice, and if we can get one or two more papers into the standard and fix up a bit of wording, they’ll be good for a release in C++20. There’s still a lot of concerns regarding build systems and performance, however I’m not too worried. If we can get a few small changes made, we’ll be set for a really interesting way to develop C++ in a modern context, even on older operating systems like zOS, with minimal interference from our build systems.
Anyhow, let’s talk web design and the absolute malthusian catastrophe that is modern frontend development. Honestly, hats off to anyone who works in this space full time. I don’t know how you do it. Redesigning this site took longer than I wanted simply because I had to take massive breaks. I even decided I’d rather write a library for CMake (and in CMake!) than work on the redesign sometimes.
I had quite a few lofty goals for this redesign, based on both my dislike of my previous site’s design as well as my experience with nearly every website out there these days. Here’s a small checklist of what I wanted and what I nailed.
- Massive reduction in file output size
- No CSS frameworks that are built for applications vs a gosh dang blog
- CSS Grid and Flexbox as much as possible
- Responsive design so the site is as usable on mobile as it is on desktop.
- A common color palette to borrow from
- Easier set of sans serif fonts for reading text
- Absolutely No media queries
- GDPR Compliant with no tracking
- No javascript unless
- embedding another resource from another site, or
- using a specific resource whose only interaction is via JS
Damn! I was really close to hitting the mark on all of these. Unfortunately, a few things fell apart. For starters, flexbox and css grid are fantastic for layout until you need to have a horizontal layout automatically turn into a vertical one. This is fine, as the intent is one will use CSS Media Queries to solve the problem. I wanted to keep my screen size logic to a minimum, as things sometimes break and I don’t want to have to debug CSS before I make a post because I decided to put some content inside of it. I almost got the site as usable on non-desktop platforms as it is on desktop. However, a few things like the lack of a resize property mean that the experience is a bit muted. The experience is CLOSE however, and aside from some optional interactions with elements such as the image comparison below, it is quite readable on tablets. Phones are still not 100% there, but thats simply because reading code on a phone without 20/10 vision isn’t a solved problem in our day and age.
Of course, the GDPR tracking is quite easy to handle: I don’t give a damn about analytics, so I don’t store anything. Go ahead and check the scripts currently loaded: No ads!
Sadly, the chroma/pygments syntax highlighting generator for Hugo leaves a
lot to be desired and couldn’t handle basic C++ constructs like Args..., or
using class over typename in template parameters. Thus, I chose to go into
the realm of highlight.js1. It’s quite nice, and with a little work I was
able to get the nice code block you see below.
#include <cstdio>
int main () {
std::puts("I WILL FACE GOD AND WALK BACKWARDS INTO HELL");
}
It doesn’t look as nice in a <noscript> setup, but I hope to eventually fix
that. I have no idea how I’ll do it, but the devil is always in the
details. That said, this still means people are going to be loading a large
JS library, but hopefully it will be cached by a user’s browser, especially
if you’re visiting other parts of the web
To understand the massive number of changes that have occurred I’ve placed two images below to compare with of the old and new tag list page. If you’re on desktop and under not Edge, simply move the slider (from the bottom. I tried my best, but there are some things that cannot be done without javascript) and you’ll understand fairly quickly the kind of changes I’ve made to the site.
There are plenty of more ideas and changes for the site’s design coming down the road. I just wanted to get the minimum set of features completed for the site just so I could start writing again.
Speaking of which, I’m repurposing this site for longer form rants and personal opinions in addition to technical writing and projects. There are no longer per-category RSS feeds, and I did this because the code generation for it was a nightmare and overall just not worth it. Of course, I found out recently that firefox has dropped support for RSS so perhaps the future of news feeds is on the way out 😓
One larger change that isn’t visible to anyone but me is the general workflow I’m now using. Before, I would use rsync after running the nikola tool and manually verifying that my site wasn’t 100% broken. This caused issues with my host as well as occasionally absolutely wrecking the folder permissions if I forgot I was on Windows.
I wanted to move to a better system. This site is currently hosted via Dreamhost on a shared hosting2 account I’ve had since 2008, and while I had planned to move to netlify, I changed my mind and decided to put in the effort of maintaining the shared hosts’ tooling. Thus, I’ve setup a few git receive hooks on the shared server, and all it takes to deploy this site now is a simple git push. If there’s an issue, the deployment fails. I’ll still be checking my changes locally for styling and content, but other than that I’m good to go. While Dreamhost does not currently provide golang based tooling on their shared hosting, they have not banned its use, and even provide some support information on their wiki. This site is currently stored in a private GitHub repo however. I don’t plan on letting just anyone see the site except in its final form.
Before I go, I’ll leave another side by side image comparison of a post. While these two images don’t really show the massive amount of work and effort I put into this redesign, I will say that the before image is a series of divs and manual positioning. The after image is entirely grid based, with some a11y handling (I’m not 100% compliant yet, but I’m testing with a screenreader when I have the time), a nice layout, font, and colors.
As I said in the title, I don’t ever want to do this again. Spend several months relearning basic web technologies, learning a new tool, and also just not writing during that period. But regardless, it’s time to move on to writing my future posts. See you on the other side.