Earlier this year I started a new practice called seasonal cleaning, in which I make little improvements to my existing side projects, workflow, tooling, etc. A lot of this is driven out of an account-wide Github project board.
- Whenever you invoke a highlight permalink and scroll it into view, the highlight would butt up right against the top of the viewport. I added a bit of margin to an individual highlight’s scroll snap area using
scroll-margin-top. Now there’s a little bit of breathing room.
- I also made the permalinked highlight background color a little bit less harsh. What was pure white (
#fff) is now a very light grey (
#ececec). It’s a subtle distinction, but I think it’s an improvement for many pairs of eyeballs, especially when reading long highlights.
I added pagination to the home page. You won’t actually notice that yet, because there’s 24 posts per page. Soon! I didn’t have pagination on the home page before because the site used to run on Jekyll. In order to have more than one paginated page with Jekyll, you need a plugin, which at the time was disallowed on Github Pages (my deployment environment at the time). As of November, I’m using Eleventy for my SSR and deploying to Netlify. Adding pagination in this environment was fairly trivial.
I updated the favicon so that it’s more friendly to browser UI rendered in various color modes. Previously, the favicon was a static png holding a black ribbon icon. The change here entails using an SVG favicon, and querying for
forced-colors within the SVG to target dark mode and Windows high contrast. Here’s the code snippet.
For forced colors, I optimized for Microsoft Edge UI. The background of the favicon is
Highlight, and the SVG fill is
HighlightText. This means the icon blends into the background of the tab when the tab is activated:
It does look slightly less nice when the tab is inactive:
I played around first with just having a transparent background and
CanvasText (normal, unhighlighted text color) foreground or
HighlightText foreground. But generally speaking you could potentially run into some visibility issues if you mismatch system colors used for different states. For example, some high contrast themes have a light text color, a dark highlight text color, and a light highlight background color. In those cases the light text color on top of the light highlight background color would be hard to make out.
In content, I added some new highlights for David Chang’s Eat a Peach and am about halfway through the work to add Dara Horn’s Eternal Life.
And finally, I added a “social preview” image to the repo settings in Github, because it is so awkward when Twitter share cards have a giant avatar of your own face.