Published

SUCCESSFUL Adventures in setting up ActivityPub + Webfinger on a Flywheel-hosted WordPress site

Updated 31 October 2023 at 2:45pm to edit the NGINX config and give a further explanation.

I gave up too soon!

Emerson from Flywheel did more digging in the Fastly cache documentation and realized that we could tweak the NGINX config to fully support content negotiation. He added a Vary header to the necessary URLs et voilà, everything started working properly. Now, courtesy of Matthias Pfefferle’s great WordPress plugins and Flywheel’s dogged help, you can follow this blog on Mastodon if you search for @blog@piperhaywood.com or https://piperhaywood.com/@blog.

For future reference, this is the NGINX config tweak that got ActivityPub and Webfinger working on Flywheel with their Fastly caching setup:

location ~* /.well-known/webfinger {
    default_type application/activity+json;
    add_header Vary Accept;
    include internal-proxy.conf;
}

location ~* / {
    add_header Vary Accept;
    include internal-proxy.conf;
}

It’s fairly self-explanatory, but essentially the first location block ensures that all Webfinger endpoints have a default content type of application/activity+json, adds a Vary HTTP header so that Flywheel’s caching via Fastly will cache different versions of the page depending upon the content type, and includes further configuration via an internal-proxy.conf file. The second location block ensures that all URLs across the site basically do all of the above, but no default content type is set. (TBH I feel like I might only need the second block… but at this point everything is working nicely so I’m not going to ask the kind souls at Flywheel to change the config yet again!)

Colin from Flywheel explained the internal-proxy.conf file to me in my far-too-long support ticket:

The internal-proxy.conf is indeed an internal file that has platform-specific rules. Some of this config file is just simple cache rules, excluding common paths, whereas other parts are potentially sensitive as they pertain to our load balancing and proxy configs.

So that’s it! You can follow this blog now on Mastodon, and all blog posts published after October 30th should show up.

Published

Adventures in setting up ActivityPub + Webfinger on a Flywheel-hosted WordPress site

Update: We got it working! Take a look at this post for more.


I recently moved my hosting from NFSN to Flywheel. NFSN had served me beautifully for years, very economically, but I just don’t have as much time for admin anymore and Flywheel’s managed WordPress hosting was a useful move to cut down on that stress.

Alongside the hosting move, I’ve been trying to set up the very talented Matthias Pfefferle’s ActivityPub and Webfinger WordPress plugins to get this site on Mastodon.

Unfortunately, Flywheel doesn’t seem to play super nicely with the plugins. Part of this is Flywheel’s NGINX configuration which they lock down tight with good reason. But the bigger sticking point is Flywheel’s full-page caching mechanism. Though their caching provider supports content negotiation, Flywheel itself does not. This causes issues where JSON can end up being cached instead of HTML on various pages, most notably the homepage. (Apologies if you saw a JSON blob when visiting this site recently!) We tried to get around this by forcing the content type on the homepage and Webfinger endpoints, but JSON was still served up on the homepage whenever a client sent through a header with Accept: application/activity+json.

For now, I’ve deactivated the plugins. I’m hoping that Flywheel might look in to supporting them more broadly, but that realistically depends on demand from their customers. For posterity since I hope to revisit this in the future 🤞, here is the discussion about all of the above within the Webfinger repo, including some tips from Matthias.

Flywheel’s support staff have been pretty fantastic through all of this and I’ve been really happy with the hosting thus far so I’m not tempted to move hosts (again) for this. Not yet at least!

Published

Thoughts on LAMP vs JAMstack content management systems

Chris Coyier recently published a CSS-Tricks post titled “WordPress and Jamstack”. It’s a great rundown of the pros and cons, and I’m in agreement on the whole.

The most important point for my own use cases is from the section titled “CMS and End User UX”.

Sometimes, we developers are building sites just for us (I do more than my fair share of that), but I’d say developers are mostly building sites for other people. So the most important question is: am I building something that is empowering for the people I’m building it for?

I really enjoy working on JAMstack (JavaScript, APIs, Markup) sites, the dev environment can be spectacular. It’s wonderful to not worry about deployment, HTTPS, caching. BUT. I haven’t yet found a JAMstack content management system (CMS) that I love, so it’s not something I feel super comfortable reaching for in the majority of my client work.

Read more

Published

Commonplace WordPress theme

I’ve been gradually updating the WordPress theme that powers this site with the help of a very talented designer and thinker, my friend Bec Worth.

It began with conversations about overhauling her own site. She had a few disparate Tumblrs with a ton (and I really do mean a ton) of great references, photos, and more that had accumulated over the years. All of them had fallen in to disuse for one reason or another, but she still felt like some sort of outlet for collecting these sorts of snippets and longer-format writing would be really useful. She brought up the Commonplace book as a particular inspiration. I’d never come across it before but it really resonated.

We continued talking about her site, and I started to restructure my old color-heavy Notebook theme (view in Wayback Machine) to strip out the less necessary functionality, improve the accessibility, etc. I wanted to make it something that could be more widely useful to not just me and Bec, but others as well. The early version of this new theme used variable Work Sans (view in Wayback Machine)

