Published by

New role, big emotions, top of the tops

A few recent happenings.

I started working with the excellent Eames Institute last week as Engineering Lead. 🎉 It’s been good fun so far, and seems like a great team. A heck of a lot of things I care about are rolled up in that one role.

B is a gorgeous ball of wants and needs and joy and sorrow. He watched The Snowman last night with Sam for the first time while I was cooking dinner, I’m not sure he was emotionally prepared for the ending. 😢 And I wasn’t emotionally prepared for his reaction.

Recently, I got B a top for the first time in preparation for a long Thanksgiving flight. It didn’t capture his attention as much as I was hoping, hey ho, but on the flip side, I absolutely love it. I’d forgotten how fun tops are, and it reminded me of the most recent exhibition by the Eames Institute on their toy collection, particularly their tops. I can completely understand why someone would collect them, and could imagine slipping in to that…

Then I started looking in to their history, I had no idea how many different types of top there are! There’s even one that flips over while in motion to spin on its stem. Looking in to tippe tops took me to the absolutely glorious Grand Illusions channel on YouTube run by ex-BBC presenters Hendrik Ball and George Auckland and collector + presenter Tim Rowett. Besides their video about the tippe top, they have well over 500 videos on many other toys from Tim’s 20,000+ toy collection. This one particularly tickled me. I used to have that dolphin pen! And my god, do I want one of these.

Published by

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 by

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 by

Thoughts on search, AI as a rubber duck, and this blog

I’ve been working on a little side project recently that has been in the backlog for ages. I finally have a moment to pull it together, and it’s helping me brush up on a few Next.js 13 features I haven’t had the chance to play with yet.

As part of that, I’m doing a lot of searching around best practices on this that and the other, particularly server side rendering. It’s the first time in a while that I’ve been pointedly trying to use the internet to teach myself something in-depth related to coding, as opposed to finding quick sporadic answers.

Read some rambling thoughts on search 🔍, AI as a rubber duck 🦆, digital gardens 🪴, and the future of this blog 🧠

Published by

Dave Rupert’s animation-timeline example

See Dave Rupert’s post on scroll shadows with animation-timeline. Browser support isn’t quite there yet so it’s more of a progressive enhancement, but this is a great use case example.

He wrote that off the back of Bramus’s scroll-driven animation exploration, and wow. So many of those behaviors would have been useful on past projects…

Published by

“Kill your personas”

Counterpoint to yesterday’s post: “Kill your personas: How persona spectrums champion real user needs” by Margaret Price at Microsoft.

A persona spectrum is not a fake person. It’s an articulation of a specific human motivation and the ways it’s shared across multiple groups. It shows how that motivation can change depending on context. Sometimes, a trait can be permanent, like someone who has been blind since birth. A person recovering from eye surgery might temporarily have limited or no vision. Another person might face this barrier in certain environments, like when dealing with screen glare out in the sun. How would your product adapt to this range of people and circumstances with similar needs?

I can get behind that!

Related, check out Microsoft’s Inclusive Design Toolkit. (Though I reeeeeally wish that were a webpage…)

Via Doug Belshaw’s “Temporarily Abled” article on Thought Shrapnel.

Published by

GDS’s Accessibility Personas

If you’re a designer or engineer and have never dug in to accessibility personas or cognitive walkthroughs before, I’d recommend checking out GDS’s accessibility persona homepages and their accompanying blog post about how they use persona profiles to test accessibility. As of right now, their profiles include the following personas:

  • Claudia – a sight impaired screen magnifier user
  • Ashleigh – a severely sight impaired screenreader user
  • Ron – an older user with multiple conditions
  • Chris – a user with rheumatoid arthritis
  • Pawel – an autistic user
  • Simone – a dyslexic user
  • Saleem – a profoundly deaf user

It’s no substitute for testing with real users, but it’s a big step in the right direction if it’s not already a part of your design and engineering process.

Published by

A long-overdue work update

