All the way back in August, I started working on some improvements to this site. Things had gotten busy and it had been a good while since I’d posted anything. I’ve got a lot of ideas saved up, and so I wanted to rectify that. But before I committed to more content, I wanted to get things right under the hood.
I keep up religiously with the latest Eleventy news, and I wanted to get ready for the upcoming 1.0 release. It made sense to fix some some things first, and make it easier for me to work with richer content without relying on a bunch of old hacks from when I was just learning this stuff.
Along the way I made some minor change to configuration, then got busy with the real world, and just didn’t have time to get back to doing any work at all. Well I finally got around to it.
What’s new?
I might as well mention what kind of work I’ve been doing.
I didn’t redesign things, but I did rewrite most styles of the styles. I was going to try to avoid using Sass. I even kicked around the idea of using Tailwind. In the end, there’s still a lot of Sass, but I did a lot of work to make it easier to apply a theme to individual posts.
Previously, the 2005 design and Boba Fett’s Lair posts used not just custom CSS files, but also custom templates. It wasn’t really sustainable if I wanted to do more with art-directed posts. My new solution involves flexible enough templates combined with a technique I was initially skeptical of — a style tag in the frontmatter.
Dave Rupert has a good post on art direction for static sites where he does exactly this. If it’s good enough for him, it’s good enough for me. Like Dave, , I also rely heavily on CSS custom properties, which is much easier than the hacky game of specificity Whac-a-Mole I had been playing. Right now I support both a dark and light mode on this site, but I’d like to add a theme switcher so I can choose, rather than rely on OS-level settings. The heavy lifting of defining a bunch of sensible variables is already done.
Eleventy stuff
Style upgrades necessitate upgrades to the templates. On the surface, things look mostly the same, but the templates are all new. I’ve gotten spoiled by the features of Vue, React, and even Twig that I’ve worked with over the last few years. I wanted to bring some of that into my Eleventy setup. The previous version of the site made heavy use of Nunjucks macros, but it was kind of a confusing system, and it had some limitations I didn’t love. Luckily I found an approach I really like.
This “encapsulated Eleventy/Nunjucks components with macros” technique by Trys Mudford was exactly what I was looking for. It’s so simple that I’m surprised it’s not the standard way of working with Nunjucks templates. I’m not making heavy use of it, and it’s been great to have a component-based system right in Eleventy. I did encounter some async issues while using it with eleventy-img, but I think the issue may have been on Eleventy’s end, and I eventually want to see if they’ve been resolved. Still, I very highly recommend this approach.
Images
This one was kind of a mixed bag. One of my stretch goals was to rely less on non-standard pieces of the stack. I love Netlify’s Large Media image transformations, but it seems like they’re never going to support conversion to webp images. Since I was already bringing in eleventy-img, I figured that could take the place of Netlify’s Large Media. I was half right.
As it turns out, eleventy-img doesn’t provide a solution for Markdown images — only things that use your shortcodes. That was fine for templated images, such as heros and the Gallery, but it wouldn’t help me with images in my posts. OK, fine. Enter: Eleventy Images Responsiver. This is perfect — but there’s a catch. It only generates the markup for images, not the images themselves.
Ugh. Fine, I can deal with keeping Netlify Large Media. I can eventually find another conversion solution, or just do it manually, which wouldn’t even take long. Oh wait, there’s another catch! Images Responsiver attempts to do its magic on every image on the page — not just the ones in my Markdown. That meant that the markup for Webmention avatars was being transformed — but I don’t cache those images locally, so I can’t transform them, meaning they were now all broken. I don’t have time for this.
OK, so finally I ended up using eleventy-img and Netlify transformations, but not Images Responsiver. Images Responsiver does have an open issue to address the behavior that prevents me from using it, but it’s been well over a year with no movement. It’s a bummer because this project looks extremely cool, and I really want to use it.
What’s different
Like I said, things are all new under the hood, but on the surface things are mostly the same. Here’s a quick list of visible changes (that I can recall).
- Hero images usually won’t span the full width of the page now. It usually caused them to also span the full height at large sizes, which was just too big. The same goes for individual Gallery pages.
- I can now easily move my hero image up behind the navigation. I had done this on the art-directed 2005 design post, and I thought it looked nice, so I decided to make it easy to do with a few yaml frontmatter toggles. You can see it in action here.
- In fact, there are a lot of new features place for hero elements, such as positioning and size. I can also now overlay titles, and dim the image to improve contrast.
- Accessibility improvements. Some of the smallest fonts don’t get quite as small as they used to. I also made some minor color tweaks for contrast.
- I almost never write Notes, but they’re cleaned up a bit. The new component architecture really paid off, making it so that this rarely-used thing shares all of its code anywhere it appears.
What’s not done
- CMS stuff. I had been using Forestry because NetlifyCMS seemed like it was dying. Well Forestry is going to shut down now, and it also caused a lot of issues. Every field created empty frontmatter keys, whether you used them or not. This meant making my templates way more complex to handle checking for a value in any field. I don’t need all that trouble. Back to Netlify CMS — eventually. I wanted to finalize my frontmatter structure before starting that.
- I’m also looking into using Front Matter, a VS Code plugin as a pseudo-CMS. More on all this later.
- Images need some more improvements. My
eleventy-imgsrcsetandsizesconfiguration is still far from optimized. I just wanted to get this thing out the door, and it’s easy enough to fine-tune that stuff later now that it’s in place. It doesn’t affect my goal of simply writing more. - I want to go for four hundreds on Lighthouse, like I used to have when I first relaunched the site. Maybe I’ll even get it up on the Eleventy Leaderboard.
What’s in store
- I’ve rebuilt big chunks of this site under the hood twice since relaunching it about three years ago. While it’s not what I’d call done, and probably never will be, I’d say it’s in a good place to start adding some new fun stuff.
- With that in mind, I want to consider adding on (migrating to?) Slinkity. I’ve been following this project for a few months now, and I’m very impressed with both the progress it’s making, as well as the philosophy behind the project. I added on a tiny bit of Petite Vue in this update, and Slinkity will help me to add more without sacrificing any performance, while probably enabling some other improvements.
Wrap it up
I’m kind of burnt out on building for a while. All of 2021, and the last four months especially, was just too much. Work has been sapping any bit of energy I had at the end of the day, and on way too many occasions, work went past the end of the day. I’ve got some projects to tackle around the house, but remote work has been absolutely killing any semblance of work-life balance I had. For now, it’s time to hang up the code for a bit and get writing.