Published in Technology on A Place For My Head. Tagged , , , , , , , , & . #11 in the Colophon: Finding A Place For My Head series.

I should explain why this entry is lighter than you might have imagined, given how much time has elapsed since the last one (that wasn’t about Webmentions). To begin with, there are naturally fewer drastic improvements to make: shaping the site from almost nothing took up most of April but now there’s something. Simultaneously, I’ve made an effort to spend less time on it so I don’t exhaust myself and lose interest. I’d like this to last. Lastly, there has been much to do at work and at A Viral World, as well as some major, not-unpleasant changes at home. Hence the less breakneck pace of development.

That’s not to say there’s nothing to talk about, of course.

The æsthetic evolves

I’m drafting an article about form and function wherein I explain everything A Place For My Head does to improve the reading experience. As I verified my claims, it transpired that the pages were in fact far too wide. I had dramatically miscalculated the required width. Anxious to rectify this mistake, I counted characters and found a new width that better maintained the desired ‘measure’, for a more comfortable reading experience.[1]

On a related note, I looked at my front page and found it lacking in personality. I started breaking and rebuilding it. Slowly, through a handful of rather displeasing visual experiments, I derived a new style I’m quite pleased with.

Old homepage
New homepage

I like that the entries have room to breathe instead of being squashed together, and I’m much happier with whitespace separating them instead of borders. The simpler style for the dates improves the readability of the page. I was even able to add numbering.

This layout carries over to collections: tags and streams are rendered in the same manner. When it comes to series pages, which show posts in chronological order, I decided on the spur of the moment to use Roman numerals. They look very smart in and of themselves but odd in contrast with the other pages. Time will tell if it’s too much.

I’ve begun favouring centered text for everything preceding the contents of the entries, as well as subheadings. I always hesitate to center text without a reason. I believe it lends a consistency here, but it bears thinking about. It did help to distinguish headings within the entries, which allowed me to reduce the font sizes of headings across the site and even simplify subheadings. However, said subheadings now move when the link icon is displayed. I’ve yet to decide whether this is acceptable, and if not, how the icon should behave.

The writing evolves

Of course, I also used this time to spruce up many of my past entries. All this expounding is developing my voice in different contexts. I’ve noticed my first three drafts of an entry tend to mechanically rephrase my notes as prose. The articles don’t take shape until the fourth or fifth draft, which often comes after publication—something I really ought to watch out for if I expect to attract and retain readers.

However, in keeping with the spirit of A Place For My Head, I must also remember not to lose sight of the future in an obsession with perfecting the past. Reading that first entry from a year ago reminds me how hard I tried to establish my voice in the very introduction. I may not have been entirely successful, but it was enough just to start. Had I allowed myself to slip into old habits, I would no doubt still be editing that lone article in hopes of publishing it ‘eventually’.

Let the images flow

It may have occurred to you that this article contains more images than usual. Their presentation is—I hope you’ll agree—vastly improved. They can be grouped or placed on the side or both, they can have captions, and they have pre-computed intrinsic sizes so the page won’t jump around when they load. Unfortunately, with CSS Flexbox, the links around them were forced to be full-width because I wasn’t able to pinpoint the required numbers while also taking the varying numbers of images into consideration, creating an ugly effect on hover or focus.

Or at least, the links were forced to be full-width. I thought I might use quantity queries to refine my approach. Then I remembered CSS Grid is inherently responsive! With a single auto-fit grid, my image groups can go from two to four images per row according to the width of the viewport. (And if you have a 4-year-old browser that doesn’t support Grid, each image will simply be displayed on a line of its own instead.)

This does mean I need to rethink how I populate the sizes attribute. My existing formula won’t be enough.

Structure and organization

Entries in Thoughts & Spoilers have always included metadata about the work and any history I have with it. I’ve now added a box displaying said metadata, which I think makes the page look more polished in conjunction with the newly-recoloured spoiler warning. I’m proud of how this information is presented on small screens and large alike, with or without support for CSS Grid, though I think I can simplify my code further.

Newly redesigned thoughts on Death’s End

I devised a better scheme for indicating when a work (other than a show) is part of a series. I could have used the existing ‘Part’ field, but I don’t think a title like ‘The Three-Body Problem (2008) by Liu Cixin: Death’s End (2010)’ is desirable, and I don’t want to put the author in the series title, since there can be more than one. I’d much rather the title be ‘Death’s End (2008) by Liu Cixin’ and the box show ‘Series: The Three-Body Problem (2008)’.[2] This applies to the title of the article series as well.

Tags and streams are now distinct: ‘Technology’, for instance, is never a tag. I removed many redundant tags. Everything is sorted alphabetically and properly capitalized by hand.

Small improvements

The way references to footnotes were rendered looked very odd to me. The number—not the brackets—was underlined and slightly but not sufficiently smaller than the rest of the text. The position was too low as well. After some tinkering, they are recognizable as footnotes:

Strange old footnotes
Smart new footnotes

Meanwhile, the external link icon I had was rather insipid. I replaced it with a stronger and more well-proportioned icon:

Faint old external link icon
Smart new external link icon

More robust Webmentions

I added rate limiting using Traefik to my new Webmentions endpoint. I was pleased as punch to see it undisturbed by even 100 valid requests a second (my testing started after 2:35 in the graphs):

Almost no impact on the Kubernetes cluster

Incidentally, this was how I discovered ali, the perfect tool for load testing.

Thinking about notes

I’ve been keen to add shorter entries: links, music (already implemented), videos, and so on. There’s so much I encounter on a daily basis that I’d love to share. I hesitate, however, because I’m unsure of how sensible such brief entries are. Does it make sense to create an entry in a new branch, push it to GitLab, kick off a workflow, set it up to merge automatically, and wait for the result to appear on my site seven minutes later… every time I want to share a link? And that’s seven minutes in the ideal case, with much manual intervention along the way. Should I manage these separately from my main site? Should they be on a separate site, then, or should I still incorporate them here?

Taking another tack, what exactly is the distinction between these and regular articles? Where does it cross from one to the other? Can I have a ‘link’ entry with five paragraphs of text and an image? Should these have tags? Should the title of the entry be the title of the page I link to? These are hard questions.

Thinking about it, maybe all I need is ‘link’ articles that are nominally ‘about’ another page, which means they’re either a direct response to or sharing that one page. I might have other links in the body (preferably not), but the entry as a whole is related to that one link.

More to come. I have some ideas I want to explore.

Miscellany

  1. Now it looks too narrow to me on my large, high resolution screen. Change is hard.↩
  2. A potential issue I face no matter what scheme I use is the sheer volume of existing media. What if someone else had created a series (of books or movies) titled ‘The Three-Body Problem’ in 2008? How would I distinguish them in the title? Well, I can’t, at least not by showing more metadata. I would have to add text to the series titles themselves.↩
  3. My first video! I’ll have to see about a custom tag to reduce the repetition and make sure it’s styled properly.↩

Next in series: (#12 in Colophon: Finding A Place For My Head)