She liked where it was going, so we got her set up on a WordPress instance and used the Tumblr importer to pull in all of that old content. Since then, we’ve been using her log and my site to test out ideas and continue pushing the idea of what a Commonplace Book could be on the web. For more along these lines, I recommend reading her post “What would a Commonplace Book feel like on the web?

What’s next

It’s far from finished. The type is nowhere near as tight as Bec’s designs, I need to spend a bit more time on that! Amongst other things, I need to clean up the table of posts, add a thumbnail view, and improve the gallery block styles. We’re also going to figure out a way of highlighting work and other projects, something that draws a bit more attention than normal posts.

And color! We’d like to make it possible for people to select preferred text colors, maybe on a post-by-post basis or per category. Color is tricky though, I’d like to preserve some baseline of legibility and I’m not sure how much I could do as the developer to enforce that. Also, how do we handle this if we introduce dark mode support? The HSL or LCH color spaces might be helpful.

I’m not planning to submit this to the WordPress theme directory. Right now, this means that installation and updates are pretty manual, the theme has to be uploaded via FTP before it can be installed. Because of that, I’ll eventually set up an update server so that anyone using the theme can perform one-click updates from the WordPress admin area. Note to self: see this article for more on how to do this.

Realistically, people using the theme might want to change up certain aspects of the theme to be more “them”. Instead of adding a ton of theme options like font pickers and that sort of thing, I’d like to encourage people to tinker with it themselves. This is going to require a bit of documentation to point people in the right direction. I’ll probably start with how someone with little-to-no CSS experience could go about changing the font (i.e. upload font files in the Media library then add the necessary CSS lines in the Customizer, or setting up a child theme).

Clearly, it’s a work in progress!

But anyone is welcome to give it a try for themselves. I recommend it if you’ve been looking for a place to keep important references or get thoughts out of your head. Head to the commonplace-wp-theme GitHub repository to download it and read a bit more.

If you do end up using it, we’d love to know.

Published

Sorting out WordPress error “Updating failed. Error message: The response is not a valid JSON response”

I moved a brand new WordPress site on to new hosting recently and was confronted by an “Updating failed. Error message: The response is not a valid JSON response” error. Seemed kind of inexplicable, not a lot of info in the console either. I’ve done the same thing a bajillion times with this and other hosting providers and have never run in to this error, so it seems kind of weird.

This issue on GitHub outlines a lot of the potential causes, but this comment specifically sorted out my problem. Turns out you just need to flush the permalinks? Another off-then-on-again type of fix.

I think the WordPress devs might eventually create a more helpful error message for this, but in the meantime this is worth keeping in mind.

Published

WordPress “Upgrade database” process hangs on Laravel Valet

I’m working on a WordPress site for a client that involves importing a whole bunch of their legacy content. I decided to work with a copy of their old database for this. I set it up locally in Sequel Pro, accessed /wp-admin, and was met (as expected) with a “You must upgrade this database”-style screen. I clicked the button and… nothing. Eventually I had a 504 error.

I use Laravel Valet to develop PHP sites locally on my MacBook Pro, so I checked the NGINX error log ~/.config/valet/Log/nginx-error.log for hints about what was going on. I repeatedly saw an error along these lines (highlighted bits are altered by me to be more generic):

YYYY/MM/DD HH:SS:MM [error] 52486#0: *14 upstream timed out (60: Operation timed out) while reading response header from upstream, client: 127.0.0.1, server: , request: "GET /favicon.ico HTTP/1.1", upstream: "fastcgi://unix:/Users/username/.config/valet/valet.sock", host: "hostname"

I searched online and found a bunch of suggestions, about checking the valet.sock file, about increasing the fastcgi settings in the NGINX config, etc. Nothing seemed to work.

I then came across this issue which sounds super similar, and they seemed to resolve it with a reboot.

Worked for me too. Turn it off and on to the rescue again. Wanted to mention it here in case anyone else is banging their head against the wall at some point.

Published

Switching from Google Analytics to Matomo (f.k.a. Piwik) on WordPress

It’s a new decade, time to leave Google Analytics.

A big part of me wants to say screw it, just get rid of analytics altogether. But I find it interesting. I’ve never used it to decide what to write, and I don’t think I ever will, but it’s just fascinating to find out what makes the rounds. I’ll never know why a short post about repairing my mom’s straw bag was my most popular post for years, but I’m glad to know a lot of people checked it out.

So I decided to keep my Google Analytics property in place and just locked it down as much as I could. I adjusted the script to respect users’ Do Not Track browser settings (Paul Fawkesley has a short article about how to do this). I also configured Google Analytics to anonymise IP addresses, and I deliberately disabled Data Collection for Advertising Features, Demographics and Interest Reports, User-ID, and all data-sharing settings. I also set a low data retention policy to make sure old data would get deleted.

None of this changed the fact that I was still sharing data with Google.

Read more

Published

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.

Published

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.

Edit 08.11.19 – Added Mozilla accessibility blog post