Howdy! If you frequent this website often, you’ll notice some changes. This weekend I started on my planned redesign, but as I started nudging my About section, I found myself in a fight with my typography. After some hemming and hawing, I made the drastic decision to nuke my stylesheets and start over.

~81 file changes later, I made another decision to yeet my changes live and do an open redesign. Not my original plan, but it’ll be good blog fodder. One thing I want to avoid is killing blogging momentum by getting sunk in a redesign branch.

Without further ado, as with any redesign, let’s see what we’re dealing with first…

Website feature inventory

Here’s a list of all the features on my little website that I maintain:

  • 330+ blog posts
  • Art-directed posts with custom CSS, JavaScript, and SVGs
  • Open Graph images (handmade)
  • sitemap.xml
  • RSS feed
  • ███ ████
  • Code samples
  • Codepen, YouTube, and Vimeo embeds
  • About Timeline (YAML-powered)
  • Bookshelf (YAML-powered)
  • Likes (RSS-powered)
  • /uses page
  • Service worker + offline page

My checks are all manual right now, but not rocket science. I created a “secret” page to roll up all my art-directed posts and I’m happy to report just a few are super fucked up. One day I’ll add proper visual integration tests, but today is not that day.

Which leads me to the next step, let’s define the goals and non-goals for this project so we can finish on time.

Goals and non-goals

The goals I have outlined for myself are pretty simple:

  • Redo my typography setup - After years and years of subtle tweaks, I ruined it. Time to start over, more fluid this time.
  • New homepage - This is the lowest priority, but nothing sings “redesign” like a new homepage.
  • Remove Ads - Ads make me ~$20/mo. Originally a motivator to blog consistently, I’ve got a flow now. Ads were also an intentional third-party constraint I used to inform client work. Since I’m moving away from client work, that experiment can end.
  • ✅ Remove Fathom Analytics - Fathom is great, but I’m paying $5/mo to self-host and I check it zero times a year. I have Netlify’s server-side analytics running on this as well. There’s a 26× disparity between those two analytics services, enough to make me think there’s no truth to metrics at all. Jim Nielsen covers this phenomenon in his post Comparing Data in Google and Netlify Analytics.
  • ✅ Expose tags - I want to do a better job at tagging and categorization of posts for my own sake and I think elevating that will help.
  • ✅ Annual stats - Another feature for me, I like to keep track of my progress over time.
  • ✅ Syntax Highlighting - I had this once with client-side Prism.js, then I took it off, now I want it back. I’m using server-side Rouge + Commonmark in Jekyll.
  • ✅ Support page - How can you give me $10? If I’m removing ads, might as well sell my own products and services.

My list of non-goals would include:

  • Do not replatform the blog to Eleventy (or Astro) or whatever. I’d love to not be on Jekyll, but that’s a separate project. Tooling is a lot better on a Node stack.
  • Do not go down a testing rabbit hole. Spot checks or automated webperf/accessibility tests would be beneficial, but it’d be easier on a Node stack.
  • Do not automate opengraph images - Auto-generated opengraph images would be rad, but again, easier on a Node stack.

With those parameters defined, let’s do a status check…

Status check!

What you’re looking at now is the lightly styled bones of my site. No Sass, no JavaScript, nothing but Jekyll static site compilation. I’m pleased with how the website is shaping up with basic browser defaults. I’ve got ~2.37kb of global CSS (926b gzipped) and I don’t see the need for much beyond that.

RIP Newshammer, long live Newshammer: Astute readers will notice Newshammer is not on the site anymore. That’s not a permanent decision, but I am leaving opportunity/room to do something different.

Typography: I’m embracing browser defaults for type right now, with two or three exceptions. I’m soft-committing to system-ui for now because I had some recent trouble rendering headings in other languages. The article H1 is the only heading I see that feels a little too small, but I’d be happy if that’s all the typesetting I need to do.

Spacing: I have seven margin declarations and most of those are resets. Liberal usage of Grid and Flexbox using gap to manage consistent spacing. Super happy about this. Even the posts are one giant grid. I may abstract my grids into some layout utility classes…

.layout-grid { --gap: 1.5rem; display: grid; gap: var(--gap); }
.layout-grid > * { min-width: 0; } /* https://daverupert.com/2017/09/breaking-the-grid/ */
.layout-grid[data-vibe="compact"]     { --gap: 0.75rem }
.layout-grid[data-vibe="comfortable"] { --gap: 3rem }

This would probably remove half my existing CSS.

Charts n’ graphs: I followed Josh Collinsworth’s post on CSS Grid bar charts for my Archive page. Happy with this. It needs some work to be fully accessible (context-less labels) but it’s presentational at its core.

The flagpole: One stylized component I have right now is the “flagpole” look for my Post Archives and About Timeline. I’m not attached to the flagpole treatment, but I do think visually grouping content by years is super helpful.

Beyond that, I’ve already been able to land some accessibility fixes around my document heading structure which I’m pretty glad about. I noticed my HTML is also “over-classed” with a lot of half-baked .hentry microformats that I brought over from WordPress ten years ago, I’m looking forward to mowing those down.

That’s all I have for now. Tune in next week for more changes and CSS riffin’!