Miscellany, Vol. 3

I have a couple of entries planned on more significant improvements, but for now, here are all the smaller changes since the last Miscellany a year ago:

• It took a while for Practical Typography’s advice to overcome my resistance, but once I saw it, I saw it. I had to make the top-level headings smaller. That still wasn’t enough, so I reduced the multiplier of the type scale on wide screens to make the reduction more drastic. Time will tell whether the war on large text has truly ended or this is merely a temporary truce. Far be it for me to deny the allure of giant letterforms, but I think this already looks much better in the context of the page.

• I darkened the border of block-level ins elements and fixed an issue with the spacing of consecutive or interleaved ins and del elements.

• I wrapped my use of the npm striptags module with the he entity decoder to fix issues with ampersands and entities.

• Descriptions are now escaped in feeds.

• Descriptions on stream pages like the one for Journal, meanwhile, can now be full HTML blocks. Links to stream-specific feeds also have the correct URLs.

• I refined the description of the site (as seen in the footer, which now links to the top of the front page instead of where the entry is in the list) and descriptions of the streams, as well as added the site title and a link to the front page on list pages. Minimizing navigation wasn’t a bad idea, but my approach was inadequate. I hope this goes some way towards remedying the problem.

• h2s now clear floats. I repeat: h2s now clear floats. I can’t even remember where that was a problem at this point.

• The tens digit is no longer misaligned in ols, to general approbation (I assume).

• I disabled text-size-adjust as recommended by CSS-Tricks.

• In lists like on the front page, entries will indicate their position in any series they’re part of. Thoughts & Spoilers entries also display the relevant date and whether it was a repetition.

• In addition, Thoughts & Spoilers entries are now tagged with the type of media, which is also displayed in lists.

• I sprinkled some more metadata willy nilly:

  • aria-current="page" on entry pages
  • rel="alternate" on all feed links
  • rel="tag" on links to tag pages
  • rel="bookmark" on permalinks
  • meta name="generator" on all pages (uncenter pointed out this wasn’t working, which was because I was still on Eleventy v1.0.0 instead of v1.0.2)

• I’d always suspected my images had the wrong size, but I struggled to understand why. I finally found the (very obvious) culprit. Floated images are no longer halved in size.

• Code blocks inside lists have improved spacing and sizing. Similarly, links and inline code elements are positioned slightly better now.

• SVG elements were being beautified along with the rest of the page, resulting in visible whitespace. I added an exception.

• On an impulse, I rethought the presentation of horizontal rules as seen in 2021: Afterword. Their new appearance is the work of 15 minutes spent playing with :before, :after, and Unicode characters. I like it enough that I replaced the solitary h2 in one particular article with a rule.

• The <title> element now includes the site title. I used a horizontal bar. It needs to be tested in screen readers.

• The orphan prevention code mentioned in A Better Reading Experience apparently stopped working for Thoughts & Spoilers entries when I adopted the cite element. I added a workaround.

• I reduced the unnecessarily large whitespace around the header, the footer, headings, lists, code blocks, and images. This is, of course, an area where I constantly oscillate between extremes.

• Floated images inside lists (like the ones here) are no longer pushed far down inside the margins of their containers when they’re the first children.

• Most importantly, I tweaked the offset of underlines on links.

On a more general note, I was talking to someone about how I always optimize HTML, CSS, and JavaScript—such as by combining CSS selectors or removing unused JavaScript code—but prefer not to minify it, such as by removing all non-significant whitespace and renaming variables. I once learnt web development by peeking at other people’s source; we all did, before the rise of the bundler. I want to make it easy for today’s new developers to do the same with my work.

The conversation also got me thinking about my front page. With 253 entries at the time of publication, the HTML weighs in at 292.68 KB. This is compressed using Brotli by Netlify, so I only send 18.14 KB over the network. The page would have to be 20 times as large to match the combined size of the fonts (my real weakness), or 50 times to cross the threshold of a single megabyte, which was the average page size… some four or five years ago. I should be safe for a while yet.

Next in series: You Want it Darker?(#27 in Colophon: Finding A Place For My Head)