Webmentions up and running

Finally sorted out how comments and webmentions are displayed on this site. It was kind of a hefty task since it involved sorting out WordPress comments as well. If everything works as intended (big if), webmentions should be displayed in a discussion thread below the post contents on permalink pages regardless of whether or not WordPress comments are enabled on that post. We’ll see how that goes!

As an experiment, I’ve turned on comments here, here, and on this note. Overall though, I’ll probably leave them disabled for the majority of my notes. This 2013 article by Kartik Prabhu sums up my feelings on the subject pretty well.

Site update: a new taxonomy index and a11y improvements

Just pushed an update to this site.

The Browse page is now mainly an index of taxonomies and archives (years, post formats, categories, tags). This new index replaces the opacity-based tag cloud. I kind of miss it, but it was problematic. Very hard to digest, and the lighter greys were way too low-contrast.

Besides the index, most of the changes are related to accessibility. I focused on making the tabbing experience a bit better, introducing a couple skip links. Note that I haven’t totally ironed out the tabbing… Most of my manual testing for this update was done in Chrome. I checked it briefly in Safari and it’s pretty weird, but I think it may have to do with the default Safari settings. I haven’t adjusted these yet, read more about Safari tab settings on a11yproject.com. Besides the tabbing, I also had a handful of links that weren’t suitably descriptive, particularly on the new term index. I added more aria-label attributes where I could. See the “Using aria-label for link purpose” page on the WCAG wiki for more info.

I’m trying to work on accessibility a bit more on an ongoing basis. Need to take a little dive in to this Hacker News thread, via this tweet.

See also:

There are probably a million a11y optimisations I can / should still make on this site. Suggestions are very welcome.

WordPress security resources

Links to a few of the security resources I find useful, some WordPress-specific and some more general.

A note about that “step-by-step” guide: it’s pretty decent, but IMO Wordfence is a better security plugin to go with. Sucuri is maybe more user-friendly, but Wordfence comes with more out-of-the-box (incl. two factor authentication and login limiting) and the settings seem more granular. Doesn’t hurt to try both though to see what’s the best fit.

Last edited 22 June 2019

WordPress function for images with ‘srcset’ attribute

Wrote a function returning an image element with srcset and sizes attributes. See this Gist for the function and this Gist for an example of the function in use (would need to be within the WP loop).

Wanted to give a front-end dev like Sam the ability to define the important bits, including the default image size for the src attribute, the media queries for the sizes attribute, and classes for the img element if necessary.

Edit 23 Jan 2019
This isn’t necessary anymore, responsive images have been part of WP core since v4.4. They’re implemented on wp_content automatically via a filter. Use their related functions if you need to do something custom. Responsive images are behaving a little erratically on my site though, so will have to take a look at why that might be happening.