It’s been a wild few months professionally.

Earlier this year, I was asked to be the Engineering Manager at SuperHi and started in that role in May. That same month, I gave a talk at Parsons on the invitation of Eric Li and Michael Fehrenbach for their Typography and Interaction students in the MPS CD program. Maybe a month or two ago, SuperHi CEO and friend Rik Lomas and I were interviewed by Aja Singer for the recently-released first episode of her new podcast “Interview Stack” which offers a “deep dive on the engineering hiring process”. She’s a great interviewer, I’d keep an eye on her work.

And then over two thirds of us were laid off from SuperHi yesterday!

It’s unfortunate but understandable given the circumstances, it’s a tough world out there for startups right now. I really wish nothing but the best for the remaining SuperHi team and hope they’re able to reach the lofty goals that we set for ourselves. It’s a great platform and community with so much potential. I recommend checking out the courses and workshops that we recently released including one on generative art, one about Squarespace, and another on integrating AI on the web. There should be a lot more to come soon, SuperHi’s newsletter is the best way to get updates if you’re interested.

We achieved so much together. Personally, I’m really proud to have improved a lot of the accessibility practices, project management, QA, knowledge transfer processes, and documentation at SuperHi, even though some of that isn’t publicly visible just yet. I’m proud of the code I wrote and the languages and frameworks that I learned while there, going from working largely with CSS, HTML, JS, and PHP before to working heavily with TypeScript, Next.js, and React across multiple interconnected projects in a monorepo. I’m also really proud of the quality of our collaboration both across SuperHi in general and particularly within the Engineering team specifically. We shared extremely trusting working relationships which isn’t easy, especially when working remotely.

It’s sad to not be a part of that anymore, and it’s tough when you’ve been working towards a goal so hard for so long and then suddenly the next morning is a blank page.

But I am looking forward to pottering a little. A little blog gardening, improving performance on this site (when did it get so effing slow?! the cobbler’s children have no shoes etc. etc.), maybe finally setting up the bookshelf site I always wanted to make. Will have to do a little bit of LinkedIn cleanup. ::makes gagging sound:: And I had the last week of summer scheduled off anyway so I’ll be spending that fully focused on B, probably wandering in and out of all the water features in every playground within a 5 mile radius.

If anyone has interesting opportunities to share, please give me a shout.

And please do share this with your friends. I think I’m looking for another software engineering role at a remote USA- or UK-based company, or in-person at a NYC-based company. But I’m going to think about it a little more and am aiming to post again soon with more specifics.

Of course I wasn’t the only one, there is a lot of other ex-SuperHi talent out in the world now too including top-notch designers, razor-sharp teachers, meticulous engineers, brilliant strategists, and community management geniuses. I’m not going to post names here just yet because I want to verify who would like what shared, but if you have any opportunities along those lines, send them my way and I’ll make sure they reach the right eyeballs.

Now, time to relax a little during our remaining few days visiting family in the UK. Below are the flowers that my mother in law picked from her garden for me after she heard the news. I wish Smell-O-Vision was a thing, because these are pretty fantastic.

I’ll be back in Brooklyn on Sunday. If you happen to be nearby in the coming weeks, let’s get a coffee or go for a stroll in Prospect Park or something.

Until soon x

A small bouquet of pink and purple sweet peas in a glass bottle on a white kitchen counter

Published by

The serial (“Oxford”) comma and screen readers

People think that serial / “Oxford” commas should be an optional style thing. But if you’re writing for the web, please use it.

Here’s an example of a sentence without a serial comma:

Please bring Jack, your brother and your uncle to the party

And an example of a sentence with a serial comma:

Please bring Jack, your brother, and your uncle to the party

First point: the second sentence makes it much clearer that Jack isn’t some questionable relative and that you’re meant to bring three people to the party.

Second point, and more the point of this post: the sentence with the serial comma is much more intelligibly read by screen readers, particularly when content is being read quickly.

Use the serial comma!