Welcome to the brand new Dave-Rupert-Dot-Com! It’s been about 5 years since I did any kind of redesign to my site and it feels good finally get this done. Allow me to give you a tour of some of the new features.
Meet Newshammer
Based on a dumb twitter joke, I commmissioned an awesome illustration from my friend and D&D cohort Kyle Ferrin. Kyle has an amazing illustration style and I couldn’t be happier displaying his work on my website. And once I got the illustration from Kyle I was like “Yes. This will basically be the whole site.”
From a webperf perspective, Newshammer is a hefty 252kb transparent PNG, optimized down to a 48-bit color pallete. I even manually exported a WebP for the first time in my life (185kb). I struggled with the number of kilobytes a bit so I cut a mobile version as well at 77kb and 68kb for the PNG and WebP respectively. I’m fairly happy with the results.
CSS Variable Themes!
My favorite feature of the site is that I finally have a good art direction and theming structure. Using CSS Custom Properties (“CSS Variables”), I can easily theme any part of the websites I want. A theme for my site looks something like this:
:root.theme-minions {
--bg: yellow;
--text: black;
--link: blue;
--link-active: lightblue;
--nav: blue;
--headings: black;
--border: blue;
}
With just ~7 lines of CSS I can completely change the look and feel of my site. I 🧡 this. If I need more flexibility (e.g. fonts?), it’s as simple as rolling a value up into a :root variable and then overriding as necessary. Here are some of the default themes shipping in Dave Rupert 4.0: Newshammer…
Feel free to web inspect your own, take screenshots, and send them my way. On some of the themes, I even brought back some grunge background textures from Transparent Textures. Mmm… dirty screens.
CSS Variables on Client Sites?
I have a lot to say about CSS Variables and theming but the tl;dr is they’re great. But I don’t know yet if I’d recommend having this theming setup on client sites or pattern libraries.
Where I really think CSS Variables would shine is inside a Web Component’s Shadow Root as opposed to the global :root. I can explain this in another post, but theming could be done at a component level quite efficiently. <button class="button button--primary"> could become <my-button theme="primary">. I think this would fundamentally change how we write CSS today. Component themes wouldn’t re-assign property values, themes would just modify variables.
Bummer that HTML Imports got shitcanned tho.
Webfonts are back, baby!
I ditched webfonts for system fonts recently under the feeling that I wasn’t getting enough value for the kiloboytes and FOUT. It was fine but the 300 weight of Segoe for body text was nearly illegible on Chrome on Windows. I got a handful of complaints about that. So I made a change.
Two weights of Rubik do the majority of heavy lifting on the site now. Rubik is a squatty, thick, slightly-rounded sans-serif. It is a weird futuristic sans-serif and the “J” is super fucked up, but that’s maybe why I like it. In general, I find the typeface much more quirky and enjoyable to read than a system font.
The other font is Domine, a charming serif, that is used exclusively for blockquotes on post templates.
I haven’t settled on a font-loading strategy I love, so I’m just trying good ol’ fashioned @font-face with font-display: swap. This means Chrome will prefer a non-blocking FOUT experience. Edge defaults to a FOUT experience. Firefox has font-display behind a flag. And iOS… render-blocked like a mofo. When, O Browser Gods, will you release me from this prison!?
I almost went with 3 weights of Rubik but backed down. I’m hoping in the near future Variable Fonts make these sort of compromises irrelevant.
Before/After
I could bore you with some other CSS nerdery, but let’s look at some performance stats. I like to do this when I’m changing things up just to see how things are shaking down (All measurements on 3G Slow).
| Page | Start Render | Speed Index | DOMComplete | Load | Bytes In |
|---|---|---|---|---|---|
| Home (Before) | 1.079s | 1079 | 3.498s | 3.705s | 69 KB |
| Home (After) | 1.177s | 1783 | 5.530s | 5.738s | 314 KB |
| Article (Before) | 1.288s | 1291 | 6.164s | 8.108s | 413 KB |
| Article (After) | 1.395s | 1400 | 5.974s | 7.651s | 388 KB |
Oops. It appears I’ve quintupled the size of the homepage and nearly doubled load times. This is Newshammer and my webfonts’ fault. I’ve slimmed down my article template a bit so that’s good news.
While this is not ideal, it’s a bit expected. My site was maybe artificially fast before. I tore it down to skin and bones. I’m also not doing any Critical CSS work this time around because theming doesn’t exactly mesh well with CSS-in-Head strategies. Some intentional decisions are slowing things down.
And here’s the deal, I can iterate going forward. Launch day metrics aren’t always final. I can get better. Switching over to HTTP/2, Service Workers, and more are on my TODO list.
But for now, let’s kick this thing off…