Seasonal Cleaning Vol III

Highlights site

• Fixed a title attribute I broke when migrating the site to Eleventy, d’oh. 🤦‍♀️ This is what happens when we think we’re not making user-visible changes and don’t test thoroughly.
• Awhile ago I tried to add a couple Netlify plugins to help catch anything—accessibility or otherwise—that I might have missed via manual testing. My deploys blew up, and I lost patience at the time. I tried again now and: same thing. Digging into the Netlify logs, I found Problem writing Eleventy templates errors regardless of which Netlify plugin I was working with. I noticed that the errors were referencing files in the ./.netlify/plugins/node_modules/ directory, so basically Eleventy was trying to build from plugin dependencies. I added ./.netlify/plugins/node_modules/ to an .eleventyignore file and that fixed the issue! So, the a11y plugin I was trying to install is now working and I fixed a few issues as a result (mostly duplicate IDs within book cover SVGs).
• Installed the Netlify Checklinks and HTML Validate plugins and fixed a few issues.
• Added spoiler alerts for relevant sets of highlights. This was the first issue I ever opened on this project!
• Increased the tap target of a “clear permalink” button. I both added a little bit of padding to increase the visual size of the button, as well as added a pseudo to increase the physical size of the target without breaking the line of the paragraphs these buttons sit inline with:

Good Things

• Installed the a11y and HTML Validate Netlify plugins and fixed just a couple validation issues.
• Ran an npm audit and updated some dependencies.
• Added some spring-y things to the list.

Bucketlist

Installed the same plugins and fixed some validation errors. This practice has pointed out to me that I still have some old-school habits of including a trailing slash in self-closing tags.

Fiber blog

• Same song and dance with Netlify build plugins! For HTML Validate plugin integration on this project, I ended up setting this link text rule to warn instead of fail the build. My home page link uses the title attribute for its name instead of its child SVG, and the validator doesn’t recognize this as a valid pattern. I don’t want to add yet another naming mechanism to the anchor link just to please the validator and potentially end up causing a double read-out with assistive technologies: title is used for the <a> element’s accessible description if it was not used for the name. So, non-blocking warning it is.
• Added autocomplete attributes to the comment form where appropriate.
• Made things a little less horrible-looking in IE (pretty much only fixing things that were fairly broken by the lack of custom CSS properties support, rather than just ugly).
• Reduced top/bottom margins on images at small viewport sizes.

This site

• Add. Plugins. To. ALL the things!
• Added IDs back to headings with markdownit-anchor; never got around to it after converting from Jekyll to Eleventy.