New site design for March 2023
(Just in case the full article gets cut off, you can read this post online here: https://www.leereamsnyder.com/blog/march-2023-design-update)
The person responsible for everything wrong with the previous version has been sacked
This site has a refreshed design and I insist that you read all about it.
(Just kidding you can bail here I won’t be mad.)
For reference, here’s what an article looked like yesterday:
And same page today:
Why, though?
This all came about because I was interviewing for a job and started talking about my website. The man asked “What’s with the plane?” and my answer was basically Marge Simpson with potatoes:
They are neat!
Anyway that got my gears turning on how I could do better by my little dithered toy plane, and at first I only wanted to update the logo and call it a day, but then 87 commits later here we are:
-
I’m trying out a free email newsletter if you want to get emailed when there’s a new post here. (Right now it’s the same content as the RSS feed.)
-
New fonts—with neat-o italics!—all around! Body text has changed from Concourse (a fantastic typeface that I’ve used happily for years) to new hotness Heliotrope (both from Matthew Butterick). Page titles have changed from New Kansas to Vulf Mono Italic because I’m a sucker for ball terminals, apparently. Finally, the monospaced fonts are still
Mono Lisa, but I swapped in theswankier script italics. -
There’s a long-needed button up top that jumps you down to the proper navigation in the footer.
-
Updated colors! Most of the colors are yoinked from Reasonable Colors. If you use dark mode, it’s a wee bit darker now.
-
There’s a new “Best of” page that gathers my favorite or most popular articles.
-
All articles with a bunch of headings will automatically have a Table Of Contents up top. Likewise, articles that have been updated after publication will list those changes; I’ve been storing that information for years but never exposed it. You can see both of those in action near the top of my big Hades build guide, the driver of like 95% of this site’s traffic.
-
While navigating between pages, you’ll see a loading indicator if it’s taking longer than a second or so.
-
A dozen or so small bugs have been squooshed, including a nasty one where you could end up seeing the site without any CSS because relative URLs are cursed.
-
Does anyone print web pages anymore? If so, there’s a dedicated print stylesheet now.
Welcome to my tech talk
For the previous major redesign in 2021, I started building this site with then-very-much-not-1.0 SvelteKit, and I’m sticking with that now. Svelte is a super nice component-y language to work with, and SvelteKit makes it easy to develop and build whole-ass websites with Svelte. It just works, which, uhhh, I can’t say the same for the bespoke build processes I had patched together in the past.
For the curious, I’ve made the source code for the previous design available on GitHub.
I can’t say it’s the best code for a personal blog ever written—it’s not even now the best code for this site now—but there’s a lot of little solved problems in there, like generating social-media images for articles or building a rewrite/redirect to get optimized images from Cloudinary or how to do a “2-stage” web font loading strategy with SvelteKit.
I’m also still on Netlify for hosting and deployment. They’ve been very kind to me even after I’ve done ill-advised things like host several dozen poorly-optimized video files on a video game guide that occasionally goes low-key viral on Reddit and torched through my allocated monthly bandwidth in a few hours.
But does it fly?
I care about performance, so let’s see what Lighthouse says I’m doing performance-wise:
I want that 4-hundo! I’m held back a bit because my tooling inserts a pile of <link rel="preload"> tags for the site’s scripts and styles, and those hold up the initial render a smidge.
(Also I’m hopelessly addicted to custom fonts.)
A trip down memory lane
For funsies, here’s what the site’s home page has looked like for the past 2-and-change years, when we entered the era of dithered images and gigantic headings:
And the design from late 2018-2021:
Still going strong with that ridiculous “Rob Schneider” joke! I still kinda like that clonky “LR” logo thing.
And from 2012-2018:
I had to scrap this together because I no longer have the database or a working copy of the CMS but here’s 2010-ish 🤣🤣🤣🤣🤣🤣:
(I think I still have that shirt?)
And, oh boy, like 2008-ish maybe when I was just desperate for someone to hire me to build websites and I can’t believe that worked out:
To continual improvement! 🍻