Miscellany, Vol. 5

Here are all the little ways in which I’ve shored up A Place For My Head in the two months since the last instalment:

• Thoughts & Spoilers URLs now include the current count, to more systematically allow me to gift you my thoughts on multiple viewings, readings, or playthroughs. This involved some sleight of hand and plenty of redirections to ensure no existing URLs cease functioning.

• Dates and times are now shown in my local time rather than the server’s. I am aware some may find this upsetting. Counseling is available upon request.

• Entries can now have social media images again where I deem it necessary. I unfortunately have a tendency to add these images after sharing the URLs everywhere such an image might be used. C’est la vie.

• The footer explicitly places all code snippets under the MIT licence (prompted by a Reddit comment). I also added a margin to avoid having it stick to the bottom of the viewport, and simultaneously reduced the overall horizontal margin on narrow screens.

• I further refined the presentation of ins and del elements.

• The ‘next in series’ links are hopefully less out of place now.

• I replaced the link icons after headings with a # before them:

  Both can indicate a permalink and I concluded there wasn’t anything more innately understandable in the image of a chain link than in a simple hash. This simplifies the markup and reduces the page size. Swapping sides allows me to break the rectangular mould a bit more, too.

• I fixed some unruly, doubly-escaped HTML on thoughts pages (e.g. 30<sup class="ordinal">th</sup> time) and improved the presentation of the info box, including pushing it beyond the margin.

• I removed the extra space on lists of entries like the homepage, fixed their alignment, and gave the tens digit, which was being truncated, slightly more room to breathe in all ols.

• I added the hidden attribute to all but a few image links. Neither the captions nor the links offered anything to non-sighted users except in isolated cases.

• The compressed XML for the sitemap and Atom feeds was bothering me, so I added xml-beautify with xmldom to beautify them, but had to undo that because xml-beautify was removing the value of encoding in the declaration at the top, turning it into encoding="".

• I tweaked the handling of quotes and vintages in citations of works.

Something related to the last point that you won’t see directly but might feel the subtle effects of: I added tests. I’ve always believed in tests as a software developer, but the blog seemed like a special case. Two years later, I’m finally taking the time to verify the complex logic I’ve accreted, as well as simple things that I never bothered confirming. I wish I’d done this before, as it would have saved a lot of time even early on. At any rate, the list of passing tests is immensely satisfying:

