Quick fix and a test

I subscribe to a lot of useful newsletters. One of my favorites is Laura Carlson’s Web Design Update, described as “a plain text email digest dedicated to disseminating news and information about web design and development with emphasis on elements of user experience, accessibility, web standards and more”.

It’s quite possibly one of the most beautifully nerdy things I’ve seen in the recent past. No frills, nothing slick and nothing annoying. Just a weekly plain text email full of useful articles focused on accessibility and usability. To sign up you send an email with a blank body to an email address then you start getting them. It’s spectacular. Go get the email address and sign-up!

I was reading one of the articles included in this week’s edition, WCAG: Accessible colour and contrast ratios, and realized that I forgot to check the tag background color against the surface background color when testing the Horse Racing Datasets redesign. Sure enough in the light mode it was just shy of the 3:1 contrast ratio needed for AA compliance. Fortunately I was able to make some adjustments and get it fixed quickly.

I missed it because button to surface contrast, or in my case tag-styled-like-button to surface contrast isn’t tested in the usual tools such Wave, Lighthouse or DevTools. This is no excuse of course, but a good reminder to not to skip manual testing. In fact I did manually check all the text and styled-like-buttons elements against the colors in the background images, but forgot the tags!

As usual, the ever-prolific Eleventy educator extraordinaire Stephanie Eckles has created something useful for checking background colors against surface. ButtonBuddy lets you plug in your button colors to check all the various contrast scenarios, it’s very useful!

Also this week I did a little housekeeping after slogging through the Horse Racing Datasets redesign recap and project page update. One of housekeeping items was updating to the latest version of Eleventy RSS plugin.

I recently noticed that my RSS posts were dated a day behind, and in trying to figure it out I discovered there was a newer version of the plugin. Being a relative newbie at all things Jamstack I was a little proud of myself for figuring out how to do it. In retrospect was very easy, although I still had to figure it out.

Here are the steps to update the Eleventy RSS plugin in case you find yourself not quite sure what to do. This assumes you’re already using the plugin and that you’re using Nunjucks. If you’re using Liquid there’s a separate plugin.

In the command line in your project folder run the following:

npm update @11ty/eleventy-plugin-rss

And then in your RSS template you’ll be changing two date filters.

Near the top of your template change this:

<updated>{{ collections.posts | rssLastUpdatedDate }}</updated>

To this:

<updated>{{ collections.posts | getNewestCollectionItemDate | dateToRfc3339 }}</updated>

Be sure to change “collections.posts” to your collection.

Then in the entry section change this:

<updated>{{ post.date | rssDate }}</updated>

To this:

<updated>{{ post.date | dateToRfc3339 }}</updated>

Since you’re already using the plugin you don’t have to change anything in eleventy.js.

This has been a very long winded way to say “I updated my RSS plugin and am going to publish something to see if it works”. It works locally! But the date is still a day off, so back to the drawing board on that front.

All of that aside, you should still check out the Web Design Update email digest and ButtonBuddy!