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ā!