> mocha



  :work
    ✔ should be processed correctly once parsed 1
    ✔ should be processed correctly once parsed 2
    ✔ should be processed correctly once parsed 3
    ✔ should be processed correctly once parsed 4
    ✔ should be processed correctly once parsed 5

  media
    isFloated works correctly
      ✔ {} → false
      ✔ {"attributes":{}} → false
      ✔ {"attributes":{"class":""}} → false
      ✔ {"attributes":{"class":"foo bar"}} → false
      ✔ {"attributes":{"class":"foo float--left"}} → true
      ✔ {"attributes":{"class":"float--right foo"}} → true
      ✔ {"attributes":{"class":"bar float--right foo"}} → true
    parseWidth works correctly
      ✔ "100w" → ["100","w"]
      ✔ "1w" → ["1","w"]
    image groups plugin
      ✔ buildImageSrc works: "1234" → "S/A/I/1234"
      ✔ getImageSizes works correctly
      ✔ buildImageElement works 1
      ✔ buildImageElement works 2
      ✔ buildPictureElement works 1
      ✔ buildPictureElement works 2
      ✔ buildFigureElement works 1
      ✔ buildSourceElement works 1
      ✔ buildSourceElement works 2
      ✔ convertToLinkElement works 1
      ✔ convertToLinkElement works 2

  rehype output
    ✔ spans should be created correctly
    ✔ can make lines 1
    ✔ can make lines 2
    ✔ can make lines 3
    ✔ can split lines 1

  text
    lab nodes are transformed correctly
      ✔ {"type":"element","attributes":{"path":"/"}} → {"attributes":{"path":"/"},"data":{"hName":"iframe","hProperties":{"class":"lab","src":"https://example.com/?bare=1"}},"type":"element"}
      ✔ {"type":"element","attributes":{"path":"/foo-bar/baz?quux=frob","class":["foo","bar"]}} → {"attributes":{"path":"/foo-bar/baz?quux=frob","class":["foo","bar"]},"data":{"hName":"iframe","hProperties":{"class":"lab foo bar","src":"https://some.site.dev/foo-bar/baz?quux=frob&bare=1"}},"type":"element"}

  compareLowercase
    ✔ should correctly compare strings 1: "a", "b", -1
    ✔ should correctly compare strings 2: "A", "b", -1
    ✔ should correctly compare strings 3: "B", "a", 1
    ✔ should correctly compare strings 4: "A", "a", 0
    ✔ should correctly compare strings 5: "a", "A", 0
    ✔ should correctly compare strings 6: "this AND that", "this and that", 0

  toTitlecase
    ✔ works correctly 1
    ✔ works correctly 2
    ✔ works correctly 3
    ✔ works correctly 4

  ordinalSuffix
    ✔ works correctly 1: 0, th
    ✔ works correctly 2: 1, st
    ✔ works correctly 3: 2, nd
    ✔ works correctly 4: 3, rd
    ✔ works correctly 5: 4, th
    ✔ works correctly 6: 10, th
    ✔ works correctly 7: 11, th
    ✔ works correctly 8: 20, th
    ✔ works correctly 9: 21, st
    ✔ works correctly 10: 100, th

  niceOrdinal
    without HTML
      ✔ works correctly 1: 0, zeroth
      ✔ works correctly 2: 1, first
      ✔ works correctly 3: 2, second
      ✔ works correctly 4: 3, third
      ✔ works correctly 5: 4, fourth
      ✔ works correctly 6: 10, 10th
      ✔ works correctly 7: 11, 11th
      ✔ works correctly 8: 20, 20th
      ✔ works correctly 9: 21, 21st
      ✔ works correctly 10: 100, 100th
    with HTML
      ✔ works correctly 1: 0, zeroth
      ✔ works correctly 2: 1, first
      ✔ works correctly 3: 2, second
      ✔ works correctly 4: 3, third
      ✔ works correctly 5: 4, fourth
      ✔ works correctly 6: 10, 10<sup class="ordinal">th</sup>
      ✔ works correctly 7: 11, 11<sup class="ordinal">th</sup>
      ✔ works correctly 8: 20, 20<sup class="ordinal">th</sup>
      ✔ works correctly 9: 21, 21<sup class="ordinal">st</sup>
      ✔ works correctly 10: 100, 100<sup class="ordinal">th</sup>

  asSeparatedList
    ✔ works correctly 1: [], undefined, undefined,
    ✔ works correctly 2: [], ",", "&",
    ✔ works correctly 3: ["a$"], ",", "&", a$
    ✔ works correctly 4: ["a,"], ",", "&", a,
    ✔ works correctly 5: ["a,","b"], ",", " &", a, &b
    ✔ works correctly 6: ["a,","bar","and baz"], ",", " &", a,,bar &and baz
    ✔ works correctly 7: ["foo","bar","baz"], ", ", " and ", foo, bar and baz
    ✔ works correctly 8: ["foo","bar","baz","quux"], ", ", " and ", foo, bar, baz and quux


  80 passing (31ms)

I also improved the accessibility testing I run as part of my build. I still want to add a test page with snapshots to ensure I don’t unwittingly alter the output of my custom Markdown directives. Then I might want some kind of CSS testing. I don’t know whether comparing screenshots will be useful there since they’ll change so often, but I’m not aware of a good alternative.

I really wish I could upgrade to Eleventy v2 for the sake of the WebC and Vite plugins. It irks me that I’m stymied by the long-abandoned esm’s inability to parse conditional chaining on the one hand and Eleventy’s lack of support for ECMAScript Modules on the other.

Regardless, that’s all for now. Expect an article soon about how I re-engineered code blocks. I could tell you another recent entry is of great relevance, but why spoil the fun?