Hey there!

It took me a while, but this site is back online, and looking pretty OK again.

New look!

After more than five years with the old design, I was tired of the previous look and I was fighting too much with the current CMS, so it was time for a refresh.

For reference, here’s the old home page:

And the new:

The new color scheme came together for me when I found this promotional image from Chrono Trigger—probably my all-time favorite video game—floating around the web:

You can probably spot the source of the red, blue, and gold splashed around here now.

I’ve changed typefaces to Concourse and a splash of Triplicate, both by Matthew Butterick. Triplicate takes design cues from typewriters, a fitting tribute to the eight years I spent at IBM. Meanwhile, Concourse is a dang nice geometric sans: flexible, legible, with a full range of weights, true italics, some fetching small caps, and enough personality to be interesting but not overwhelming.

On pages with a lot of images like my work history and the home page, I struggled to find a cohesive way to present a bunch of disparate images. I’ve always liked how sites like Polygon or the departed Wildcard manage to use various color and graphic overlays to tie a bunch of random images together. I settled on a dithering effect that looked handsome, adjusts to different screen sizes naturally, and could be done on-the-fly in just a little bit of JavaScript. Bonus: because the dithering effect destroys fine details and subtle color gradients anyway, I can send down absurdly low-quality, fast-loading image files. Win win win.

Vastly improved performance

Since I was rebuilding everything from scratch anyway, I worked hard on improving my site’s loading times.

First up, there’s way less JavaScript. With advancements in the language and better cross-browser support for standards, there’s far less need for helper libraries. I didn’t need to load Typekit (I’m self-hosting my fonts) and I kicked out Google Analytics as I never got any great insights from it and I’d prefer to not let Google track you all over the internet. All told, I went from 46kb to less than 6kb in scripts if you’re using a modern browser, an 88% reduction. (It’s 15kb for older browsers, when I even bother to serve them JavaScript.)

Styles are also way down, from about 10kb gzipped to under 4kb, depending on the page; I inline all the styles any individual page will need, so there’s no blocking request holding up the works.

I also jump through every possible hoop to load and swap in custom fonts in a sane and performant manner.

Most drastically, instead of using my ol’ buddy ExpressionEngine and PHP on shared hosting, I’m now serving up boring HTML files—more on that in a moment—on Netlify's CDN.

Put together, it’s ridiculously fast, as this Lighthouse score (desktop) shows:

💯!

The same test with mobile CPU throttling and a 3G network still scored a 95.

The previous codebase scored 0. That isn’t a joke. 😢

I haven’t dug into service workers, and I’m doing nothing intelligent with images, so there’s still work to do. But for a first pass I’m very pleased.

Meet my new Content Management System

So I mentioned above that I’m now serving pre-built HTML files. I pulled all my data out of my ExpressionEngine database and I’m now generating my entire site with a static site generator of (oh god no) my own creation.

It’s wildly impractical and will probably only ever work just for me. I call it "Homer".

I can’t recommend that others do this. I mostly wanted to not maintain a database, write content in Markdown, and spit out boring HTML files that I could dump on any stupid server anywhere. That’s table stakes for a static generator.

On the one hand, sometimes it’s nice to muck around with a bunch of tools. And Homer does do precisely what I want it to do. It’s also very fast: it generates the entire ~600 page site and all the supporting bits in about 10 seconds from a cold start, and while developing reloads are basically instantaneous.

On the other hand, existing and proven solutions like Jekyll or Metalsmith do like 95% of what I would want them to do, they already existed, and someone else maintains them, which is super nice.

Who knows if I’ll stick with this monstrosity, but if you’re looking for a static site generator that…

• reads site structure, content, and metadata from a folder of Markdown files;

• generates HTML files and RSS and JSON feeds;

• adds metadata like “Previous post"/"Next post” to those files, but, err, only if they’re in the /blog content directory right now;

• builds date-driven archives pages for you;

• could support tag-driven archives if I care to again;

• (this is where I’ll lose most people) uses the Svelte framework in server-side-render mode to handle templating, components, and critical styles;

• bundles up JavaScript using Rollup;

• runs all the CSS through autoprefixer and a handful of other PostCSS plugins that I specifically wanted;

• serves up my exact font stack;

• is barely configurable unless you happen to have written it, in which case, it’s very configurable;

• runs locally on port 6847, which spells out the name of my dog OTIS on a telephone keypad;

• outputs a shitload of emoji while developing locally;

  

• and, uhh, usually mostly works…

…get in touch! Maybe I’ll open-source it.