brianperry.dev

Initial Impressions of Claude Design

Sun, 19 Apr 2026 00:00:00 GMT

I've been poking at Claude Design over the past few days, using it to explore a redesign for an app I'm working on. In general I'm impressed, but it is still very much an early unstable release as the Anthropic 'labs' label implies.

The output is surprisingly good

This is the headline. I've tried other AI design tools (Google's Stitch, Banani, UX Pilot) and Claude Design is miles ahead. It produced a design revision that I looked at and thought "I'd actually build that." And then I did. I'm currently porting the concept into real code, which is about the strongest endorsement I can give a design tool like this.

That's a first for me with this category of tool. Usually the output is either too generic to be useful or too far from what I actually want to be worth iterating on. Claude Design landed in the sweet spot where the design felt opinionated enough to be interesting but connected enough to the current state of the app that I could run with it.

Still very much experimental

There are rough edges. The tool made minor, unprompted changes to my preferred design that I couldn't figure out how to revert. I've seen people on social media complaining about designs vanishing entirely (I haven't hit that myself, but I ran into the same issue frequently with Stitch, so I believe it). General navigation within the app feels a little awkward too. None of this is surprising for a brand new tool, but it's worth noting.

Token hungry

I've been working on one design, on and off, over a weekend and I hit my weekly Claude Design limit with five days to go. Either it's burning through tokens fast or the limits are set conservatively right now (probably both). This also might be a side effect of using default of Opus 4.7. For casual exploration this is fine. For sustained design work across multiple projects, you'll feel the ceiling quickly.

The Claude Code handoff needs work

There's a "hand off to Claude Code" option, which in theory is the killer feature. In practice, at least for my use case of redesigning an existing app, it needed a lot of follow-up refinement. The handoff got me partway there but I spent a significant chunk of time cleaning things up afterward.

For comparison, I find Figma's MCP much more useful for getting designs into code right now. If Claude Design's handoff eventually reaches that level, this becomes a must-use tool. It's not there yet.

Bottom line

Even with the rough edges, I'm genuinely impressed. The core output quality is strong enough that I'm actively building from it, and that puts it ahead of everything else I've tried. I'm looking forward to watching it improve over time.

This post was co-authored with my agent assistant, Ryan Terry.

Porting My OpenClaw Assistant to Claude Cowork

Mon, 13 Apr 2026 00:00:00 GMT

In early January I saw a number of people I follow exploring the concept of building stateful agent assistants. What really caught my attention was Tim Kellogg's post about Strix the Stateful Agent. Inspired, I started building my own. The goal was that it would be my daily driver for keeping track of what I was working on, prepping for standups, and generally offloading the mental overhead of maintaining a work log.

And then, as things go these days, OpenClaw (Clawdbot at the time) came along and upended everything. Out of the box OpenClaw could do everything I was trying to build and a lot more. So I switched over. It mostly worked - but it required real effort to maintain, and I found myself spending more time managing bugs and infrastructure than actually using the assistant. That friction is what eventually pushed me toward Cowork: I wanted to see how much of the same workflow I could rebuild without worrying about the infrastructure at all.

This post walks through what I built, how I built it, and what the migration looked like in practice.

What OpenClaw Did

If given the permissions, OpenClaw can do just about anything. But my initial goals were pretty simple. At its core, my OpenClaw was an assistant hosted on a VPS (I'm not currently willing to let it run wild on a machine on my network) and wired up to a few key workflows:

Work logging - I could tell it what I was working on and it would keep a running, timestamped log
Standup summaries - It would pull from the log and generate a concise summary for my morning standup automatically 15 minutes before the start of the meeting.
Periodic check-ins - If I'd gone quiet for a while, it would nudge me for an update
Blog post brainstorming - It could review my recent work log and suggest angles for posts

I also needed it to be available across all of my devices. For this setup, this was accomplished by communicating with OpenClaw via Discord.

The pain points were mostly operational: keeping the self-hosted model updated, managing the infrastructure, and dealing with the occasional reliability quirk. I also ran into Anthropic rate limits off and on that I had to debug.

Since this was meant to make my life easier, even small hiccups and debugging were pretty much a non-starter. I do enough debugging every day, the last thing I want is to have to maintain what is essentially a fancy journal that keeps breaking in new and interesting ways.

I have no doubt that the workflow introduced by OpenClaw is here to stay. I'm just going to have to revisit it when it is ready for more than just the earliest of early adopters.

Why Cowork

Cowork solved the specific pain points I was hitting with OpenClaw. No VPS to maintain, no updates to stay on top of, no rate limits to debug - just a desktop app from Anthropic with built-in scheduled tasks and persistent file access to a folder on my machine.

The tradeoffs are real. Cowork is much more locked down than OpenClaw and runs in a sandbox. Going from the freewheeling nature of OpenClaw to the workflow-oriented nature of Cowork meant giving some things up - no out of the box agent memory, no Discord bot I could ping from my phone, and no ability to wire up arbitrary integrations on a whim. But I felt confident that most of the process I was aiming for would be possible in either system, just with different mechanics. Worst case, I'd learn about the limits of Cowork and keep looking.

Building the Basic Workflow

The Work Log

The first thing I asked Cowork to set up was worklog.md — a plain markdown file that serves as the running log of everything I work on. The format is simple:

## 2026-03-14

**16:30 UTC** — Reviewed and merged an update to the More Later browser plugin...

**16:47 UTC** — Did initial setup of the Claude Cowork system...

I tell Claude what I'm working on in plain language, and it handles the timestamp (via bash) and appends the entry under the correct date heading. No special syntax required on my end.

As I started adding work log entries, I realized that I needed light categorization. Essentially to keep noise out of my daily standup updates I needed to determine what was business and what was personal. I can provide a category when I update, but if I don't the agent will assign one for me. If it doesn't have enough information to know for sure, it asks.

Scheduled Check-ins

This system is really only useful if I stay current with updates. It is extremely easy to get heads-down on something and forgot to log it, and then completely forget what I have been working on for the past five hours. As a result, I often need a poke to be reminded to update the work log.

In Cowork, I set this up as a scheduled task that runs at 9am, 11am, 1pm, and 3pm on weekdays. Each time it fires, it reads worklog.md, checks the timestamp of the most recent entry, and — if it's been more than two hours — asks me for an update. If there's a recent entry, it stays quiet.

Daily Standup Summary

At 10:45am every weekday, a second scheduled task reads the last 24 hours of worklog.md and generates a concise standup summary. By the time my standup rolls around, I've got a tight summary of what I worked on the day before, ready to go.

Blog Post Brainstorming and Publishing

This one is on-demand rather than scheduled. When I want to brainstorm blog ideas, I ask Claude to review recent log entries and surface anything worth writing about — interesting technical decisions, workflows, tools. It suggests angles and titles, then helps me draft the post when I've picked one. (Meta note: this post was kicked off exactly that way.)

Drafts get saved to a blog/ subfolder in the Cowork workspace. When I'm ready to publish, Claude handles the conversion to site format — transforming the draft into the frontmatter and markdown structure my Astro site expects, writing it directly into the repo at src/content/posts/YEAR/filename.md, and wiring up any images alongside the post file.

The one thing Cowork can't easily do is run the dev server for a live preview. For that step I hand off to Claude Code, which can run pnpm dev locally without any issues. It's a minor seam in an otherwise smooth workflow.

Persisting the Workflow

CLAUDE.md as the System's Source of Truth

One of the things that makes OpenClaw feel like magic is its memory system. Cowork does not have this out of the box. But since it is Claude at the end of the day, it is easy to add.

The glue holding all of this together is CLAUDE.md, a markdown file that Cowork reads at the start of every session. It documents the entire system: how to add log entries, how to generate standup summaries, what the scheduled tasks do, and an instruction to keep itself updated whenever the system changes.

# Claude Instructions

## Keeping This File Up To Date

Whenever changes are made to this system — such as adding new scheduled tasks,
modifying workflows, or updating logging behavior — this file should be updated
immediately to reflect those changes. CLAUDE.md is the source of truth for how
this setup works, so it should always stay current.

When I want to establish a repeatable process like the daily standup summary, I'll ask Cowork to document it in Claude.md. It typically does a great job writing rules for itself to follow. I wish I was as good at that. And if Cowork needs another nudge, I can always modify CLAUDE.md manually.

### Daily standup summary

When Brian asks for a standup summary, read `worklog.md` and summarize all entries from the last 24 hours in a concise standup format:

- Group entries into **Actual AI** and **Personal** sections
- What was worked on / completed
- Keep it brief and scannable — this is for a standup, not a report

Sync

In order to use this on more than one device, we need to sync these files. This was harder than I expected using OpenClaw on a VPS - logging into the server to access the files is inconvenient, and committing them using git could work but was not as lightweight as I wanted this process to be.

For this new setup, I just took a lo-fi approach and configured iCloud sync for the folder that Cowork operates in. This allows me to use this assistant on any Mac that I have the Claude app installed on. The one manual thing I have to do when using Cowork on a new machine is ask the agent to create the scheduled tasks referenced in CLAUDE.md. Those do not get created automatically.

For mobile, I can use the dispatch feature to use Cowork remotely when my machine is on. That only gets me some of the way there as it requires my machine to be powered on and awake, and isn't quite the same interface as Cowork on desktop. For cases where dispatch won't work, I also have this folder configured as an Obsidian vault and can edit the necessary markdown files directly.

Takeaways

I'm happy with this workflow on Cowork so far. I know I'm missing out on the magic of having a fully autonomous OpenClaw agent, but I gain quite a bit in return. Not having to maintain a VPS means I'm not responsible for securing the box it runs on, and Cowork's sandbox means I'm not lying awake wondering what my agent decided to do at 2am. On the reliability front, I've never really had to "fix" anything about this workflow since I established it. No mysterious rate limits, no debugging infrastructure - just a reliable worklog that, for once, doesn't keep breaking. (This post, for what it's worth, was brainstormed, drafted, and published using the very workflow it describes. So at least the system works well enough to write about itself.)

The biggest concrete loss is cross-device availability. OpenClaw via Discord meant I could log updates from anywhere. Cowork is Mac-only, and while dispatch and Obsidian fill some of the gap, it's not the same seamless experience. That's a real tradeoff worth knowing about upfront.

Perhaps over time I'll run into more limitations as I try to do more with it, but I also suspect that Cowork's feature set will continue to expand. Either way, if your assistant needs its own assistant, something's probably off.

This post was co-authored with my agent assistant, Ryan Terry.

Heading Back to DrupalCon

Mon, 23 Mar 2026 00:00:00 GMT

I'll be at DrupalCon Chicago this year. It's right in my back yard, so I really have no excuse not to show up.

I've been away from the Drupal world for about a year now. Most of my time lately has been focused on building Actual AI, working with AI tooling, and spending time in the broader JS ecosystem. All good stuff, but it's meant that aside from continuing to maintain the API Client, Drupal has been in my periphery rather than front and center. I wrote a bit about how that happened in my last post, and honestly it still feels a little weird to have drifted from something that was such a huge part of my professional life for so long.

DrupalCon is a good moment to change that — to check back in with a project and community I care about, see where things have headed, and reconnect with people I haven't seen in a while.

A few things I'm particularly curious about:

How the project is thinking about AI

This is the thing I'm most eager to dig into. I've spent a lot of the past year building with LLMs — building agents, wiring AI into personal workflows, working on Actual AI. I'm curious how Drupal is approaching AI integration, what's landed, what's still being figured out, and where the interesting open problems are.

Getting hands on with Drupal Canvas and code components

I followed along with early development, but I haven't actually gotten my hands dirty with the stable release yet. I'm especially interested in experimenting with code components since the Drupal JSON:API Client is available out of the box for use in Canvas. This is likely what I'll be focusing on during contribution day if anyone is interested in collaborating (or just wants to hang out.)

Sharing what I've been working on

Part of coming back is bringing back what I've learned. Building with AI day-to-day has changed how I think about a lot of things — how I prototype, how I approach problems, what I'm willing to attempt. I'm looking forward to conversations about what that actually looks like in practice, and whether any of it maps back to Drupal in useful ways. At a minimum I'll have some strong opinions and wild demos to share.

A big thank you to MidCamp for providing my ticket. If you're going to be there, come say hi. I'll be the one who looks like they have forgotten how the LAMP stack works.

2026 Oscars Films

Sun, 15 Mar 2026 00:00:00 GMT

It's Oscars time, so here's a quick rundown of my thoughts on all ten Best Picture nominees.

My Favorites

One Battle After Another - My favorite film of the year. Paul Thomas Anderson at his most propulsive and crowd-pleasing, even though it's still plenty strange. Another movie feels really of the time. Benicio del Toro turns in my single favorite performance of the year.
Bugonia - I'm a sucker for movies that take sharp turns into sci-fi, and Bugonia delivers on that. The internet conspiracy theorist element felt very of the moment too. My second favorite film of the year.
Frankenstein - A take on the classic tale that had me all the way through. Jacob Elordi's performance was excellent, and it's my wife's favorite film of the year. Probably my third favorite of the year as well.

The Rest

F1 - Entertaining enough, even if Brad Pitt's character would have been banned from F1 racing ten times over in the course of the film.
Hamnet - Found most of the film a little too over the top, but the conclusion was extremely effective and moving. Jessie Buckley's performance is hard to deny.
Marty Supreme - A little too over the top for its own good. I was hoping for a bit of a change of pace now that the Safdies are working individually, but it felt more like Uncut Gems with ping-pong than I was expecting.
The Secret Agent - Didn't really come together in a way that made sense or was satisfying for me. Has a lot in common with I'm Still Here from last year, which covers similar ground better.
Sentimental Value - Was a little too Oscar-y and distant when I first watched it, but in hindsight it has stuck with me more than I expected.
Sinners - Highly entertaining, but made some strange story choices that I didn't love. Can't say no to dual Michael B. Jordans though, and even though I prefer One Battle After Another, a late campaign surge for this film would be fun.
Train Dreams - Didn't love this one. Wonderfully shot, but too traditionally Oscar-y. And frankly, not enough trains. If I had to pick between the vroom vroom movie and the choo-choo movie, I pick the vroom vroom movie.

My Picks

20/24 correct.

Category	My Pick	Winner
Best Picture	One Battle After Another	✓
Best Director	Paul Thomas Anderson, One Battle After Another	✓
Best Actor	Michael B. Jordan, Sinners	✓
Best Actress	Jessie Buckley, Hamnet	✓
Best Supporting Actor	Sean Penn, One Battle After Another	✓
Best Supporting Actress	Amy Madigan, Weapons	✓
Original Screenplay	Sinners	✓
Adapted Screenplay	One Battle After Another	✓
Casting	Sinners	✗ One Battle After Another
Editing	One Battle After Another	✓
Animated Feature	KPop Demon Hunters	✓
Documentary Feature	The Perfect Neighbor	✗ Mr. Nobody Against Putin
International Feature	Sentimental Value (Norway)	✓
Production Design	Frankenstein	✓
Costume Design	Frankenstein	✓
Cinematography	One Battle After Another	✗ Sinners
Makeup and Hairstyling	Frankenstein	✓
Sound	F1	✓
Visual Effects	Avatar: Fire and Ash	✓
Original Score	Sinners	✓
Original Song	"Golden" (KPop Demon Hunters)	✓
Animated Short	Butterfly	✗ The Girl Who Cried Pearls
Documentary Short	All the Empty Rooms	✓
Live-Action Short	Two People Exchanging Saliva	✓ (tie with The Singers)

Other Thoughts

Pulling for Amy Madigan in Best Supporting Actress. Aunt Gladys forever.
I'd be fine with Conan hosting the Oscars forever.
I'm going back and forth on if things are really up in the air, or this is actually a surprisingly predictable year. We'll find out soon enough.

I Broke (and Fixed) A Guitar String

Fri, 13 Mar 2026 00:00:00 GMT

I got an electric guitar in late December. And in February I broke a string (strum too hard much?) I knew at some point I would eventually break a string. My assumption was that I would have to take it somewhere to be restrung, or maybe I would just throw my guitar away and quit playing altogether.

Instead, I tried doing it myself. I knew it would probably be bad. I bought multiple sets of guitar strings assuming that I would do it wrong the first time. I kind of did do it wrong. In the picture below, can you determine which string was the one I restrung? I bet you can.

Ugly, but it works. And it sounds fine, at least to my not very well trained ears. But something about this experience stuck with me. I'll probably restring this guitar multiple times. But I'm just left with the lingering thought that there's something special about doing something poorly for the very first time.

(Aaron Lewis Voice) It's Been A While

Sun, 22 Feb 2026 00:00:00 GMT

2025 was a strange year. That almost certainly factors in to why I really didn't post here.

Navigating a Layoff

On a cold February morning in 2025, I came in from snow-blowing my driveway only to sit down at my laptop and realize I couldn't log into Slack, and then Google. That was enough to realize I was experiencing the classic tech company goodbye. It was my first time ever being laid off, but with the current market, I couldn't be shocked. I took a few minutes to collect my thoughts, called my wife to let her know, and then it was off to LinkedIn (gross) to start the process of figuring out where to go from here.

I had an outpouring of support pretty much instantly once I posted on LinkedIn. My connections in the Drupal community really helped - without them, navigating the layoff would have been much harder. Personal connections made all the difference. If I was chasing unsolicited applications I would have lost my mind.

As I explored my options, I was quickly able totake on contracting work with a company called Actual AI. This made a huge difference in lessening the blow of my job transition and providing stability as I figured out what's next. It also unsurprisingly changed the way that I used AI in my development workflow and opened my eyes to the changes that are happening right now.

I eventually took a full time Founding Engineer role with Actual AI. Working at an early stage startup is not without its challenges, but the work has been really interesting and I've taken on many things I probably wouldn't have been able to do elsewhere (at least not on this timeframe.) Looking forward to what is ahead this year.

All of these changes have kept me out of the loop with the Drupal community aside from attending Midcamp and NEDCamp. At times that made me feel a little unmoored since it was such a big part of my professional life. The Drupal API client is a dependency of Drupal's next generation page builder, so keeping that maintained will be a fun way to keep my link back to Drupal alive.

Family Fun

We went on a Midwest road trip during our summer vacation. The header image from this post is one of the amazing views we took in at Badlands National Park. We didn't have any major travel mishaps and stayed at an amazing bed and breakfast.

My son started high school, which is still wild to think about. He's been busy playing percussion in the marching band and jazz band in addition to all of the regular high school things. And as an added bonus the football team made a solid run which made the marching band events even more entertaining.

Things That Kept Me Sane-ish in 2025

Switch 2 - had a great time following the lead up and eventual launch of the sequel to my favorite game console of all time. Played a ton of Donkey Kong Bananza as well.
Guitar - kept a pretty good pace of learning guitar. So much more to learn, but can actually kind of play a few things at this point. Got an electric for Christmas as well.
Snuck out to a few concerts - David Byrne and Bear vs. Shark were (very different) highlights pretty much back to back.
Made pizzas of varying quality - got one of those small wood fired ovens and tried to learn how to make a reliable pizza. Improved along the way, but stil not as consistent as I'd like.
The Patriots got good again out of nowhere - thought we'd be looking at years for Vrabel to get us back to the playoffs, but this was way better. Well, as long as you don't think about the Super Bowl...
Albums - my favorite album of the year was Never Enough by Turnstyle but the best album of the year was Getting Killed by Geese.

Hopes for 2026

I'm looking forward to seeing Actual AI evolve and grow.

I've been working on an app on the side as a way to continue exploring what is possible both using AI, and building with AI. I'll be upset if I don't launch it in some form this year. Of course, I said that last year as well.

I have some ideas about how I could share more frequently at this site, but just getting this post out the door was a big milestone. We did it!

2025 Oscars Films

Sun, 02 Mar 2025 00:00:00 GMT

For the past handful of years I've made a point to watch all of the films nominated for Best Picture at the Oscars. Here are my quick thoughts on what I've seen this year, along with some bonus films I've seen from other nominated categories.

My Favorite of the Year

Nickel Boys - this movie felt like the best kind of magic trick to me. I was initially distracted by the first person viewpoint of the film. Eventually that disorientation vanished, leaving me deeply connected to the story. Once I was all in, the changes in perspective, time and other twists felt so well earned. A crime that this wasn't nominated for cinematography. I'll be thinking about this one long after this Oscars season is over.

Best Picture Nominees

Anora - felt like two or three distinct movies in one, but they all worked well as a whole. Mikey Madison's performance was grounded and believable despite all the surrounding chaos. Would love to see this win Best Picture as is being predicted, but something tells me the Academy will chicken out. Also need to go back and watch some of Sean Baker's other films.
The Substance - I love that a movie this fucked up made the cut. I have some structural problems with it, especially in the third act, but I don't think a movie like this really cares about structure, logic, or reality. Enjoyed the disorienting way it was shot once I settled in, and boy oh boy those last few scenes. Too many needles though.
Conclave - enjoyable, but a little to soap opera-y for me. And the twist at the end didn't feel earned at all. Never gonna say no to some Tucci though.
Emilia Pérez - speaking of movies that are trying too hard... I don't think this movie really worked overall, but Zoe Saldaña's performance was excellent regardless. Really wild that controversy has destroyed the chances of what was once an Oscar front-runner. Also wild that a portion of this movie essentially follows the plot of Mrs. Doubtfire.
Dune: Part Two - did nothing for me unfortunately. Couldn't remember enough of the first one, and generally found most of the movie baffling. Impressive to look at though.
The Brutalist - a lot to like here, but ultimately it fell apart in the second half for me. Cinematography and score are incredible and Adrien Brody is well deserving of his second best actor trophy. Too many needles though.
A Complete Unknown - Bob Dylan is great at music and treats women poorly. Got it. Nothing offensive about this movie, but musical biopics like this just end up feeling like people playing dress up to me.
Wicked - really enjoyed this when it was firing on all cylinders (which I assume was the stuff more directly sourced from the musical) and could feel it dragging when it was unnecessarily padding things out to support two films.
I'm Still Here - I was probably just a little burnt out on movies once I got to this one. The meat of the movie was good, but felt that the pacing was off early and late in the film. And I dock this a point for being the only film that didn't make it to streaming in time. Did get a laugh seeing how many other completists went solo to the 12:45 Sunday showing I was in.

Other Nominated Films

A Real Pain - A funny yet touching look at generational trauma. Kieran Culkin is great, even if he's squarely in his wheelhouse. And really appreciate that it is a tightly structured 90 minutes that doesn't outstay its welcome.
The Wild Robot - a great adaptation of a book that my son loved when he was younger. The animation is beautiful, but it tried to squeeze in too many competing themes in the third act.
Flow - glad I rounded out my list of animated films with this one, but think I might like the underdog story of a small team from Latvia using open source software more than I liked the movie itself.
Inside Out 2 - Pales in comparison to the first unfortunately. And I'm still mad that they low-balled some of the original voice cast.
Wallace & Gromit: Vengeance Most Fowl - Fun! Best use of creepy gnomes for sure. I haven't seen other Wallace & Gromit films, but the way Wallace was oblivious to Gromit's feelings bummed me out a little bit. They should break up.
Incident - extremely effective short assembled from security and body cam footage covering a 2018 Chicago police shooting. Great use of both silence, and competing multi-angle footage.
A Lien - a dramatization of a green card interview interrupted by an ICE raid. Maybe a little too on the nose, but still a tension filled short.

Nominated Films I'd Still Like to See

Sing Sing
The Apprentice
A Different Man

My Picks

Taking a bit of a flyer here and going with Conclave for Best Picture. With all of the uncertainty this year it feels like one of those years where the academy (and ranked-choice voting) gets it wrong.

<table class="table table-bordered" cellpadding="4" style="margin-top:20px; border-collapse:collapse; border-color:#999;" border="1"> <tbody><tr> <th width="50%">Category</th> <th>Winner</th> </tr> <tr class=""> <td align="left">Best Picture</td> <td>Conclave</td> </tr> <tr class=""> <td align="left">Actor in a Leading Role</td> <td>Adrien Brody in "The Brutalist"</td> </tr> <tr class=""> <td align="left">Actor in a Supporting Role</td> <td>Kieran Culkin in “A Real Pain”</td> </tr> <tr class=""> <td align="left">Actress in a Leading Role</td> <td>Demi Moore in "The Substance"</td> </tr> <tr class=""> <td align="left">Actress in a Supporting Role</td> <td>Zoe Saldaña in "Emilia Pérez"</td> </tr> <tr class=""> <td align="left">Animated Feature Film</td> <td>The Wild Robot</td> </tr> <tr class=""> <td align="left">Production Design</td> <td>Wicked</td> </tr> <tr class=""> <td align="left">Cinematography</td> <td>The Brutalist</td> </tr> <tr class=""> <td align="left">Costume Design</td> <td>Wicked</td> </tr> <tr class=""> <td align="left">Directing</td> <td>Sean Baker, "Anora"</td> </tr> <tr class=""> <td align="left">Documentary (Feature)</td> <td>Porcelain War</td> </tr> <tr class=""> <td align="left">Documentary (Short Subject)</td> <td>Incident</td> </tr> <tr class=""> <td align="left">Film Editing</td> <td>Conclave</td> </tr> <tr class=""> <td align="left">International Feature Film</td> <td>I'm Still Here</td> </tr> <tr class=""> <td align="left">Makeup and Hairstyling</td> <td>The Substance</td> </tr> <tr class=""> <td align="left">Music (Original Score)</td> <td>The Brutalist</td> </tr> <tr class=""> <td align="left">Music (Original Song)</td> <td>"El Mal" from ("Emilia Pérez")</td> </tr> <tr class=""> <td align="left">Short Film (Animated)</td> <td>Yuck!</td> </tr> <tr class=""> <td align="left">Short Film (Live Action)</td> <td>A Lien</td> </tr> <tr class=""> <td align="left">Sound</td> <td>Dune: Part Two</td> </tr> <tr class=""> <td align="left">Visual Effects</td> <td>Dune: Part Two</td> </tr> <tr class=""> <td align="left">Writing (Adapted Screenplay)</td> <td>Conclave</td> </tr> <tr class=""> <td align="left">Writing (Original Screenplay)</td> <td>Anora</td> </tr> <tr> <td>Tiebreaker: How many minutes will the awards show run (including commercials)?</td> <td>213</td> </tr> </tbody></table>

Talking Drupal - Single Directory Components Workflow

Wed, 05 Feb 2025 00:00:00 GMT

I was a guest this week on the Talking Drupal podcast to discuss my experience working with Single Directory Components in Drupal. I had a chance to use them extensively on a recent client project and developed a workflow that I was pretty happy with.

It was a great conversation, covering both the basics of Single Directory Components, how I’ve been using them, and how I see Single Directory Components evolving in future versions of Drupal.

You can watch or listen to the episode below, on the episode page on talkingdrupal.com, or in your podcast player of choice.

<audio controls="" style="margin-bottom: var(--size-7)"> <source src="https://traffic.libsyn.com/sacstudio/td-487-libsyn.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

Using Verbose Output When Applying Drupal Recipes

Sun, 02 Feb 2025 00:00:00 GMT

I've been slowly chipping away at a side project that includes a set of related Drupal Recipes. Given the repeatable nature of recipes, I apply them after a clean install frequently, and have a shell script that automates this process.

After some recent changes I found that one of my recipes was not applying cleanly. In an effort to debug, I ran the drush recipe command with the -v flag to get verbose output. Debugging aside, I found the output to be really useful.

Here's what I'd see when applying the sanctuary_graphql recipe without the verbose flag:

ddev drush recipe recipes/sanctuary_graphql
12/25 [▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░░]
Installed Simple OAuth & OpenID Connect module.
25/25 [▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓]
Applied Sanctuary GraphQL recipe.

 [OK] Sanctuary GraphQL applied successfully

and this is the output with the -v flag:

ddev drush recipe recipes/sanctuary_graphql -v
 [info] Drush bootstrap phase: bootstrapDrupalRoot()
 [info] Change working directory to /var/www/html/web
 [info] Initialized Drupal 10.4.1 root directory at /var/www/html/web
 [info] Drush bootstrap phase: bootstrapDrupalSite()
 [info] Initialized Drupal site sanctuary.ddev.site at sites/default
 [info] Drush bootstrap phase: bootstrapDrupalConfiguration()
 [info] Drush bootstrap phase: bootstrapDrupalDatabase()
 [info] Successfully connected to the Drupal database.
 [info] Drush bootstrap phase: bootstrapDrupalFull()
 0/25 [░░░░░░░░░░░░░░░░░░░░░░░░░░░░]
Applying recipe
 [info] decoupled_preview_iframe module installed.
 3/25 [▓▓▓░░░░░░░░░░░░░░░░░░░░░░░░░]
Installed Config Pages module.
 5/25 [▓▓▓▓▓░░░░░░░░░░░░░░░░░░░░░░░]
Installed Paragraphs module.
 [info] paragraphs_edit module installed.
 8/25 [▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░░░░░]
Installed Sanctuary module.
10/25 [▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░░]
Installed Iconify Icons module.
 [info] menu_item_extras module installed.
 [info] simple_oauth module installed.
13/25 [▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░]
15/25 [▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░]
Installed Typed Data module.
 [info] graphql module installed.
18/25 [▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░]
Installed Sanctuary GraphQL module.
20/25 [▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░]
Installed GraphQL Compose: Routes module.
 [info] graphql_compose_menus module installed.
25/25 [▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓]
Applied Sanctuary GraphQL recipe.

Modules installed
-----------------

 * Config Pages
 * Consumers
 * Decoupled Preview Iframe
 * Entity Reference Revisions
 * Frontend Editing
 * GraphQL
 * GraphQL Compose
 * GraphQL Compose: Edges
 * GraphQL Compose: Menus
 * GraphQL Compose: Preview
 * GraphQL Compose: Routes
 * Iconify Icons
 * Menu Item Extras
 * Paragraphs
 * Paragraphs Edit
 * Sanctuary
 * Sanctuary GraphQL
 * Serialization
 * Simple OAuth & OpenID Connect
 * Token
 * Typed Data

Recipes applied
---------------

 * Sanctuary Core
 * Sanctuary GraphQL


 [OK] Sanctuary GraphQL applied successfully

This is verbose (as advertised) but pretty essential information, especially if you're applying a recipe for the first time. Without -v all we really know is that the recipe was applied successfully. With -v we get a list of all of the modules installed, and also see that another recipe was applied as a dependency.

I'd often find myself either reviewing the source code of a recipe, or skimming the module page in the admin UI to understand what was actually included. This verbose output is a much quicker way to get that info.

From what I can tell, -v and -vv provide the same output. -vvv is more verbose, but I haven't found the extra info super useful as of yet. None of these options seem to provide debug output for config actions, which is the only thing I could see as a useful addition. (Update: there is an open issue for this.)

I realize that 'try running it with debug output' is hardly a groundbreaking tip, but in the case of recipes this additional info is really handy. Going forward, I'll be using -v by default when applying new recipes so that I can get a better sense of what's being added to my site.

The Perils of Third-Party Scripts in Next.js

Wed, 15 Jan 2025 00:00:00 GMT

In Next.js if you find yourself needing to integrate a script outside of the Node ecosystem (basically something you can't import,) you've probably already lost. It can sometimes be unavoidable though. I recently faced this with some third-party ad code that needed to be included in a project and it was tricky to get right.

So You've Got a Script...

Your first instinct may be to just toss a traditional <script> tag in the Document component.

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head>
        <script
          async
          src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

This works, but that affords you very little control over how Next.js loads the script and when it runs in comparison to other scripts. This will be especially problematic if you have other scripts that depend on this one. That was true in my case as I had custom code that needed to run after the third-party ad code had loaded. So I set out to find other alternatives.

Wrestle Back Some Control with The `<Script>` Component

Capitalizing the first letter in script can make a big difference. Aren't computers fun?

Next.js has a built-in component called <Script> that allows you to control when and how a script is loaded. Here's the previous example adapted to use the <Script> component:

import { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";

export default function Document() {
  return (
    <Html>
      <Head>
        <Script
          src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
          strategy="beforeInteractive"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

The strategy prop is especially important here. By default the <Script> component will use the afterInteractive strategy, which may be too late for scripts that depend on it. Setting it to beforeInteractive will load the script before any Next.js code and before page hydration.

You can technically use the <Script> component in any component on your Next.js site, but in order to use the beforeInteractive strategy, it must be used in the Document component.

If Client Code Depends on These Scripts, My Thoughts Are With You

Having the control provided by the loadingStrategy prop is helpful, but I still found that the loading order was a bit unpredictable. Scripts that use the same loading strategy wouldn't always load in the order that I referenced them in the source. In my case, this was a problem because I had variable ad slots that depended on this code. I essentially needed to:

Load the third-party ad script
Once that loads, run custom ad code that defines ad slots and sets targeting. This code was provided by a another vendor, and was not written with Next.js in mind.
After the ad slots have been defined, display them based on the current page's content.

The Next <Script> component offers onLoad and onReady props that can help with this. I initially assumed that onLoad would be the right choice, but it has some important limitations. It can't be used with beforeInteractive and also does not yet work with Server Components. That makes onReady the only viable option here. Since onReady only runs on the client, we'd also need to move the script outside of the Document component as well.

import Script from "next/script";

export default function Ad() {
  return (
    <>
      <Script
        id="ad-targeting"
        src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
        onReady={() => {
          console.log("Run custom ad targeting code here");
        }}
      />
      <div id="ad-slot"></div>
    </>
  );
}

I actually ended up taking a different approach inside of a useEffect hook that carefully checks for the existence of the window object, specific googletag methods, and runs only once. If given an opportunity to refactor this, I'd adapt it to use the onReady prop instead.

I also also needed to find a way to update targeting during client side routing since the ad targeting code was written assuming a full page refresh. Listening for router events made this pretty straightforward.

// re-set ad targeting on route change
useEffect(() => {
  router.events.on("routeChangeComplete", handleRouteChange);

  // If the component is unmounted, unsubscribe
  // from the event with the `off` method:
  return () => {
    router.events.off("routeChangeComplete", handleRouteChange);
  };
}, [router]);

handleRouteChange is a function that re-runs the ad targeting code, considering the new route.

Always Open to a Cleaner Solution

What I have in place works, but still feels hackier than I'd prefer. If you've found a better solution for something similar, I'd love to hear it.

Things I Enjoyed Over Winter Break

Wed, 08 Jan 2025 00:00:00 GMT

Had a wonderful two weeks off for the holidays this year, and I wanted to take a moment to reflect on some of the things that brought me joy over the break. Here are a few of the highlights:

Holiday Celebration Nonsense 🎄

I have a habit of taking on elaborate and unnecessary holiday related projects every year. My theory is that I still get as excited for the Christmas as I did when I was a kid, and as an 'adult' this is how I channel that energy.

The largest of these projects is my now 6-year tradition of surprising my family with a light show in my basement on Christmas morning. The first couple of years, the light show itself was the surprise, but the past few years I've been finding ways to challenge expectations of what a 'light show' could even be. This year that resulted in me secretly renting a U-Haul and pre-loading it with lights. My family awoke to a basement with only one light set up, packages containing winter clothes, and instructions to go outside. Pretty proud of how it all turned out.

I also made my first attempt at a digital version of our family Christmas card. I also gave myself the additional challenge of trying to make it from scratch using exclusively AI tools. I'm hoping to write about the experience in more detail at some point, but I primarily used bolt.new, along with ChatGPT for the video script, and Synesthesia for the video itself.

Blue Man Group

It was announced that Blue Man Group's multi-decade Chicago run was ending in early January, so we got tickets for a show in the last week. I hadn't seen it since high school (a friend and I actually did the marshmallow catching thing for a school variety show,) and I especially wanted my son to see it due to his interest in percussion. I could feel the age in the show a little bit, but it was still a lot of fun, and I'm glad we got to see it before the run ended. And Colin seemed to really enjoy it.

Games

There are always video games on holiday break, and I usually try to start something new on Christmas Day.

1000xRESIST - heard nothing but good things and have been really blown away by this game so far. If you are open to visual novels and sci-fi games I can't recommend it enough.
Zelda: Echoes of Wisdom - this game has some fundamental problems, but it still ended up being my gaming comfort food over the break.
Indiana Jones and the Great Circle - only fired this up a few times, but it yielded an all time gaming highlight:

TV

Is it still TV if I mostly watched it on an iPad?

Mr. And Mrs. Smith - finally got around to this and really dug it. Went down real easy and I liked how it wrapped up.
Squid Game Season 2 - Not sure this really needed to exist, but an easy holiday binge like the first season.

Guitar

My son got an electric guitar for Christmas, and I threatened that if that happened I'd almost certainly end up getting a guitar for myself. So I did! I splurged on this tech enabled electric acoustic. For a variety of reasons it probably wasn't the right choice for a complete beginner, but the bells and whistles are fun so I've decided to stick with it. Didn't really get started until the end of break. Related: my hand hurts.

Puzzles

I put this one together.

Hang in there for the non-holiday season. We can make it to the next one, I swear.

Two Modules to Help Tame Large Drupal Menus

Fri, 22 Nov 2024 00:00:00 GMT

Stop me if you've heard this one before. At some point in the life of your Drupal site, you have a menu that has gotten out of control. Dragging and dropping is basically a lost cause, your hand hurts from scrolling, and a sense of dread approaches every time you find yourself in the menu administration screen. If it isn't possible to re-structure the menu to address the root cause, you'll need to turn to other solutions to make menu administration more manageable.

I recently used two modules to address this issue for a client. They may not be a huge surprise to those who have run into this problem repeatedly, but it seemed worth documenting for both future me and also our search engine and LLM overlords.

Big Menu

The first module is Big Menu. The project page on this one seems to be describing the Drupal 7 implementation of the module, which is quite a bit different. The 'modern Drupal' version of the module essentially re-works the menu administration page to focus on a single level of the menu tree at a time. Any menu item that has children will have an 'Edit child items' link that you can drill into. This results in more clicks to get to the item you want to edit, but it makes the menu administration page much more manageable and reduces cognitive load quite a bit.

You can also configure the module to use a different depth for the menu tree, which can be useful if wanted to see more of the menu in a single view. Personally I prefer to go all the way with this one and stick with the single level view that is used by default.

Menu Select

The Menu Select module addresses the experience of selecting a parent menu item in the menu settings for a node or menu item. By default, this is a select list containing the entire menu, which can get very long. Menu Select replaces this with an autocomplete search and a hierarchal collapsible unordered list.

Bonus: Menu Firstchild

Menu Firstchild is a little less about the admin experience, but can be useful in cases where a large menu needs some additional grouping but you don't want to turn to a full mega menu style approach. The module provides an option to have a menu item that doesn't have it's own path, but instead links to its first direct child.

Used together, these modules made a substantial difference in addressing the client's menu administration related feedback.

This was also a reminder of the impact that the ongoing work on Drupal CMS will hopefully have. I'm looking forward to a Drupal CMS future that can theoretically pre-package user experience improvements like these. Or in cases where it might not be the right choice for Drupal CMS, opinionated community developed recipes can be created to address common use cases like this one.

My Own Personal Bird of the Century

Mon, 24 Jun 2024 00:00:00 GMT

Since I'm currently spending more time outside enjoying the summer weather, I've also been able to admire my most obscure yard decoration.

If you don't watch Last Week Tonight, you may not be familiar with how John Oliver wielded his audience to help the pūteketeke win New Zeland's Bird of the Century competition. You also wouldn't know that the Metalbird company went the extra mile and created a tiny metal John Oliver to compliment their silhouette of the winning bird.

What you might be less surprised by is the fact that this metal duo ended up under my Christmas tree this year.

It isn't the perfect placement - ideally the silhouette would be against the open sky, but I couldn't find a spot for that where it would still be visible. Still looks pretty cool where it lives, and hopefully it will catch the eye of our back yard guests. I also really love the look of the way the metal is weathering.

Talking Drupal API Client on Talking Drupal

Wed, 12 Jun 2024 00:00:00 GMT

I was a guest on a recent episode of Talking Drupal to discuss the Drupal API Client. Always a great time participating in the show. Thanks to my bio page on their new website, I see that this is my 8th appearance on the show - four times as a guest, and four times as a guest host.

We talked about the basics of the API Client, participating in the Pitch-burgh competition, the future of the project, and some of the challenges describing a primarily JavaScript focused project to an audience that typically thinks Drupal first.

You can watch or listen to the episode below, on the episode page on talkingdrupal.com, or in your podcast player of choice.

Matching Drupal’s GitLab CI ESLint Configuration in a Contrib Module

Wed, 05 Jun 2024 00:00:00 GMT

The Drupal Association now maintains a GitLab CI Template that can be used for all Drupal contrib projects. It's an excellent way to quickly take advantage of Drupal.org's CI system and ensure your project is following code standards and best practices. And using it has the bonus of giving you a sweet green checkmark on your project page!

We recently added this template to the Same Page Preview module. After doing so, our JavaScript linting was failing. This wasn't surprising since we hadn't yet committed a standard ESLint or Prettier configuration to the codebase. I took a shot at trying to resolve these linting issues, initially turning to the ESLint Drupal Contrib plugin. This allowed me to get ESLint up and running quickly and run linting with only within the context of this module. I resolved all of the linting issues, pushed my work up to GitLab, and started thinking about how I'd reward myself for a job well done.

Disaster Strikes

And as you might expect, the CI build still failed. 🤦‍♂️

At this point I took a step back. First off, I needed to determine what differed between my ESLint process and the one that was being executed by the Drupal Gitlab CI Template. Secondly, beyond just getting the CI job to pass, I wanted to define the linting use cases I was trying to solve for. I decided to focus on the following:

Determining how to run the exact same ESLint command that the GitLab CI Template was running, using the same configuration as Drupal Core.
Developing an ESLint configuration that could be run within the standalone module codebase (with or without an existing instance of Drupal) but matching Drupal Core and GitLab CI's configuration as closely as possible.

Using the Drupal Core ESLint Configuration

Here we literally want to use the same ESLint binary and config used by Drupal Core. Since this is what Drupal's GitLab CI Template is doing, this is also an opportunity to match the CI linting configuration as closely as possible.

The CI job is running the following command:

$ $CI_PROJECT_DIR/$_WEB_ROOT/core/node_modules/.bin/eslint \
  --no-error-on-unmatched-pattern --ignore-pattern="*.es6.js" \
  --resolve-plugins-relative-to=$CI_PROJECT_DIR/$_WEB_ROOT/core \
  --ext=.js,.yml \
  --format=junit \
  --output-file=$CI_PROJECT_DIR/junit.xml \
  $_ESLINT_EXTRA . || EXIT_CODE_FILE=$?

And prior to that command, symlinks are also created for some relevant configuration files:

$ cd $CI_PROJECT_DIR/$_WEB_ROOT/modules/custom/$CI_PROJECT_NAME
$ ln -s $CI_PROJECT_DIR/$_WEB_ROOT/core/.eslintrc.passing.json $CI_PROJECT_DIR/$_WEB_ROOT/modules/custom/.eslintrc.json
$ ln -s $CI_PROJECT_DIR/$_WEB_ROOT/core/.eslintrc.jquery.json $CI_PROJECT_DIR/$_WEB_ROOT/modules/custom/.eslintrc.jquery.json
$ test -e .prettierrc.json || ln -s $CI_PROJECT_DIR/$_WEB_ROOT/core/.prettierrc.json .
$ test -e .prettierignore || echo '*.yml' > .prettierignore

This means that we'll need to run eslint using Core's 'passing' configuration (which itself extends the 'jquery' configuration.)

To match that, I created an eslint:core script in the module's package.json:

{
  "scripts": {
    "eslint:core": "../../../core/node_modules/.bin/eslint . \
      --no-error-on-unmatched-pattern \
      --ignore-pattern='*.es6.js' \
      --resolve-plugins-relative-to=../../../core \
      --ext=.js,.yml \
      -c ../../../core/.eslintrc.passing.json"
  }
}

I was surprised to find that even after running this command locally, the CI job was still failing. It turned out that ESLint wasn't using Core's Prettier config in this case, resulting in a different set of formatting rules being applied. Copying core/.prettierrc.json into the module's root directory resolved this issue.

Copying Drupal Core's prettier config wholesale isn't great. The approaches to referencing and extending a prettier config are clunky, but possible. A more ideal solution would be to have Drupal's prettier config as a package that could be referenced by both core and contrib modules.

Using a Standalone ESLint Configuration

Ideally it would also be possible to run this linting outside of the context of a full Drupal instance. This could help speed up things like pre-commit hooks, some CI tasks, and also make quick linting checks easier to run. With the lessons from using Drupal Core's ESLint configuration fresh in mind, I took another shot at using the eslint-plugin-drupal-contrib plugin.

First, I installed it in the module as a dev dependency:

npm i -D eslint-plugin-drupal-contrib

Next, I created a file .eslintrc.contrib.json in the module's root directory:

{
  "extends": ["plugin:drupal-contrib/passing"]
}

This will result in eslint using the same configuration as Drupal Core's 'passing' configuration, but without needing to reference Core's configuration files. Finally, you can run this by adding the following eslint script in the module's package.json:

{
  "scripts": {
    "eslint": "eslint . \
      -c .eslintrc.contrib.json \
      --no-eslintrc"
  }
}

You might be surprised to see the --no-eslintrc flag above. That prevents ESLint from looking for any other configuration files in the directory tree. Without it, ESLint will find the Drupal Core configuration files if this happens to be run from within a Drupal project. This will result in ESLint attempting to resolve plugins using Drupal Core's node_modules directory, which may or may not exist.

Also note that ESLint 8.x uses the --no-eslintrc flag, while the ESLint 9.x equivalent is --no-config-lookup. Drupal core is currently on ESLint 8.x, which is the previous major release.

Happy Linting

I ran into a few more hiccups than I expected along the way, but now feel confident that I can have consistent linting results between my local environment and the Drupal.org CI system in all of the JavaScript code I write for contrib modules. Hopefully this can help you do the same.

Resources

Drupal GitLab CI Template
ESLint
Prettier
ESLint Drupal Contrib plugin
Checking custom JavaScript with ESLint - an alternative approach that can be run from the conext of /core.

Drupal API Client 1.0 Release

Wed, 24 Apr 2024 00:00:00 GMT

We're extremely excited to announce the 1.0 release of the Drupal API Client. This release includes a fully functional JSON:API client and completes our commitment as a result of funding from the 'Pitch-burgh' innovation contest.

Before diving into the details of some recent updates, let's recap the state of the project now that it has reached 1.0.

What is the Drupal API Client?

The Drupal API Client is a set of JavaScript packages that simplify the process of interacting with common Drupal APIs. Most commonly, developers will use our JSON:API client to interface with Drupal's JSON:API endpoints, but we also publish a base API Client package that can be extended, a client for Decoupled Router, and may support other Drupal APIs in the future.

The Drupal API Client takes great care to be framework-agnostic and universal. It can be used:

with your JavaScript framework of choice, vanilla JavaScript, or even in Drupal itself.
with or without TypeScript.
on the server, or on the client.
with a bundler, or as a script import from a CDN.

Recent Developments

We've completed our Pitch-burgh commitment and released JSON:API Client 1.0. Thanks to all who contributed along the way!
We've published detailed documentation on GitLab Pages. The docs include live code examples, and is itself an example of using the API Client with Astro.
We've opened an issue proposing that the Drupal API Client packages be promoted to the Drupal namespace on npm. We'd love your feedback and support on the issue.
We're refining our 1.x roadmap and soliciting community feedback. One proposed priority will be TypeScript improvements and automatic type generation.

See you at Stanford WebCamp and DrupalCon!

Moving forward, we hope to prioritize additional features for projects that could use our libraries as a dependency. Catch up with us at community events in May to learn more and share your use cases.

The Drupal API Client will be featured in a session at Stanford WebCamp. Sessions are free and virtual, so this is a great way to get a more detailed overview of the project.
We'll be holding a Birds of a Feather discussion and participating in contribution events at DrupalCon Portland. The BOF will be on Monday, May 6 in room G129 at 4PM.

Beyond these events, we're always available in the #api-client channel on Drupal Slack and monitoring our issue queue. Hope to see you there!

2024 Best Picture Nominees

Mon, 11 Mar 2024 00:00:00 GMT

Ever since streaming made the years Oscar films so much easier to watch, I've tried to make sure I see all the best picture nominees before the awards ceremony. I connected with some more than others, but no real duds this year (I'm looking at you Elvis.)

My favorite movie of the year

Past Lives - Past Lives echoes the themes of some of my favorite movies like Eternal Sunshine of the Spotless Mind (which actually appears on screen in this) and Lost in Translation, which might give this a bit of an unfair advantage. Regardless, this was the movie that stuck with me the most. Greta Lee is fantastic, and compared to a number of other bloated nominees not a moment is wasted in its hour and forty-five minute runtime. I see myself revisiting this one again in the future.

Movies I Loved

Barbie - I re-watched this little known indie gem to see if I still felt the same way about it in comparison to 'serious' Oscar movies. Turns out Barbie still rules. Still extremely funny, and in a perfect world Gosling would win best supporting actor. Sure, it probably tries to do a little too much, but on re-watch I was surprised how well everything came together in the third act.
Poor Things - Emma Stone is amazing in this and would be my pick for best actress. Drags a little bit in the second half, but still really loved it. Interested in working through some of Yorgos Lanthimos' other movies.
The Holdovers - it really doesn't get much better than Paul Giamatti and Da'Vine Joy Randolph together in this. A warm hug of a movie with bonus points for spending time in '70s Boston.

Movies I Liked

American Fiction - enjoyed this quite a bit, but by the end felt like there were a few different movies in conflict with each other. Excellent performances from both Jeffrey Wright and Sterling K. Brown though.
Oppenheimer - an achievement, but not really what I'm looking for from Nolan. Impressive pacing despite its length. Had a little trouble looking past some of the well known faces that kept popping up, and not as crazy about Robert Downey Jr. in this as others seem to be.
Anatomy of a Fall - entertaining and well acted, although my mind will probably always just think of Snoop the dog, and the instrumental cover of P.I.M.P.
The Zone of Interest - amazing use of sound, but boy was it a tough watch. Did find the final sequence extremely moving though.
Killers of the Flower Moon - was just longer than I could handle given the dark subject matter and many extremely unlikable characters. Thought De Niro was truly great in it, not sure why his work didn't get more attention. Appreciated Lilly Gladstone's performance as well, but personally found it a little too internal to fully connect with.
Maestro - expected this to be over the top Oscar bait, but I enjoyed it overall. Between this and Flower Moon I did reach my limit on strong women who stood by men who treated them like garbage.

Bonus

May December - kind of mixed on this one but thought Charles Melton had one of the strongest performances of the year in this. A shame he didn't get nominated.

My Ballot

Not a member of the academy (yet,) but here are my predictions this year.

Going to crush the Oscars pool at my wife's school.

Extending The Drupal API Client

Wed, 07 Feb 2024 00:00:00 GMT

import RadCallout from '../../../components/rad/RadCallout.astro';

As a result of our Pitch-burgh funding, the current focus of the Drupal API Client is to create a fully featured client for Drupal's JSON:API implementation. Even with that goal, we've focused on making our work extensible for other API formats in the future through the implementation of an ApiClient base class. Functionality that could apply to any API client is added to the base class, while anything specific to JSON:API is added to the JsonApiClient class (which extends ApiClient.)

Recently, we have been working on adding Decoupled Router support to our JSON:API Client. I found this implementation to be a great example of the extensibility of the library, so I wanted elaborate on it in a blog post for those who may want to extend the API Client in the future.

The existing JsonApiClient has the following method to retrieve data for a resource:

await client.getResource('node--article', '3347c400-302d-4f6c-8fcb-3e74beb002c8');

Ideally, users of Decoupled Router could also get an identical response by resolving a path:

await client.getResource('/articles/give-it-a-go-and-grow-your-own-herbs');

To achieve this, we first needed to provide a way to reliably get data from Decoupled Router.

The Decoupled Router Endpoint

With the module enabled, Decoupled Router exposes an endpoint with the following structure:

/router/translate-path?path=<path>

Given a path like /articles/give-it-a-go-and-grow-your-own-herbs the endpoint could provide a response similar to:

{
  "resolved": "https://dev-drupal-api-client-poc.pantheonsite.io/en/articles/give-it-a-go-and-grow-your-own-herbs",
  "isHomePath": false,
  "entity": {
    "canonical": "https://dev-drupal-api-client-poc.pantheonsite.io/en/articles/give-it-a-go-and-grow-your-own-herbs",
    "type": "node",
    "bundle": "article",
    "id": "11",
    "uuid": "3347c400-302d-4f6c-8fcb-3e74beb002c8"
  },
  "label": "Give it a go and grow your own herbs",
  "jsonapi": {
    "individual": "https://dev-drupal-api-client-poc.pantheonsite.io/en/jsonapi/node/article/3347c400-302d-4f6c-8fcb-3e74beb002c8",
    "resourceName": "node--article",
    "pathPrefix": "jsonapi",
    "basePath": "/jsonapi",
    "entryPoint": "https://dev-drupal-api-client-poc.pantheonsite.io/en/jsonapi"
  },
  "meta": {
    "deprecated": {
      "jsonapi.pathPrefix": "This property has been deprecated and will be removed in the next version of Decoupled Router. Use basePath instead."
    }
  }
}

While easy to make sense of, this response technically doesn't follow the JSON:API spec, which prevents us from using our existing JSON:API Client without modification. We could write a small amount of custom code in JsonApiClient to fetch and handle data from this endpoint, but this case is exactly what our ApiClient base class is intended for. With a similarly small amount of code we can extend the ApiClient class to add only what is unique to the Decoupled Router endpoint, while getting access to all of the features of the base class at the same time.

So rather than writing code specific to JsonApiClient, we decided to create a new DecoupledRouterClient class that our JsonApiClient could then make use of.

Extending ApiClient

For the sake of example, a simple Decoupled Router client could look like this:

// DecoupledRouterClient.ts
import {
  ApiClient,
  type ApiClientOptions,
  type BaseUrl,
} from "@drupal-api-client/api-client";

export class DecoupledRouterClient extends ApiClient {
  constructor(baseUrl: BaseUrl, options?: ApiClientOptions) {
    super(baseUrl, options);
    const { apiPrefix } = options || {};
    this.apiPrefix = apiPrefix || "router/translate-path";
  }

  async translatePath(path: string) {
    const apiUrl = `${this.baseUrl}/${this.apiPrefix}?path=${path}`;
    const response = await this.fetch(apiUrl);

    return response.json();
  }
}

In our constructor, the only modification we need to make is the default value for the API prefix. While the base class doesn't have a default, Decoupled Router uses router/translate-path. Now when instance of DecoupledRouter is created without this option, it will use the default.

We then define a translatePath method that:

Takes a path of type string
Uses the fetch method provided by the base class to make a request to Decoupled Router
Returns a promise with the provided json data

Using an instance of this class would look something like:

// main.ts
import { DecoupledRouterClient } from "./DecoupledRouterClient.ts";

const decoupledRouterClient = 
  new DecoupledRouterClient("https://dev-drupal-api-client-poc.pantheonsite.io");

const translatedPath =
  await decoupledRouterClient.translatePath(
    "/articles/give-it-a-go-and-grow-your-own-herbs"
  );

<RadCallout>Check out this code sandbox for a live version of the example above.</RadCallout>

Taking Advantage of Additional ApiClient Features

With this example we already have a functional client, but quite a bit more is possible using the features of the ApiClient class we extended. For example, We can already make authenticated requests using any of the supported authentication methods:

// main.ts
import { DecoupledRouterClient } from "./DecoupledRouterClient.ts";

const decoupledRouterClient = 
  new DecoupledRouterClient("https://dev-drupal-api-client-poc.pantheonsite.io", {
    authentication: {
      type: "OAuth",
      credentials: {
        clientId: "client-id",
        clientSecret: "client-secret"
      }
    },
  });

// API requests will now be authenticated
const translatedPath =
  await decoupledRouterClient.translatePath(
    "/articles/give-it-a-go-and-grow-your-own-herbs"
  );

Our example Decoupled Router client could be updated to take advantage of built in caching, logging, or locale support. For example, the following modification would allow us to make use of the defaultLocale option if our Drupal site supports multiple languages:

// DecoupledRouterClient.ts
import {
  ApiClient,
  type ApiClientOptions,
  type BaseUrl,
} from "@drupal-api-client/api-client";

export class DecoupledRouterClient extends ApiClient {
  constructor(baseUrl: BaseUrl, options?: ApiClientOptions) {
    super(baseUrl, options);
    const { apiPrefix } = options || {};
    this.apiPrefix = apiPrefix || "router/translate-path";
  }

  async translatePath(path: string) {
    // If it exists, incorporate the default locale
    // into the apiUrl
    const apiUrlObject = new URL(
      `${this.defaultLocale ?? ""}/${this.apiPrefix}?path=${path}`,
      this.baseUrl,
    );
    const apiUrl = apiUrlObject.toString();
    const response = await this.fetch(apiUrl);

    return response.json();
  }
}

Routing is a common problem, so we've added a fully featured getResourceByPath method to our latest @drupal-api-client/json-api-client release. We've also published the Decoupled Router client as a standalone package for anyone who wants to use it separately.

While the caching functionality of the client can lessen the impact, getResourceByPath still makes multiple API calls for uncached data, which leaves room for improvement. We could optimize this in the future by providing support for the subrequests module. That is yet another client for a type of Drupal API that could use the ApiClient base class as a starting point.

We're closing in on the 1.0 release of @drupal-api-client/json-api-client. If you’re interested in contributing, check out our project page on Drupal.org, and join us in the #api-client channel on Drupal Slack.

Winter Builds

Mon, 22 Jan 2024 00:00:00 GMT

While we're far from the puzzle and Lego heyday that was the pandemic, things tend to slow down enough during winter break for me to party like it's 2020.

I put together this Charlie Brown Christmas puzzle like an advent calendar (hat tip to my Mom for this idea last year.) Each day I had access to 42 (technically 41.6 repeating) new pieces of this 1000 piece puzzle. Things kind of stacked up at the end, and I technically finished this up quite late on Christmas day.

Lego wise I put together the Lego Piranha Plant, which was a small but fun build.

The window well in my office features a growing variety of takes on the piranha plant, including an actual venus flytrap that is really struggling during the winter months. When I got the awesome 'real life' piranha plant (the nightmare 'Little Shop of Horrors' looking one) for Christmas I knew I had to get this Lego version to round out the collection.

Capping things off was our local park district's 'Puzzle Palooza', an amusingly serious two hour puzzle building competition. It was just my wife and I in what could have been a four person team, so we had no shot at winning. Even given that, we fared really poorly and didn't even complete the border of the puzzle. In our defense, this was a difficult puzzle with many irregular pieces. We got to keep the puzzle, so someday I'll have to see what those birds in snow really look like. Maybe it can be next year's advent puzzle.

The 2023 New England Patriots

Sat, 13 Jan 2024 00:00:00 GMT

As a Patriots fan, 2023 was quite the rude awakening. It has been rough going since Brady left, but this was different. I've been a Patriots fan long enough that I experienced many bad seasons pre-Brady, so I knew it was somewhat inevitable, but I had wondered exactly what it would be like experiencing the basement of the NFL after such a long dynasty. Would it infuriate me? Would I give up and lose my rooting interest entirely? Would I even be able to show my face in the Chicagoland area if the Pats have a worse record than the Bears?

The good news is that I enjoyed this no good, very bad season much more than I expected. With a few notable exceptions, most games were still close and thus somewhat entertaining. And I still listened to Patriots podcasts and followed the weekly power rankings. The topics were just different this time. Quarterback controversy. Draft rankings (why did you have to win that Christmas Eve game!?!) Will Belichick stay or go?

I don't want that to be the nature of my fandom forever, but it's nice to confirm that I enjoy the process of following this team regardless of what that actually looks like. With Belichick officially gone, Mayo (almost) officially the successor, and the 3rd pick in the NFL Draft, it should be a very different Patriots team next season.

Despite how it ended, this has been a hell of a run.

44 in 2024

Mon, 08 Jan 2024 00:00:00 GMT

I took an extended holiday break this year to match my family's school vacations. That means I'm currently bracing for a return to reality after the Christmas holiday, a New Year for the world, and a new year for me (44!) Here's what has been top of mind as January makes its presence known.

2023

Junior High - my son started junior high this year which has been exciting and new for all of us. He's also been doing well playing drums in the band and running for the cross-country team. It has also turned out to be pretty useful to be married to a school psychologist that works in a junior high school.
More of my mouth broke - I got a root canal after a crown went bad in early 2023. Not my first, but still not fun. Just hoping for no mouth related changes this year.
Big new things around the house! After threatening to do so for a number of years, we got a small above ground pool. Led to some fun times with neighborhood friends, and some great Sunday afternoon floats. Also, as an early family Christmas gift we got a Lovesac to replace our long broken basement couch. Much easier to get all humans and cats in the same place now, which makes a big difference.
Ongoing Decoupled CMS work - I wasn't able to attend DrupalCon Pittsburgh, but I did submit the Drupal API Client Project to the Pitch-burgh Innovation Contest. We were selected as a finalist by the judging panel, and then funded by a community vote. In my day-to-day I was also continuing to lead the Decoupled Kit project and generally helping support Front-End Sites at Pantheon.
Tech Related Travel - scaled down my conference travel last year, but still made it to Florida Drupal Camp, MidCamp, Twin Cities Drupal Camp, and New England Drupal Camp. I also visited Pantheon's San Francisco headquarters for the first time.
Tons of Tears of the Kingdom - I've played 150 hours of Tears of The Kingdom and counting. Similar to Breath of the Wild I was obsessed in the beginning, and then went through cycles of playing and taking extended breaks. Crazy how much game there is here. Still a lot that I'm hoping to do - expecting that I'll wrap up around 200 hours.
A Terrible Patriots Season - truly terrible, but still somehow managed to be fun and interesting to follow.
Saw Some Fun Shows - finally made it to The Fest in Gainesville, FL for the first time. Had a blast, but may have exceeded the limits of what my then 43 year old ass could handle. Huge thanks to Mike Herchel for hosting me. Also saw the sketch comedy group The State reunited, which was a blast.

2024

A New Website! - made a long gestating migration of this site to Astro in the new year. There is quite a bit more that I'd like to do with the site in 2024 - we'll see if I can keep the momentum going.
Drupal API Client 1.0 - I'll be ramping back up after the holidays for a focused effort on our 1.0 scope to close out our commitment to Pitch-burgh funding. The 1.0 release will also open up a number of new possibilities for using the client. I have an idea for a new open source project building on this work that I'm excited about.
Brushing Up on TypeScript - both this website and the API Client are written in TypeScript, but I feel like much of my TS learning thus far has been on the job training, which has left some gaps. As a result, I've been brushing up over the break with the courses at Execute Program, which I think are really great. On top of that, hopefully having multiple ongoing TypeScript projects will help me stay fresh.
Charting New Territory Professionally - after multiple years focusing on a specific long-term project at my day job, I'll be dedicated to something new and different as 2024 starts. Perhaps that will click for me. If not, it might be time for something even newer. Either way, this year is sure to be filled with new professional challenges.
Traditional New Years Fitness Goals - need to stay focused fitness wise as it gets harder and harder to keep this ancient body in shape. Related to that, I'm going to be trying out a dry-ish January (-ish because I'm cheating and starting at the end of my vacation and the Patriot's season.) I'm hoping that cutting out beer will make maintaining my weight after the holidays a little easier.
Steam Deck - I broke down on my birthday and ordered myself a Steam Deck OLED. This is partly motivated by hearing endless positive things about the Steam Deck in 2023. But possibly even more motivated by starting Baldur's Gate 3 on Xbox over break and wanting a reliable way to play it handheld. Could see myself putting Zelda-level hours into that one in 2024.
Golf Lessons - I've played a little more frequently over the past few years and it's time to start sucking less. Tempted to get new clubs, but I think the smarter move is to get lessons first, and then reward myself with some new equipment if I make some positive progress.

The State Live in Chicago

Mon, 27 Nov 2023 00:00:00 GMT

It isn't a stretch to say that the 90s sketch comedy group The State are one of my all-time biggest influences. Not only did the show lead me to years of performing comedy, but I also learned html in order to create an impressively ugly fan site.

I previously saw The State live just after their MTV show ended, at the now defunct Carolines in Times Square. If you told me then that I'd bring my wife to see them in Chicago in 2023, I would have had a few questions. But I wouldn't be suprised to hear that those sketches meant as much to me in 2023 as they did back when MTV actually played music videos. Getting a chance to relive those sketches without having to break out a VHS bootleg was pure joy.

An Update on The Drupal API Client

Thu, 09 Nov 2023 00:00:00 GMT

At DrupalCon Pittsburgh, a team of interested community members submitted The Drupal API Client Project to be considered for funding as part of the Pitchburgh Innovation Contest. (If you missed it, check out our pitch video below, along with the original proposal.)

While competing community maintained API clients exist, Drupal does not offer any official JavaScript utilities to simplify the process of consuming data outside of the CMS. Our goal is to assemble a group of contributors to combine the best of existing Drupal API clients into a set of utilities that can both address common use cases with little configuration, and also be extended to support the needs of a diverse JavaScript ecosystem.

We were lucky enough to be selected by a panel of judges and the Drupal community to recieve funding. Since then, we've made some exciting progress on making our pitch a reality and wanted to share some updates.

Initial Goals and Vertical Slice POC

Our initial focus is what we've been calling the vertical slice POC for our JSON:API Client. As a checkpoint on the way to our eventual 1.0 release, we saw value in focusing deeply on a narrow portion of the client. Specifically, we decided to focus on the ability to get a collection of resources from the API.

Alongside that functionality, we also wanted to cover some level of implementation for all of our planned configuration options:

Custom fetch method #3376929
Authentication (basic authentication for the POC) #3376937
Local caching #3377144
Deserialization of API responses #3377191
Basic localization support #3377803
Adding query parameters to API requests #3383578

Going this deep on our method to get a collection should provide groundwork that will help simplify the remaining implementation on the way to 1.0. And possibly more importantly, having a functional POC early should allow us to engage with the community and gather real world feedback.

0.1.0 Release

Speaking of the POC, we're excited to announce that we've published our first release! You can install it right now using npm (or your package manager of choice):

npm i @drupal-api-client/json-api-client

API documentation for the package is available on GitLab pages.

Included below is a CodeSandbox including a simple example of using the client to get a collection of nodes from a Drupal site. Feel free to fork it and play around!

For the more adventurous, here's a live TypeScript example from our project readme that demonstrates more of the available configuration options:

This 0.1.0 release represents the initial POC, but we're planning on having continued 0.x releases as we approach 1.0.

Thanks to all who contributed to this release, including: coby.sher, pratik_kamble, mitchellmarkoff, shrutishende, elber, abhisekmazumdar, alexmoreno and the many others who provided feedback in the issue queue or dropped in on one of our Slack meetings.

Obligatory Call for Help

The Drupal API Client Project is rolling along, but we're still looking for help from the community to make it a success. With the release of this POC, one of the biggest areas we need help is getting general feedback on our work thus far. The wider the feedback we get from the community, the better chance we have to ship something that meets a wide array of decoupled Drupal use cases.

We've created a feedback issue to help guide the conversation, but we're also open to feedback in any form. We're you able to get up and running? Does the current API make sense to you? Is there a particular use case you're hoping to see supported? Let us know!

You also may have noted that many of our primary contributors work together at Pantheon. While we greatly appreciate Pantheon's support and sponsorship of this project, we're also looking for help from the broader community. We're doing a decent job keeping focused on the generic use cases that this project is intended to solve, but having a more diverse array of contributors can only help the end result.

If you're interested in contributing, check out our project page on Drupal.org, and join us in the #api-client channel on Drupal Slack.

And if you happen to be interested and on the East Coast, I'll be at NedCamp - both at the contribution day, and presenting on the API Client project during session day. Come say hi!

My Holiday Lego Build

Sun, 08 Jan 2023 00:00:00 GMT

Stretched a little bit past my holiday break, but enjoyed assembling this Lego Question Block. Had it for over a year, but never got a chance to put it together.

Up next is the Lego Atari 2600, which hopefully I'll make quicker work of.

Decoupled Menus (and Beyond) at DrupalCon Portland

Tue, 19 Apr 2022 13:21:43 GMT

DrupalCon Portland is almost here! Getting back to an in-person DrupalCon will take some getting used to, but I'm especially excited for the ability to collaborate face-to-face during contribution events throughout the week. There is quite a bit going on in the world of Decoupled Drupal - here are some of the things I plan on focusing on...

Decoupled Menus Initiative

We’re aiming to get a point where we can declare this specific initiative complete and could use help in a few specific focus areas.

Migrating the decoupled menus linkset endpoint to Drupal Core - we're very close to getting this functionality included in core, but will still likely need some final assistance at DrupalCon.
Documentation improvements - first and foremost, we need to finalize the documentation specific to the new decoupled menus endpoint. We have made good progress there and mostly just need to incorporate some proposed revisions. We've also migrated the existing Decoupled Drupal documentation to a new home within the main Drupal Developer docs. There is a huge opportunity to flesh out the overall documentation for Decoupled Drupal, and hopefully this will evolve into a focused effort beyond the Decoupled Menus Initiative.
Decoupled Menu Parser - the Decoupled Menus Parser is a JavaScript library to simplify consuming data from the new decoupled menus endpoint. There are a few open issues to update the library due to recent adjustments to the API response.

Drupal State

Drupal State and the Need for a JavaScript SDK - bright and early Thursday morning I'll be presenting both about the Drupal State project, and perhaps more importantly my belief that an official JavaScript SDK is important for the future of Drupal.

Drupal State also has a healthy issue queue, so if you're interested in contributing or learning more about the project, I'll be around during the contribution events.

Generic Drupal Web Components

This project has had a long and winding road. Initially created in support of the Decoupled Menus hackathon at last year's DrupalCon, Generic Drupal Web Components (GDWC) aims to create a set of web components that can work well with data sourced from Drupal. But as you'll hear in my talk, finding a better solution to source data from Drupal resulted in the considerable tangent that was the creation of the Drupal State project.

There is an in-progress issue for GDWC that introduces two new components that can be used to make Drupal data available to any web components. I think this has the potential to open the floodgates for future components. I'd love to hear your thoughts.

Pantheon

That's a lot of stuff! I'll also be around the Pantheon booth and would be happy to talk about these projects, or anything relevant to decoupled Drupal on Pantheon. I'll also be at the Pantheon DrupalCon Party and almost certainly leaving early to rest up for my session the next morning :)

Star Wars: Galaxy's Edge

Tue, 04 Jan 2022 13:48:59 GMT

My Star Wars fandom has waned a bit over the years, but on occasion my memories of watching A New Hope over, and over come rushing back. For example, I cried (sobbed really) during The Force Awakens and The Last Jedi. My eyes stayed dry during The Rise of Skywalker though. Draw your own conclusions there.

Over the holiday break I found myself in Walt Disney World for a last chance at a trip that was twice rescheduled due to Covid. The crowds were insane, which was extremely concerning due to the explosion in cases from the Omicron variant. One of the few moments where I was able to be completely transported away from this Covid hellscape was the time I spent in Galaxy's Edge.

All of it was amazing, but the somewhat surprising highlight for me was Millennium Falcon: Smuggler's Run. I had heard disappointing things about the ride, but it really hit me hard in the nostalgia zone. I was selected to be one of the pilots, so it was like Star Tours except I was in control. And look how faithful the interior of the ride is.

The hand sanitizer dispenser kind of gives it away though. Thanks Covid.

Rise of The Resistance was amazing as well, but still had nothing on piloting the Millennium Falcon. Even my Star Tours trip was great this time around (no prequel trilogy nonsense.) Speaking of Star Tours, I was even able to catch up with an old friend at the Cantina. I sure wish he was willing to wear a mask though.

Deafheaven: Infinite Granite

Mon, 11 Oct 2021 00:23:57 GMT

I've tried getting into Deafheaven in the past, but was never really able to find my way into their harsh black metal sound. However, my interest was peaked when Infinite Granite promised a mellower version of their sound with mostly clean singing.

Yes, it is substantially more melodic than albums like Sunbather and features mostly singing as opposed to growls and screams, but harsh moments still do occasionally make their way through. And because of the lush, swirling guitars that come before, when things get heavy they hit so much harder.

But more than anything, this is an album I can just get lost in. It will also forever be associated with a time and place as it came out the weekend before I traveled home to the east coast to mourn a friend's passing.

Likely to be my favorite album of the year, and one that I expect to revisit for years to come.

How Drupal's Preview Works

Fri, 08 Oct 2021 01:28:50 GMT

I've been thinking quite a bit recently about Drupal's options for decoupled preview with other JavaScript front ends. As part of some related experimentation, I found myself needing to understand more about how Drupal's standard preview functionality works. To be specific here - I'm talking about when you're editing a node and click on the preview button to see a full rendering of the page you're currently editing.

I realized I had never really had any reason to think about how that actually happens. Like many things on the web, it just kind of magically does. My general assumption was that it was some variation of Drupal's revision functionality. Something along the lines of an unpublished version of the node is created to represent the preview, and then is deleted after some period of inactivity.

As I dug into the code a bit I found out that my assumption was pretty far off.

Surprise number one was that the data for this is stored in Drupal's tempstore. Specifically Drupal's private tempstore. The tempstore is a key/value collection that can make data available across requests and the private tempstore also includes checks to ensure that the data is only available to the current user. Here's a short post with a good comparison of the private tempstore and the shared tempstore.

Surprise number two was that the form state of the current node edit form is what is stored in the tempstore, not the node entity itself. As we'll see in a second, it is possible to derive the node entity from the form state, but technically only the form ends up in the tempstore.

Let's take a peek at some of the relevant code.

When the node edit form is submitted, the following form submit handler is used:

// From core/modules/node/src/NodeForm.php

/**
 * Form submission handler for the 'preview' action.
 *
 * @param $form
 *   An associative array containing the structure of the form.
 * @param $form_state
 *   The current state of the form.
 */
public function preview(array $form, FormStateInterface $form_state) {
  $store = $this->tempStoreFactory->get('node_preview');
  $this->entity->in_preview = TRUE;
  $store->set($this->entity->uuid(), $form_state);

  $route_parameters = [
    'node_preview' => $this->entity->uuid(),
    'view_mode_id' => 'full',
  ];

  $options = [];
  $query = $this->getRequest()->query;
  if ($query->has('destination')) {
    $options['query']['destination'] = $query->get('destination');
    $query->remove('destination');
  }
  $form_state->setRedirect('entity.node.preview', $route_parameters, $options);
}

Here the form is being set in the private tempstore, and the user is redirected to the preview route.

Before the preview route is rendered, the node preview service will be invoked. Within this service the convert method gets the form state from the tempstore and then derives the node entity form that.

// core/modules/node/src/ParamConverter/NodePreviewConverter.php

public function convert($value, $definition, $name, array $defaults) {
  $store = $this->tempStoreFactory->get('node_preview');
  if ($form_state = $store->get($value)) {
    return $form_state->getFormObject()->getEntity();
  }
}

Finally, within the node preview controller, the view method assembles a build of the node.

// core/modules/node/src/Controller/NodePreviewController.php

public function view(EntityInterface $node_preview, $view_mode_id = 'full', $langcode = NULL) {
  $node_preview->preview_view_mode = $view_mode_id;
  $build = parent::view($node_preview, $view_mode_id);

  $build['#attached']['library'][] = 'node/drupal.node.preview';

  // Don't render cache previews.
  unset($build['#cache']);

  return $build;
}

Pretty much everyone I ran this by was surprised*, but now that I've worked through it a bit this approach makes more sense to me. Many of these previews will be abandoned, so the tempstore actually is an appropriate home for them due to its built in expiration and cleanup. Same for the private tempstore - previews are specific to the current user, and could contain sensitive data. Finally, I'd imagine that not processing this as a full entity/revision saves some overhead considering that this preview could be updated frequently while editing.

I now understand the 'how' and possibly the 'why', but that doesn't make it any easier to access this data for other preview related purposes. I think that is the reason why this specific use case is covered by few, if any, decoupled Drupal preview solutions. From my initial experimentation it can be solved, but it will take quite a bit of work to do right.

I'd love to hear more from those managing decoupled Drupal sites. Is previewing in your decoupled front end while editing in Drupal really the holy grail it seems like sometimes? Or are other preview workflows meeting your needs?

* I'm sure there are some Drupal lifers out there who were well aware of this, and are yelling at their screens right now.

Identifying Circular Dependencies in JavaScript Modules

Sun, 19 Sep 2021 12:55:31 GMT

While recently scouring Stack Overflow to debug a vague error in a JavaScript library I was working on, one of the possible causes I kept running into was a circular dependency introduced in module imports. Seemed plausible that I could have made that mistake, but given that I may have been foolish enough to introduce a circular dependency in the first place, tracking it down myself seemed like a tall order.

Thankfully there are a handful of NPM packages that can do all the work for you. I first tried Madge which seemed to be the most popular solution. It did have an option to identify circular dependencies, but that information wasn't included in the default output. It also has an impressive dependency visualization option, but it required manually installing a homebrew package.

I next tried dpdm which was simpler to use, and covered more of my needs by default. Here's what the output looked like when run against the main entry point of my library:

There was in fact a circular dependency between my TypeScript types and interfaces. Real rookie mistake right there. Combining the interfaces and types into a single file eliminated the circular dependency and got dpdm to stop yelling at me.

Ironically after all that, the circular dependency wasn't even the cause of the error I was seeing. I'm glad I found this handy little utility though, and hopefully working through this will make me less likely to introduce a circular dependency in the future.

GitHub Copilot is My Copilot

Sat, 28 Aug 2021 02:17:25 GMT

I can’t resist blog post titles that would make a really stupid bumper sticker.

If you haven’t heard about GitHub Copilot, it is a plugin for Visual Studio Code that uses AI to autosuggest code as you type. It sounds too good to be true, so of course I signed up for the technical preview to find out for myself.

When I was eventually granted access, I turned it on without any hesitation. After a few minutes that were a mix of amazement and confusion, I turned it off.

Why? Honestly, I mostly found the suggestions it was making to my code disorienting. I'm obviously familiar with my typical thought process, but Copilot was trying to lead me in different directions. The frequency of suggestions was also distracting. The site describes Copilot as 'your AI pair programmer.' I'm not as comfortable with pair programming as I should be, but imagine if you were pair programming but your partner was suggesting something every time you typed.

The final issue that motivated me to turn it off was accuracy. I found that the things it was suggesting were typically not what I wanted. Following the examples shown on the site, I also tried providing guidance to Copilot via comments. I found that those comments had to be pretty elaborate, and even then it was mainly resulting in large blocks of code that weren't what I wanted.

Since it was mainly distracting me and breaking my flow, Copilot had to go.

A funny thing happened after I turned it off though; I kept thinking about my new friend Copilot.

I was left thinking about the need to communicate with it via function signatures and clear comments. AI or no, that seemed like a positive habit that I should do more of. And while Copilot's suggestions were overzealous, I did find myself missing the cases where the situations where it did accurately read my mind.

Since I kept thinking about it, I eventually gave up and turned copilot back on. Going back into it with my expectations tempered made a big difference. Rather than thinking of it as The Genie from Aladdin (either Robin Williams or Will Smith depending on your personal preference), seeing it as a slightly more intelligent autocomplete helped. I’ve learned to ignore when it is wrong, which is still often. But as it trains it is getting better. Copilot is now pretty good at suggesting complete lines when things are simple, and saving myself the typing still kind of feels like magic.

I've also found Copilot helpful in a few cases I didn't anticipate. When I'm working in an area I'm somewhat new to (Typescript and Jest these days,) Copilot can often give me enough of a nudge to keep me from getting stuck. And most interestingly I've found that it can help me push through adding documentation when I'm not motivated to do so. Your first draft is always garbage, so why not let a robot take care of some of that for you. And having something on the screen that isn't in your voice is a great motivator to revise it. Much better than staring at a blank README.

Positives aside, there are also legitimate ethical concerns with open source code being used to power Copilot's AI. Open source code helping shape proprietary code seems problematic. And if you take things to their logical conclusion you could think of your code being consumed by Copilot, but then used in a software project that you find objectionable. Providing some way for repositories to opt out would help, but it seems like a difficult problem to solve.

I've already stuck with Copilot longer than I expected, but it is still not out of the question that I could just nope back out of it someday. Regardless, it has been a fun little experiment and has made me think about the code I write in some new ways.

Using Apollo Client Without React

Wed, 04 Aug 2021 02:24:32 GMT

I've been experimenting with Apollo Client recently and started work on a new package that will use it as a dependency. After some initial experiments in a Create React App project, I scaffolded a new vanilla JS project using Vite. Much to my surprise, when I added Apollo my build started failing because React was missing as a dependency. It took me a little longer than I expected to figure out why this was happening.

As of Apollo 3.0 the import example in the getting started docs will also bring some React hooks along for the ride:

import { ApolloClient, gql, InMemoryCache } from "@apollo/client";

To use Apollo in a vanilla JS project, you instead need to use the entry point @apollo/client/core:

import { ApolloClient, gql, InMemoryCache } from "@apollo/client/core";

This is documented, but was a little hard to find within the Apollo 3.0 migration guide. Hopefully giving this a little more Google juice might save someone a few minutes in the future.

Working Around React's Web Component Limitations

Sun, 01 Aug 2021 01:55:21 GMT

One of the most exciting features of web components is the fact that they can be used in any JavaScript framework. If you scan through the list at Custom Elements Everywhere you'll see that coverage is really solid across the board... until you get to React.

As the test results show, the limitations fall into two main categories. The first is that React can't automatically pass non-string data like arrays and objects into custom element properties.

Take for example this election results tracker component: <results-tracker>. All of the properties of the component are strings, except for candidates, which expects an array of objects like:

const candidates = [
  {
    name: "Joseph R. Biden Jr.",
    primary: 253,
    secondary: 73879622,
    color: "#1375b7"
  },
  {
    name: "Donald J. Trump",
    primary: 214,
    secondary: 69772905,
    color: "#c93135"
  }
];

You would assume that you could pass in the candidates array just as you could in a React component.

<results-tracker
  headline="{headline}"
  race="{race}"
  total="{total}"
  candidates="{candidates}"
>
  <p>{subheadline}</p>
</results-tracker>

Instead, you'll be met with an error. You can work around it by converting the candidates array to a JSON string, but it feels a little dirty.

<results-tracker
  headline="{headline}"
  race="{race}"
  total="{total}"
  candidates="{JSON.stringify(candidates)}"
>
  <p>{subheadline}</p>
</results-tracker>

The second and larger category of limitations are related to events. React does not automatically listen to events dispatched by a custom element.

Take for example the generic-switch component from @generic-components/components. <generic-switch> emits a checked-changed event when toggling the switch on or off. You may want to update some application state as a result of this event, but by default React won't be aware of it.

To handle this event, you could create a wrapping component that uses a ref to listen to the checked-changed event. Within the app, you'd use your wrapper component instead of the custom element itself:

<SwitchProvider checked handleToggle="{togglePolitics}">
  Politics:
</SwitchProvider>

The specifics don't really matter for this example, but the togglePolitics() function updates the necessary application state when the switch is toggled.

The wrapping component itself would look something like this:

import { useEffect, useRef } from "react";

import "@thepassle/generic-components/generic-switch.js";

const SwitchProvider = ({ checked, handleToggle, children }) => {
  const switchRef = useRef();

  useEffect(() => {
    switchRef.current.addEventListener("checked-changed", (e) => {
      handleToggle(switchRef.current.__checked);
    });
  }, []); // eslint-disable-line react-hooks/exhaustive-deps
  // Can't add handleToggle as a dependency above because it would result in
  // this hook being called multiple times

  return (
    <generic-switch checked={checked} ref={switchRef}>
      {children}
    </generic-switch>
  );
};

export default SwitchProvider;

That gets the job done, but it is quite a bit of additional boilerplate. Almost enough to make you consider just using a React based switch component instead.

With the release of Lit 2.0 the Lit team has created a number of supporting Lit Labs packages, including @lit-labs/react. @lit-labs/react provides improved React integration for Web Components, and with the createComponent utility it just so happens to address both of the issues outlined earlier in this post.

Going back to our <results-tracker> component, you'll recall that in order to pass an array of objects into the candidates property we had to first convert the variable into a string using JSON.stringify(). Using @lit-labs/react we could create a wrapping component for <results-tracker>:

import React from "react";
import { ResultsTracker } from "@backlineint/results-tracker";
import { createComponent } from "@lit-labs/react";

export const ResultsTrackerWrapper = createComponent(
  React,
  "results-tracker",
  ResultsTracker
);

If we then use this wrapping component in our render method, we can pass in an array with no additional conversion necessary.

<ResultsTrackerWrapper
  headline="{headline}"
  race="{race}"
  total="{total}"
  candidates="{candidates}"
>
  <p>{subheadline}</p>
</ResultsTrackerWrapper>

This works because createComponent actually discovers the available properties of the related web component, and then sets any props passed into the component as properties (which can be non-string values) of the web component rather than attributes (which must be strings). Using a wrapping component for this simple example feels a little heavy, but for more complicated components this could save quite a bit of effort.

Looking back at events emitted by <generic-switch>, createComponent can save us even more boilerplate. When using createComponent to create a wrapping component we can also provide a mapping of React prop names to events fired by the custom element.

import React from "react";
import { createComponent } from "@lit-labs/react";
import GenericSwitch from "@thepassle/generic-components/generic-switch.js";

export const GenericSwitchComponent = createComponent(
  React,
  "generic-switch",
  GenericSwitch,
  {
    onCheckedChanged: "checked-changed",
  }
);

So now when <generic-switch> emits a checked-changed event, the onCheckedChanged event prop we specified will fire. If we pass our togglePolitics function that updates the application state, we've wired up everything we need to make React respond to the event within our web component.

<GenericSwitchComponent
  checked="{checked"
  ?
  true
  :
  undefined}
  onCheckedChanged="{togglePolitics}"
/>

We're still using a wrapping React component here, but this approach feels much leaner.

@lit-labs/react also has an additional useControler hook as well which provides support for the reactive controller concept introduced in Lit 2. I don't have experience with reactive controllers as of yet, so I haven't made use of that hook. But it is nice to know it is there if I do take advantage of that feature in the future.

In a perfect world, I'd love to see React resolve these issues with Web Components within the framework themselves. My hope is that growing web component adoption will force their hand. But in the meantime, the Lit team taking matters into their own hands seems like the next best thing.

If you'd like to see the full example in action, I've created a couple of code sandboxes.

The first uses React only:

And the second refactors to use @lit-labs/react:

Framework Detection with @netlify/framework-info

Mon, 12 Jul 2021 07:33:52 GMT

I recently needed a way to detect which framework was being used to build a site. Immediately I wondered, "how does Netlify do this?" When setting up a new site, Netlify is able to determine things like your build command and publish directory. I didn't have to search too long for an answer because it turns out Netlify has open sourced the utility they use for framework detection.

Here's a simple example that outputs information about the detected framework, and also tests for the existence of a specific framework.

const { listFrameworks, hasFramework } = require("@netlify/framework-info");

async function detectFramework() {
  // listFrameworks() returns proimise containing tons of framework data
  const frameworkData = await listFrameworks();
  console.log("Framework Object: ", frameworkData);
  console.log("Detected Dev Commands: ", frameworkData[0].dev);
  console.log("Detected Build Commands: ", frameworkData[0].build);

  // hasFramework() can test for a specific framework
  const isVue = await hasFramework("vue");
  const isNext = await hasFramework("next");
  console.log("Is this Vue? ", isVue);
  console.log("Is this Next? ", isNext);
}

detectFramework();

The output of above when used in a NextJS project would look like this:

sandbox@sse-sandbox-0ngye:/sandbox$ node detect.js
Framework Object:  [
  {
    id: 'next',
    name: 'Next.js',
    category: 'static_site_generator',
    dev: { commands: [Array], port: 3000, pollingStrategies: [Array] },
    build: { commands: [Array], directory: 'out' },
    staticAssetsDirectory: undefined,
    env: {},
    plugins: [ '@netlify/plugin-nextjs' ]
  }
]
Detected Dev Commands:  {
  commands: [ 'yarn dev', 'yarn start', 'yarn build' ],
  port: 3000,
  pollingStrategies: [ { name: 'TCP' } ]
}
Detected Build Commands:  { commands: [ 'next build' ], directory: 'out' }
Is this Vue?  false
Is this Next?  true

Or alternatively, you can try it out in this CodeSandbox.

Detecting a framework is hardly an everyday activity for most (at least I hope it isn't,) but if you ever need to do it, this package is super handy. You can also run it via the CLI using the related build-info project.

Documenting My Mac Setup

Thu, 01 Jul 2021 13:13:53 GMT

Between loaners, replacements, and other surprises, over the past year or so I've set up new Mac laptops more than I ever have before. I tend to start fresh rather than migrate in order to get that nice clean digital slate. But what I don't do, is document the process all that well. You're in luck future self, because 4th time is the charm.

Prerequisites

Make a cup of coffee.
Make sure you have your 2FA apps handy
For anything that isn't in version control or in the cloud (hopefully that list gets smaller every time you do this), copy over files using a USB drive.

System Preferences

If I'm using multiple monitors, configure monitor orientation under System Preferences -> Displays.
System Preferences -> Trackpad:
- Uncheck 'Look up & data detectors'.
- Enable tap to click.
- Secondary click - click in bottom right corner.
System Preferences -> Dock: Position on screen left.
Finder -> Preferences -> Show Hard Disks on the Desktop
Sign in and enable iCloud
System Preferences -> Mission Control
- Disable 'automatically rearrange spaces based on most recent use'
- Disable 'displays have separate spaces'

Software

Install Chrome (yeah, I know)
- Sync to Google Account if possible (has the added bonus of syncing all extensions.) Otherwise install:
  - Instapaper
  - Zoom Scheduler
  - Last Pass or 1Password
  - Wappalyzer
  - Ghostery (and turn off the stats overlay in settings.)
  - Xdebug Helper
  - Dreditor
  - React Dev Tools
  - Evernote Web Clipper
  - Momentum
- Log into Last Pass extension
- Preferences -> Appearance - turn off 'Show warning before quitting with ⌘Q' (I've always been baffled about that being a default)
Install Firefox and Edge for cross browser fun.
Sign in to Mac App Store and download the following apps and utilities:
- Evernote.
- Install Things and set up Things Cloud.
- Set up all the Slacks.
- Unclutter (can't live without this one) Configure to store files in ~/Downloads
- Lightshot Screenshot
- Pomodoro timer - currently using Be Focused Pro
- Giphy Capture
Set up email. Outlook or Gmail for work depending on company preferences. Log into Hey (or whatever you replaced it with after your subscription lapses - some real nonsense going on at Basecamp).
Download and configure Bartender
Download and activate Deckset
Install Raycast and replace the spotlight hotkey.
Tunes - Install Sonos and set up account in Apple Music App.
Postman - for API debugging

Terminal and SSH

Install developer tools by typing git in the terminal.
Follow First Time Github Guide, but use a stronger key.
Change git editor to Nano: git config --global core.editor "nano"
Add key to ssh-agent
Add new key to Bitbucket, Github, Gitlab, Pantheon and Acquia accounts as needed (Acquia requires an RSA key. Hopefully they will support ed25519 in the future, but in the meantime using RSA will make your life easier.)
Install Oh My Zsh
Installed Powerline Fonts via git clone
Change zsh theme by editing ~/.zshrc and change to agnoster
Update ZSH permissions as outlined here.
Terminal Preferences - Changed default profile to Pro and font to 'Source Code Pro for Powerline' size 11.
VS Code User Preferences - Changed Terminal › Integrated: Font Family to 'Source Code Pro for Powerline'
Install Homebrew

IDE(s)

Download and install Visual Studio Code and enable the following extensions:

Plus many more that will be triggered by project configuration.

I also add the following settings in the user version of settings.json

{
    "editor.tabSize": 2,
    "editor.detectIndentation": false,
    "editor.fontFamily": "'Source Code Pro for Powerline', Menlo, Monaco, 'Courier New', monospace",
    "explorer.confirmDelete": false,
    "window.zoomLevel": 1,
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "files.associations": {
      "*.theme": "php"
    },
}

Local Development Environment

NodeJS

Install NVM via Homebrew (following manual steps outlined at end of install process)
Install latest node LTS via homebrew nvm install --lts

PHP

Upgrade PHP Version brew install php@7.4. Follow manual installation steps to add this new php version to your path.
Download composer
Move composer into path mv composer.phar /usr/local/bin/composer
Increase composer memory limit by running echo 'export COMPOSER_MEMORY_LIMIT=-1' >> ~/.zshrc
Hoping to stick with composer 2, but if I need to downgrade to Composer 1 composer self-update --1

Docker-y Things

Install Docker Desktop
- In Docker Desktop preferences, disable starting Docker upon login.
Install Lando (assuming that the version packaged with Lando is reasonable, you could install Docker Desktop as part of installing Lando)
Install Pantheon LocalDev

Dock

Rip a bunch of nonsense out of the dock.
Add: Outlook, Things, Chrome, VS Code, Slack, Terminal, Evernote, Sonos

Things to install as needed:

Audio Hijack
Dropbox (hoping to find my way out of Dropbox...)
EncryptMe
FileZilla
Kap
Mmhmm
XCode
Sonos
Descript
Sketch - because that is what you see most designs in these days.
Creative Cloud / Photoshop
PHP Storm because their visual merge conflict resolution tool is still way better than VS Code.
Atom for a lightweight editor when you need one.

Vagrant

Fingers crossed that my Vagrant days are over, but if needed:

Download and install VirtualBox
Download and install Vagrant
Install the following Vagrant plugins:
- vagrant plugin install vagrant-auto_network
- vagrant plugin install vagrant-hostsupdater
- vagrant plugin install vagrant-vbguest
Install Ansible via Homebrew

You did it. Take a nap.

New Beaches, New Basements, and New Jobs

Wed, 30 Jun 2021 12:32:05 GMT

It has been an eventful couple of weeks.

June 17th was my last day at Bounteous. I enjoyed my nearly five years there immensely, and am proud of the work I was able to within their amazing Drupal practice. I also had the unique opportunity to contribute to the company's re-branding efforts during a huge period of growth. But most of all I am extremely grateful for all the support I was given to contribute back to the Drupal community, both at events and online in the issue queue.

I took a little time off in between and was able to squeeze in a family trip to South Haven Michigan. It was our first time there, but we were able to find a nice AirBnb with private beach access. Not quite our typical Rhode Island trip (we were gun shy about air travel with a our son who isn't yet old enough to be vaccinated,) but it did he trick.

And then this shit happened:

The day after we got back from South Haven I was stuck in line at the DMV in the pouring rain, and came home to find some standing water coming up through the unfinished portion of our basement, along with wet spots coming up through the carpet in the finished portion of the basement. The next day we got more rain, and the water got worse. Since we were home, we were able to get our possessions out, but now the main floor of our house is cluttered beyond belief. We'll know more in the next day or so, but it looks like some pretty serious issues and possibly a problem with the foundation at ground level. Yikes!

Basement be damned, I started my new role at Pantheon on Monday. It was a very welcome distraction after a long, wet weekend. I'll be working within the Professional Services team as a Senior Technology Consultant focused on Decoupled Architectures. I'm really excited about what Pantheon is working on to support Decoupled sites, and happy to have the opportunity to be a part of it.

Between the new job and what will likely be a torn up basement, I'm probably still in for a few wild weeks. But I'd eventually be fine with things being boring for a bit at some point.

Running GitHub Codespaces on an iPad

Sat, 19 Jun 2021 07:16:22 GMT

I've been experimenting on and off with GitHub Codespaces since gaining access to the beta. My long term goal is to set up an environment for Drupal contribution, similar to Ofer Shaal's great ddev Gitpod project. In the meantime, I've used Codespaces for a slightly more frivolous pursuit.

I occasionally find myself using my iPad and wanting to do a small amount of coding, or a relatively minor update to this site. Codespaces finally makes this practical. You can update and commit code, run commands in a terminal, and even view your development site in Safari with live reload enabled. Paired with the Magic Keyboard (speaking of frivolous) this setup can do a surprisingly good job approximating an honest-to-goodness local development setup.

Here's an overview of how I configured Codespaces in the repository for this site:

In VSCode, download and enable the remote containers plugin for VSCode. (Alternatively you could download the appropriate dev container, but the VSCode integration is really nice.)
Hit F1 and search for 'Add Development Container Configuration Files...'
Select a container configuration definition. In my case it was Node.
Select your node version.
This will create a .devcontainer directory in your project that contains a dockerfile and a configuration file. Commit these files to version control and push to your GitHub repository.
In the Github Web UI on your iPad you should now be able to select 'Open with Codespaces' under the 'Code' dropdown button. From there you can create a new Codespace, or later launch one of your existing Codespaces.

In the future I'd like to automate a few things like installing node packages when the container starts up. I'm guessing that can just be added to the dockerfile.

Now that the iPad is running the same M1 chip as the MacBook, I have a suspicion (hope? dream?) that the line between MacOS and iPadOS will start to blur in some ways that will make web development on an iPad more practical. But in the meantime it is nice to have this option in repos where I might want to make quick updates without dragging out my big boy laptop.

Update: adding the development container that is most appropriate for your project has some advantages, but it turns out there is a much lower effort way to use a codespace on any repository. If you haven't added a .devcontainer folder to a repository, opening a codespace in the GitHub UI will use the default development container. This container has Python, Node.js, JavaScript, TypeScript, C++, Java, C#, F#, .NET Core, PHP, PowerShell, Go, Ruby, and Rust (phew.) Might be overkill, but probably has the tools you need to get started without any advance configuration.

Creating a CodeSandbox from a GitHub Repository

Sun, 30 May 2021 09:41:45 GMT

I recently had the need to post a live demo of a simple Create React App project that was posted on another user's GitHub repository. I typically turn to CodeSandbox for examples like this, but I didn't want to recreate the project from scratch since it already was good to go. I found that CodeSandbox has a ton of options to import a Sandbox.

The easiest one in this case by far was using GitHubBox.com. From their readme:

So all I had to do was take this GitHub URL:

https://github.com/aroseman/gdwc-react-demo/tree/main/

and change it to:

https://githubbox.com/aroseman/gdwc-react-demo/tree/main/

Which magically gave me this sandbox:

Super simple and super handy.

Configuring Tugboat Live Previews For Drupal General Projects

Tue, 27 Apr 2021 18:23:13 GMT

I've written previously about my excitement that Tugboat now offers live previews for core and contrib merge requests on Drupal.org, so I was especially happy to see live previews added to the Generic Drupal Web Components (GDWC) project recently.

GDWC is a general project on Drupal.org and runs using NodeJS rather than PHP. Since Tugboat runs on Docker it seemed likely that we could also run Node, but the existing documentation is unsurprisingly focused on Drupal PHP projects.

With a little experimentation we found that Tugboat Live Previews could in fact be easily configured to run for Node based projects as well. Almost all of the credit here goes to Joe Parsons who took the lead on this issue. We ended up adding .tugboat/config.yml to the project with the following contents:

services:
  apache:
    image: tugboatqa/httpd:2.4
    default: true
    commands:
      init:
        - curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -
        - apt-get install -y nodejs
      build:
        - npm install
        - npm run build-storybook
        - ln -snf "${TUGBOAT_ROOT}/storybook-static" "${DOCROOT}"

As you can see above, this first installs Node on Tugboat's httpd image. We can then install our dependencies and run a static build of Storybook, which is the primary development tool used by the project. The last step symlinks our build asset to the document root on the image so that it will display when someone views a live preview.

It feels like a more lightweight Node image could serve a similar purpose, but this solution meets our needs for now and builds in a reasonable amount of time.

Thanks again to all who helped make these live previews possible - they have already simplied the review process for this project.

2021 Best Picture Nominees

Sun, 25 Apr 2021 13:46:34 GMT

I've always wanted to watch all of the best picture nominees, but in past years I've never been able to make it through the whole list. Thanks to the pandemic, I was finally able to achieve my goal this year. All of the films were easily streamable, and staying home and watching movies all the time was much more socially acceptable for some reason. Since no one asked, here are some quick thoughts on the films:

The Sound of Metal - not just my favorite film this year, probably one of my favorite movies in years. The sound design is incredible, but the story it tells about recovery is even better.

The Father - My second favorite on this list. A creative and well executed depiction of dementia. In another year I think Anthony Hopkins would have had a strong shot at winning best actor for this.

Judas and the Black Messiah - entertaining, but left me with a lot of questions about how much this story reflected reality. Great performance from Daniel Kaluuya. Also interesting to watch this after Trial of the Chicago 7 given some of the overlap between these movies.

Mank - given all the shit talking about this movie, I liked it a lot more than I expected. Well shot and well crafted, and strange enough to keep me interested.

Minari - wasn't quite ready for how much of a downer this was. The film overall didn't completely click for me, but Yuh-Jung Youn's performance really stuck with me. Hoping she wins for best supporting.

Nomadland - feel like the odd man out given all the praise, but this didn't really do much for me. Still stunningly beautiful and worth watching for that alone.

Promising Young Woman - a super entertaining but flawed film. Carey Mulligan is my favorite of the lead actress performances I saw. Had some real issues with the ending, but on the other hand the movie deserves some kind of 'best needle drop' award for its use of a cover of Toxic.

Trial of the Chicago 7 - I get the shit talking about this one a little more than I did Mank. Felt more like a TV movie, but an admittedly entertaining one. And I found Sacha Baron Cohen's accent to be distractingly awful.

Other nominated films I've seen:

Time - the juxtaposition of modern and archival footage was really haunting, but I ended up a little confused about the message I was supposed to be taking away. Maybe that was the point?
Ma Rainey's Black Bottom - finishing this one up, so not sure on my thoughts on the movie as a whole. Chadwick Boseman's performance really is incredible. Viola Davis' performance is a little to showy for me, but sure is Oscary.
Borat Subsequent Moviefilm - give Maria Bakalova the Oscar you cowards!
Soul - I think watching this in two parts tanked the emotional effectiveness. Whoops.

Films I still want to see: One Night in Miami, Another Round, Collective, If Anything Happens I Love You.

I feel like I don't watch many tv shows or movies anymore, but that sure is a lot of movies up above. I hope all the Oscar films continue to be this easily available in the future.

What I'm Excited About in Lit 2.0

Wed, 21 Apr 2021 17:12:58 GMT

I tuned in for the live Lit launch event on YouTube today, which was surprisingly ~~long~~ detailed. I've really enjoyed the developer experience improvements that Lit-element and Lit-html have offered for building web components, and I'm even more excited for these new features in Lit 2.0.

The new Lit branding

I've always found the Polymer branding and the division between the Lit-element and Lit-html websites confusing. Having both packages live on just as Lit is so much more pleasant. Not to mention the fact that Lit is a super cool name.

Server Side Rendering support

Currently pre-release under Lit labs, SSR support is one of the biggest ticket features in Lit 2.0. Much more learning to come here, but this should open up a wide variety of use cases. And it also uses a proposed declarative Shadow DOM feature, the impact of which is kind of mindblowing:

IE 11 support is opt-in

When we can all ditch IE, we can ditch the extra dependency weight as well.

Refs

There are other ways to query and reference an element, but since I'm familiar with the pattern from React, having refs as an option is nice.

React

Speaking of React, another exciting Lit Labs project is improved React integration. React has some long-standing limitations related to making use of web components. I'd prefer to see React address this (and hope that as web component adoption grows their hand will be forced,) but Lit taking matters into their own hands is the next best thing.

Playground elements

Not necessarily a Lit 2.0 specific feature, but playground elements are used heavily throughout the great new Lit documentation and I have a long dormant side project that has been begging for this element.

Reactive controllers... probably

I still need to wrap my head around the impact of reactive controllers. My hope is that it will simplify the application level state management story, but need to learn more to make sure I'm not jumping to conclusions here.

Simple

It feels like there is a lot here, and I hope Lit manages to maintain the simplicity that drew me to it in the first place. Hopefully the new tagline of 'Simple. Fast. Web Components.' remains true. Regardless, I'm excited to make this upgrade in the web component library I've been working on and start experimenting.

We're In The Golden Age of Contributing to Drupal

Wed, 21 Apr 2021 02:06:16 GMT

I spent some time recently looking at the new general project type on Drupal.org. As someone who spends quite a bit of time working on Drupal adjacent things, a home for Drupal related projects that aren't modules or themes opens up some exciting (and important) possibilities. As I thought more about how this could be used for an upcoming project, it dawned on me that this was just latest in a series of developments that vastly improve the experience of contributing to Drupal.

I'm sure other Drupal lifers can think of older milestones, but my personal turning point goes back about four years ago to when the project application process was updated so that any user would have the ability to create a full project on Drupal.org. Prior to that, the process to create a new project felt insurmountable (at least to younger me.) Drupal activity will never reach the 50 NPM packages that were probably created while you read this paragraph, but reducing the barrier to entry makes a big difference.

Fast forward a few years and the hits just keep on coming.

Unquestionably the biggest improvement is the introduction of the merge request workflow on Drupal.org for both Drupal Core and Contributed projects. Rather than generating and uploading patches, users can now create an issue fork and submit a merge request. This process is likely to be much more comfortable to developers who are familiar with creating pull requests on Github. And this workflow wouldn't have been possible if Drupal hadn't migrated to a platform like Gitlab in the first place.

The process to set up a local environment for Drupal development has improved over this time frame as well. Docker based solutions like Lando and DDEV have prepackaged environments to automate the process of setting up a local environment to contribute to Drupal. Looking forward, cloud based environments could further simplify this set up process.

Simplytest.me continues to be a great option for contributors to evaluate modules and even test patches, and it has recently been modernized with a backend powered by Tugboat. Speaking of Tugboat, it also now provides live previews for merge requests for Core and Contrib projects.

That brings us all the way back to the recent addition of general projects.

A ridiculous amount of work went into all of these developer experience improvements. Thanks to the many people who put in the time and effort to make this possible.

Update:

During his keynote at DrupalCon this year Dries shared a walkthrough from Matthew Grasmick that provided quite the counterpoint. I'll let the video speak for itself:

This is a completely fair reminder that while we've come a long way, we also still have a long way to go to modernize our contributor experience.

While I've spent years getting to a point where I can benefit from the improvements that Drupal has made to the contribution workflow, countless others still get turned away at the door. Both things can be true: the contribution process is vastly improved, and it also isn't good enough. I'm still hopeful though. Based on the improvements outlined in my original post I have faith that the Drupal project will be successful continuing to adopt the features of Gitlab and I'll be able to collaborate with countless new contributor friends who are able to make it through the proverbial Drupal door.

Bluey

Sun, 18 Apr 2021 13:29:14 GMT

As we've been waiting for the weather here in Chicago to fully break in the direction of springtime, I feel like the entire family has been feeling extra cooped up. One thing that we found ourselves turning to as a way to reset at the end of the day is Bluey. If you have a preschool age child, you're probably already familiar with this show. But if you don't, I'd encourage you to give it a try anyway. Everyone in my house is older than that target demographic and we all still love it.

Bluey centers around an Australian family of blue heeler dogs. There are tons of reasons to love the show, but for me the hook is the surprisingly realistic depiction of parenting. They have fun, make mistakes, and sometimes just want their kids to leave them alone. I've never seen anything like it on a show for preschoolers.

To top it all off, 'Sleepytime' isn't just a great episode of a kids show, I'd rank it as one of my all time favorite episodes of television period.

I'd put Bluey right up there with vaccines on the list of things that have kept us going the past few months. 🐾

Help Build a Decoupled Menu Web Component at DrupalCon

Tue, 06 Apr 2021 21:43:45 GMT

Next week at DrupalCon North America as part of the Decoupled Menus Initiative I'll be participating in the Decoupled Menu Hackathon. Members of the community will be coming together to build a variety of menu components using different approaches and frameworks as a way to exercise a new menu endpoint provided by the Decoupled Menus module, along with the infrastructure supporting the new general project type on Drupal.org.

Leading up to DrupalCon I've also begun work on the Generic Drupal Web Components project. Starting with a menu component, it aims to create a library of generic web components that are accessible, framework agnostic, possible to style, and easy to use with data provided by Drupal. Here's a quick video overview:

If you're interested in getting involved, we could use your help! The Decoupled Menus Initiative Keynote on Tuesday April 13 is a great opportunity to catch up on the current status of the initiative. Following the keynote there will be related contribution efforts throughout the week of DrupalCon.

If you're interested in working with the Generic Drupal Web Components project, there is a meta issue of tasks tagged for DrupalCon. Many of them involve seeing how far we can extend and re-theme the generic version of this component, which should leave room for a lot of interesting experimentation. Have other ideas? Leave a comment on the issue.

Web components not your thing? There is a similar meta issue for a menu component being built using React. Prefer another framework or have another wild idea? Try out the demo endpoint and see what you can come up with.

Looking forward to collaborating with everyone and seeing how many different ways we can represent data from a single menu endpoint. 🚀

Resources:

Using Screen Recordings to Identify Page Load Performance Issues

Fri, 02 Apr 2021 21:50:15 GMT

Sometimes when auditing Lighthouse results the amount of feedback can make it difficult to determine what to focus on improving. In cases like those, a screen recording can provide quite a bit of clarity.

Web Page Test provides a number of easy options to generate a recording of your test runs. When setting up a test, check 'capture video' in the advanced options. You can then save the recording as a video or a gif after clicking on the 'watch video' link in the related column. Or you can enter the timeline view, configure options like frame size and slow motion, and export your recording.

Here is an example recording of the homepage of this site being loaded. You'll see a pretty obvious problem - the menu is loading as expanded and then collapsing when JavaScript executes, which is likely causing cumulative layout shift. I've found that a slow motion video can also make less glaring issues clear, like web fonts shifting during load.

For a paid alternative, Calibre automatically captures and archives a video recording of each test run. And if you're specifically trying to eliminate layout shift, this layout shift gif generator can be helpful.

You can get similar insights by scrolling through the timeline view in the performance tab in Chrome, but there is just something about a video that clicks for me a little easier. Grab some 🍿, sit back, and find those page loading bottlenecks.

How I Exercised in this Cold Pandemic Wasteland

Thu, 25 Mar 2021 13:08:52 GMT

Temperatures are finally leaning in the direction of spring here in the Chicago area, but the combination of weather and the pandemic made for a rough winter. For exercise, I mainly just run. Since it is the only form of exercise I truly enjoy, I try to do it year round - outside if there is no snow or ice on the ground, and indoors if it is too cold. Indoors wasn't an option this year, so I had to find some alternatives to stay active.

(Could I have bought a treadmill? Funny story - we have one, but the ceiling in my basement is low enough that if I ran on it, I'd hit my head.)

I ended up cycling through a few digital options. I'm not saying this is a very successful plan - at best I've maintained where I was at pre-pandemic. Regardless, having a variety of options for some amount of daily activity was helpful as we wait for the world to open back up.

7 Minute Workout App - short interval training workouts you can do with just body weight. I've had this app forever and it is just enough to make me feel like I was active.
Apple Fitness + - I've really enjoyed Apple Fitness +. The trainers are bearable, and the variety in workouts made a big difference while I was stuck in my basement. I mostly did strength training and interval workouts, with core workouts on occasion. I also enjoyed the mindful cooldowns that were suggested after completing a workout. They also had the side effect of getting me back into meditation a bit.
Calm - I don't need guided meditation as much as I used to, but I use Calm when I do. I'm hoping I can keep up with meditation when I get back to outdoor running, but my track record on that isn't great.
Ring Fit Adventure - The workouts you get from this crazy Nintendo gadget are typically pretty light, but this also falls into the 'at least I did something active' category. The game itself is surprisingly fun and deep, and the ring device itself works really well.

Now that I can run outside again I still want to stick with Apple Fitness - at least the strength training (I. Am. Weak.) So maybe we can add that just after 'puzzles' on the list of good things I picked up during the pandemic.

Gearing Up For Midcamp 2021

Mon, 15 Mar 2021 19:56:40 GMT

Midcamp, my local Drupal Camp, is back March 24 - 27. Midcamp went virtual at the beginning of lockdown last year and while it was a rousing success, we were definitely making it up as we went along. This time around we're trying a new format with an increased focus on community building which we're also hoping will help combat the Zoom fatigue we're all feeling. The schedule breaks down as follows:

Wednesday, March 24: Get Started with Drupal - content focused on introducing attendees to Drupal.
Thursday, March 25: Meet the Drupal Community - lightly structured community building activities.
Friday, March 26: Share Your Knowledge - a one day unconference format
Saturday, March 27: Give Back to the Project - Our traditional contribution day.

Within that schedule, here are a few things I'm extra excited about:

In addition to our traditional Zoom rooms, we'll also have a space in Gather.town for us to virtually socialize. I've been spending some time moving around sprites, and expect to have some surprises in store.
On Thursday, Matt Glaman will be leading a workshop on writing JavaScript tests using Nightwatch.js
And on contribution day, one of the featured initiatives will be adding additional test coverage to Drupal's new Olivero theme.

Registration is pay what you want, and we'd love to see you there.

With any luck we'll have an in-person component at Midcamp next year, which will also overlap with St. Patrick's day. I'm workshopping the following tagline: Midcamp 2022: IRL in IRL.

Recent Drupal Podcast Appearances

Sat, 13 Mar 2021 22:56:40 GMT

I've been lucky enough to be a guest on a few Drupal related podcasts recently, continuing my long standing trend of talking to anyone who will listen.

Drupal Easy Podcast: Back in January, Mike Anello had me on to talk about Front End Components on Episode 238. We mostly focused on the basics, which was a nice change of pace compared to the component integration talk I had been giving recently.

Talking Drupal: the folks at Talking Drupal recently decided to have a rotating co-host seat for four week stretches and were nice enough to invite me to be the first to occupy the seat. During my four week run I was lucky enough to chat about:

Starting a Drupal Career with Mike Anello (I swear Mike is following me)
Tugboat with Matt Westgate
Iterative Approach To Decoupling with me!
Decoupled Menus with Gabe Sullice, Baddy Sonja Breidert, and Liam Hockley.

The Decoupled Menus discussion was especially enlightening as it clarified some of my misconceptions about the project (they aren't shipping a menu component, instead they are making enhancements to Drupal to better support many menu components) and also gave me some ideas about how I might be able to contribute.

A huge thanks to Stephen, John and Nic for having me - it was a great experience. Looking forward to hearing from their future guest hosts.

On the topic of podcasts, I'd recommend the following recent non-Drupal podcasts that I thought were especially great:

Shop Talk Show 451: JavaScript and Web Components with Nolan Lawson
Syntax 330: React Query + More React with Tanner Linsley

Running Lighthouse CI Server Locally

Wed, 10 Mar 2021 23:10:55 GMT

I had previously set up Lighthouse CI with Github Actions, but I still found myself looking longingly at the reports provided by Lighthouse CI Server as a way to compare results over time. While the docs are mainly focused on running on a public server with persistent storage (which is clearly the most useful way to do this,) I couldn't help but wonder if I could run the server locally to capture some quick data comparing a few specific changes. Turns out you absolutely can. The docs provide an example Docker container to use locally, but I went with the even lower-fi solution.

From within the repository containing the code that I'm measuring, I added packages for Lighthouse CI Server, along with sqlite for data storage.

npm install -D @lhci/cli @lhci/server sqlite3

I also added Concurrently as it made it easier to start the server and collect data in one fell swoop:

npm install -D concurrently

While I was messing around with package.json I added the following scripts:

"scripts": {
  "lhci:audit": "concurrently \"npm run lhci:server\" \"lhci autorun\"",
  "lhci:wizard": "lhci wizard",
  "lhci:server": "lhci server --storage.storageMethod=sql --storage.sqlDialect=sqlite --storage.sqlDatabasePath=./db.sql"
},

With those scripts in place, I can start the server by running:

npm run lhci:server

And then run the wizard with:

npm run lhci:wizard

The wizard will ask you a few questions about your server and your code repository, and then provide your build token and admin token. With that information in hand, I added lighthouserc.js in the root of my repository containing the following:

module.exports = {
  ci: {
    collect: {
      url: ['https://www.brianperry.dev'],
    },
    upload: {
      target: 'lhci',
      serverBaseUrl: 'http://localhost:9001',
      token: '###-###-###', // the build token provider by the wizard. Could also use LHCI_TOKEN variable instead
    },
  },
};

In my case, I added lighthouserc.js to the .gitignore for my project because I didn't want these local settings to override the Lighthouse settings I already had working with Github Actions. You may also want to ignore .lighthouseci/ and db.sql as well if you are only planning to store this information locally.

With that in place I can now run

npm run lhci:audit

which will start the Lighthouse CI Server and record results for the current commit. If I run this repeatedly as commits are made, I can get a granular comparison of the impact of my changes.

This would certainly be more useful incorporated into your main CI process, but this local approach can still be useful for benchmarking a feature branch or making some other small scale measurement.

Embedding a File From Github as a Gist

Tue, 09 Mar 2021 23:19:12 GMT

This is probably the first personal site I've ever had that has quality syntax highlighting for code snippets. But there are still cases where it would be easier to include an example from a github repository wholesale. I've found a couple of services that handle this nicely.

I've been using Gist It, because the styles on this site conflict with Embed Like Gist.

For either of these services, it is as easy as embedding a script tag within the markdown file for my post.

## Markdown Heading
<script src="https://gist-it.appspot.com/github/robertkrimen/gist-it-example/blob/master/example.js"></script>
### More markdown

The output looks like this:

Handy trick, but but a tradeoff - highlighting the code in the post itself will work forever, but this approach will only work as long as the services exist.

Adding Simple Pagination to an 11ty Collection

Sun, 07 Mar 2021 17:00:30 GMT

11ty can handle pagination really well, but finding the right subset of the many pagination features can be a little difficult to figure out. In my case, I just wanted something really simple so that I didn't end up with endlessly scrolling list pages as this site grows. Since this site uses Tailwind, I decided to aim for something similar to the simple card footer from Tailwind UI.

At its simplest, page data can be enabled by adding the pagination key to your template's front matter. The first example from the pagination docs shows how to page over a dataset also defined in your front matter:

---
pagination:
  data: testdata
  size: 2
testdata:
  - item1
  - item2
  - item3
  - item4
---
<ol>
{%- for item in pagination.items %}
<li>{{ item }}</li>
{% endfor -%}
</ol>

In my case, I was looking to add pagination to a collection. My existing template set a variable for the collection, and then used a filter to reverse it.

{% set postslist = collections.all %}

{% for post in postslist | reverse %}
{# iterate through posts #}
{% endfor %}

We can instead use the pagination key in our front matter to prepare this data:


title: "All Updates"
pagination:
data: collections.all
size: 5
alias: postslist
reverse: true

---

{% for post in postslist %}
{# iterate through posts #}
{% endfor %}

We specified the collection that should be used as the dataset, the number of posts that should display on each page, and reversed the results. And by using the alias of postslist I didn't have to change variable names in any of my existing markup. You could instead use the default pagination.items if you were starting from scratch.

Now on to the pager itself. First let's look at displaying the current page and result set.

{% if pagination.pageLinks.length > 1 %}

  <div class="pb-6 sm:pb-0">
    <p class="text-md text-gray-500">
      Showing
      <span class="font-medium">
        {{ (pagination.pageNumber * pagination.size) + 1 }}
      </span>
      to
      <span class="font-medium">
        {% if pagination.nextPageLink %}
          {{ (pagination.pageNumber * pagination.size) + pagination.size }}
        {% else %}
          {{ collections.all.length }}
        {% endif %}
      </span>
      of
      <span class="font-medium">{{ collections.all.length }}</span>
      results
    </p>
  </div>
{% endif %}

As you can see in that code snippet, 11ty's gives us a bunch of helpful data in the pagination object. We can use pagination.pageLinks.length to determine if there is even enough data to page - if there is only one page, we don't render the pagination at all. We're also doing a tiny little bit of math to determine the current range of posts that are displayed (I should have warned you that there would be math.) In (pagination.pageNumber * pagination.size) + 1 we're adding 1 because page number is zero indexed. And we can use collections.all.length for the overall number of posts.

Next, let's add the previous and next links. I based this on an example from an 11ty github issue:

<nav class="pagination">
  {% if pagination.previousPageLink %}
    <a class="pagination__item" href="{{ pagination.previousPageHref }}">Previous</a>
  {% else %}
    <span class="pagination__item">Previous</span>
  {% endif %}
  {% if pagination.nextPageLink %}
    <a class="pagination__item" href="{{ pagination.nextPageHref}}">Next</a>
  {% else %}
    <span class="pagination__item">Next</span>
  {% endif %}
</nav>

If there is a previousPageLink or nextPageLink we're displaying as a link, otherwise we're displaying as a span to indicate that the option is disabled. And the link to the previous or next page of results is available in pagination.previousPageHref and pagination.nextPageHref respectively.

After layering in some Tailwind classes the end result looked like this:

Putting it all together, here's the final pagination partial. I'm using a variable length rather than collections.all.length so this pagination partial can be used with other collections.

Resources:

Configuring Lighthouse CI with Github Actions

Wed, 03 Mar 2021 20:34:15 GMT

I'll be spending a lot of time auditing web performance over the next couple of weeks, and along the way expect to be setting up some tooling that I haven't used before. First on the list was Lighthouse CI, which I took for a spin in a Github repository. I initially set this up manually following the getting started docs, but eventually learned that the Lighthouse CI Action met my needs nicely.

First, I added a budget.json file which I will eventually assert against:

[
  {
    "path": "/*",
    "resourceSizes": [
      {
        "resourceType": "document",
        "budget": 18
      },
      {
        "resourceType": "total",
        "budget": 200
      }
    ]
  }
]

This is just the default example from the docs, I'll be defining what the actual budget should be as I get deeper into auditing.

Next I created .github/workflows/ci.yml with the following contents:

name: Lighthouse CI for Netlify sites
on: pull_request
jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
          node-version: 14.x
      - name: Install & Build
        run: |
          npm install
          npm build
      - name: Wait for the Netlify Preview
        uses: jakepartusch/wait-for-netlify-action@v1
        id: netlify
        with:
          site_name: 'my-fun-netlify-name'
      - name: Audit URLs using Lighthouse
        uses: treosh/lighthouse-ci-action@v7
        with:
          urls: |
            ${{ steps.netlify.outputs.url }}
            ${{ steps.netlify.outputs.url }}/about/
            ${{ steps.netlify.outputs.url }}/all/
            ${{ steps.netlify.outputs.url }}/jams/2021/hades/
            ${{ steps.netlify.outputs.url }}/posts/2021/gatsby-source-drupal-only-referenced-images/
          budgetPath: ./budget.json
          temporaryPublicStorage: true

This isn't the default recipe, but it allowed me to wait for Netlify's deploy preview to complete and then run lighthouse on the actual preview site. In my case I also needed to bump things up to a more recent version of node instead of the default. I also removed uploadArtifacts: true as I don't know that I really need the reports to persist long term (I can always re-enable this later).

At this point, I had the lighthouse reports running, but I had to dig into the build logs to get them. Thankfully it was possible to configure Github status checks to see the results right in the Github pull request UI. I had to authorize the Lighthouse CI Github App which provided me an authorization token. Under the settings for my repository I then added that token as a repository secret called LHCI_GITHUB_APP_TOKEN. To add the checks to my CI job I had to add two sections to my .github/workflows/ci.yml.

First, I had to add a reference to the related git history:

steps:
  - uses: actions/checkout@v2
    with:
      ref: ${{ github.event.pull_request.head.sha }}
{% endhighlight %}

I missed this part initially. Without it the status checks will be sent, but they won't be able to be tied to the correct PR.

Lastly, I had to add a the repository secret as an environment variable:

{% highlight yml 11-12 %}
- name: Audit URLs using Lighthouse
  uses: treosh/lighthouse-ci-action@v7
  with:
    urls: |
      ${{ steps.netlify.outputs.url }}
      ${{ steps.netlify.outputs.url }}/about/
      ${{ steps.netlify.outputs.url }}/all/
      ${{ steps.netlify.outputs.url }}/jams/2021/hades/
      ${{ steps.netlify.outputs.url }}/posts/2021/gatsby-source-drupal-only-referenced-images/
    budgetPath: ./budget.json
    temporaryPublicStorage: true
  env:
    LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

With all of that in place I now see entries for each lighthouse check, and can click on the details link to launch the report.

This site isn't actually what I'm auditing, but it still looks like I've got some work to do :)

Adding Excerpts to an 11ty RSS Feed

Tue, 02 Mar 2021 00:00:00 GMT

I previously wrote about creating multiple feeds with the 11ty RSS Plugin which I was doing in service of creating a feed for Planet Drupal. While creating a second feed was an important first step, I also found that my feed needed to have an excerpt of a specific maximum length.

There are a handful of options out there for handling excerpts with 11ty. eleventy-plugin-excerpt adds a universal shortcode for excerpts. This was close to what I needed, but the shortcode takes the entire template object as an input, which made using additional filters like htmlToAbsoluteUrls from eleventy-rss difficult.

Slightly buried in the docs to customize front matter parsing is an example of parsing excerpts from content using additional options from the gray-matter package. I was only able to access the excerpt in my feed if I used an excerpt alias for some reason, so I ended up adding the following to my 11ty config:

eleventyConfig.setFrontMatterParsingOptions({
  excerpt: true,
  excerpt_alias: 'feed_excerpt'
});

I can now include a separator in my post markdown as follows:

This will serve as my excerpt. It is also included in the full post.<br /> ---<br /> And everything after will also be included in the full post, but not the excerpt.

It is also possible to manually overwrite the excerpt field by specifying it in your markdown front matter. This nice little escape hatch comes in handy if you want the excerpt to combine non sequential parts of the post, or otherwise work around some markup that should be excluded from the excerpt.

Since these excerpts were being added for an RSS feed, I also needed to take an extra step to ensure that the excerpt was being rendered as markup rather than raw markdown. As a quick workaround, I created a custom feedEncode filter using 11ty's default markdown parsing library:

// eleventy.js
const md = require('markdown-it')();

// add within module.exports function:
eleventyConfig.addNunjucksFilter("feedEncode", function(value) {
  return value ? md.render(value) : '';
});

Then in my feed template, I can pass the excerpt through my filter to ensure it will be rendered as html in feed readers:

<description>{{ post.data.feed_excerpt | htmlToAbsoluteUrls(absolutePostUrl) | feedEncode }}</description>

Due to some confusion related to feed validation, I also created an RSS feed example for the 11ty RSS plugin. In hindsight, I could have gotten away with the default Atom feed example, but perhaps someone else out there will find this useful.

Bartees Strange: Live Forever

Sun, 21 Feb 2021 00:00:00 GMT

Hard to pin the sound down on this one, so I'm not even going to try.

After a mood setting intro the album opens up with two absolutely killer songs:

Having those two massive songs up front initially made things feel really front loaded, but this album has been a real grower for me that has balanced out over time. Looking forward to following his work in the future.

Running Lando on an Apple Silicon Mac

Sat, 20 Feb 2021 20:23:29 GMT

While I've done some NodeJS based development on my M1 MacBook, I had been procrastinating on doing anything Docker based. I had an opportunity to take the plunge today and decided to go for it.

My understanding is that this config is not officially supported for a variety of reasons, ~~but for me it pretty much just worked~~.

Here's what I did:

Downloaded and installed the Docker M1 Tech Preview
Downloaded the latest Lando release (3.0.25 in my case)
Installed Lando, being sure to customize the install to not install Docker Desktop over my existing tech preview.
Created and started a Drupal 9 project ~~that just worked~~.

If I run into any quirks as I put it through the paces a bit more, I'll update this post.

Update: Quirks already :)

Upon further restarts things seemed to be getting hung up on the message Scanning to determine which services are ready... Please standby... ? I was able to get past this by adding the following to .lando.yml as mentioned in this issue:

services:
  appserver:
    scanner: false

It works, but indicates that there is some mystery issue under the covers. So as the Lando installer says when I install using an existing version of Docker: YMMV.

Talks: Florida Drupal Camp 2021

Sat, 20 Feb 2021 00:00:00 GMT

Slides / Session Page

This was my second time giving this talk, and I kind of forgot how dense of a topic this is. One major update was a re-worked example of approaches to scoped styling:

(The sandbox probably doesn't make a ton of sense without having someone walk through it. Might try to do a quick recording of it someday.) Next time I do this styling demo, it should go later in the presentation. I think people needed more of a foundation on web component concepts before we get this deep into styling specifics.

I also added an example of using web components with a JS framework - React in this case:

I think this example ended up being a little confusing because React and Web Components don't play all that nice together. I'll try to work up an example with a more web component friendly framework next time.

Also saw that I somehow found my way into being listed as a featured presenter on Noti.st where I post my slides. Cool! (Less cool is the fact that my wife called me out on using a photo that is too old...)

Other odds and ends:

The way the camp used gather.town was really fun. Hoping we can borrow some of FLDC's great ideas for Midcamp.
Found out about Promet Source's Provus project which is a component based Drupal stater site. We are working on a similar effort at Bounteous.
Hoping to check in on contribution day for a bit.

Configuring gatsby-source-drupal to only Import Referenced Images

Fri, 19 Feb 2021 00:00:00 GMT

We've recently started using Gatsby on Bounteous.com, my company's existing Drupal 8 site. Rather than attempting to rebuild the entire front-end at once, we're starting iteratively with small portions of the site and leaving other sections rendered by Drupal (possibly forever.) This approach posed a few interesting problems, one of which was configuring the gatsby-source-drupal plugin to only import the content we needed for our build.

The gatsby-source-drupal plugin pulls data from Drupal’s JSON:API endpoints and makes this data available to React components via Gatsby’s GraphQL API. By default, the plugin imports all data from the source Drupal site. Since for this initial phase Gatsby would only be used to build a small subset of pages, most of this data was unnecessary and also would have the side effect of greatly increasing our build times.

As an initial attempt to solve this problem, we used Drupal’s JSON:API Extras module to only expose the resources that our Gatsby build needed to depend on. This helped, but we still eventually needed to enable the file resource, which pretty much immediately sunk our build times. Gatsby was now importing (and worse yet processing) local versions of years worth of images that we didn’t need to support our new content. We eventually found that it was possible to configure gatsby-source-drupal to only import the files referenced by content that was necessary for our builds, but it required a combination of configuration options that wasn’t completely obvious from the documentation.

The first step was to add the file resource as a disallowed link type:

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-drupal`,
      options: {
        baseUrl: <your_url>,
        /// Disallow the full files endpoint
        disallowedLinkTypes: [`self`, `describedby`, `file--file`],
      },
    },
  ],
}

This alone would result in all files being ignored by the plugin. A little bit further on in the disallowed link types documentation is the following note:

This essentially allows us to re-allow specific files if they are referenced by other content. What makes this feature potentially easy to miss is the fact that it uses the plugin’s filter option, which typically further restricts the data sourced from the plugin. The resulting configuration ended up looking like this:

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-drupal`,
      options: {
        baseUrl: <your_url>,
        /// Disallow the full files endpoint
        disallowedLinkTypes: [`self`, `describedby`, `file--file`],
        filters: {
          // Use includes so only the files associated with our decoupled content
          // types are included.
          "node--decoupled_home_page": "include=field_dhp_components",
          "paragraph--dhp_hero": "include=field_dhp_fg_img",
          "paragraph--dhp_animation_cards": "include=field_dhpac_images",
          "paragraph--featured_post": "include=field_dfp_bg_img",
        },
      },
    },
  ],
}

With this configuration, if a featured post paragraph is used on the homepage, any associated background images (field_dfp_bg_img) will be sourced by Gatsby as well. While it does require some maintenance as we incorporate new entities into our builds, it has kept our build times quite reasonable thus far.

Creating Multiple Feeds with the 11ty RSS Plugin

Sat, 13 Feb 2021 16:54:34 GMT

Creating a feed using the 11ty RSS plugin is pretty straightforward and doesn't require much configuration. Less obvious to me was how to create a second feed for a filtered subset of my data. In this case I wanted to create a feed of only posts tagged with 'Drupal' that can be submitted to Planet Drupal.

Since the plugin required so little configuration, it wasn't clear to me if there was a way to make the plugin aware of a second feed template. As it turns out, the plugin is smart enough to pick up on any number of feed templates, located anywhere in your codebase. I created a /src/_feeds directory that contained by default feeds.njk template and my new Drupal-specific drupal.njk template. As long as you add a unique permalink in this template's json frontmatter, the plugin will generate a new feed for you. In this case I used:

  "permalink": "drupal.xml",

Next was determining how to filter my 11ty collection based on a specific tag. This quick tip on creating tag pages gave me what I needed. Instead of iterating through collections.all as I did in my default feed, I added the following tag filter:

{`%- for post in collections[ 'drupal' ] | reverse %`}

As a result, I had only my content tagged with Drupal. The resulting drupal.njk feed template looked like this:

Now all I have to do is write some Drupal related posts...

Hades

Mon, 01 Feb 2021 00:00:00 GMT

Hades has hooked me in a way that no roguelike before has. There has been no shortage of virtual ink spilled on why this game is so great, but for me it comes down to a few main things: improvisational combat, evolving systems, and story.

Improvisational Combat

Hades strongly encourages you to play with different loadouts. While I have favorites, I still have fun playing regardless of the weapon I choose at the start of my run. That combined with the insane variety of upgrades you'll earn, you really won't know what combat style you'll be leaning on until it presents itself to you. This makes every run feel surprising and fun.

Evolving Systems

If someone explained all of the progression systems in Hades to me before I played the game, I would have been turned off by the complexity. But one of the game's many magic tricks is how it introduces them to you slowly over time, as to not overwhelm the player. In fact, you could argue that the game doesn't fully open up until you survive your first full run. Never have I been so motivated to keep playing after I 'beat' the final boss. And if you don't understand, or aren't interested in some of the systems, it's fine. Don't feel like playing the fishing mini-game that pops up later on? Hades won't be mad at you.

Story

Since you're repeatedly starting over, roguelikes often don't have much of a story. Hades on the other hand, reveals the reason for Zagreus' escape from the underworld patiently over many playthroughs. More impressive yet, it does so with a staggering amount of dialogue that never seems to repeat across dozens and dozens of runs. Learning more about the world and your favorite characters can be just as much as a reason to play as leveling up and beating your last run.

Protip: If you start to feel like you might be stuck and ready to walk away from Hades, don't be afraid to turn on the God Mode difficulty setting. It adjusts the difficulty over time to meet you where you are, and you can shut it off at any time.

Gatsby Debugging in VS Code

Fri, 29 Jan 2021 00:00:00 GMT

I've actually never had JS debugging working correctly in my Gatsby projects, which has always bugged me. With the help of a few guides today I learned how to change that.

My initial need was client side debugging, which was covered well in the appropriately named How to debug Gatsby JS in VS Code The Node debugging instructions in that post didn't work for me, so I instead used the manual config example from the Gatsby docs for that.

In my case, Gatsby was not in the root of my workspace, so I needed to make a few adjustments. For the client side configuration, I needed to change the webRoot to "${workspaceFolder}/gatsby". Adjusting the Node configurations were a little trickier. Updating the path to the Gatsby binary alone didn't work because VS Code was launching the console from the root of the workspace, which wasn't a Gatsby project. Eventually after digging around in the VS Code docs I found that you could set a current working directory option. Adding "cwd": "${workspaceRoot}/gatsby" to each of the Node configurations did the trick.

The resulting launch.json looked like this:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Gatsby develop",
            "type": "pwa-node",
            "request": "launch",
            "program": "${workspaceRoot}/gatsby/node_modules/.bin/gatsby",
            "args": ["develop"],
            "runtimeArgs": ["--nolazy"],
            "console": "integratedTerminal",
            "cwd": "${workspaceRoot}/gatsby"
        },
        {
            "name": "Gatsby build",
            "type": "pwa-node",
            "request": "launch",
            "program": "${workspaceRoot}/gatsby/node_modules/.bin/gatsby",
            "args": ["build"],
            "runtimeArgs": ["--nolazy"],
            "console": "integratedTerminal",
            "cwd": "${workspaceRoot}/gatsby"
        }
        {
            "type": "chrome",
            "request": "launch",
            "name": "Client side in Chrome",
            "url": "http://localhost:8000",
            "webRoot": "${workspaceFolder}/gatsby"
        }
    ]
}

brianperry.dev

Initial Impressions of Claude Design

The output is surprisingly good

Still very much experimental

Token hungry

The Claude Code handoff needs work

Bottom line

Porting My OpenClaw Assistant to Claude Cowork

What OpenClaw Did

Why Cowork

Building the Basic Workflow

The Work Log

Scheduled Check-ins

Daily Standup Summary

Blog Post Brainstorming and Publishing

Persisting the Workflow

CLAUDE.md as the System's Source of Truth

Sync

Takeaways

Heading Back to DrupalCon

How the project is thinking about AI

Getting hands on with Drupal Canvas and code components

Sharing what I've been working on

2026 Oscars Films

My Favorites

The Rest

My Picks

Other Thoughts

I Broke (and Fixed) A Guitar String

(Aaron Lewis Voice) It's Been A While

Navigating a Layoff

Family Fun

Things That Kept Me Sane-ish in 2025

Hopes for 2026

2025 Oscars Films

My Favorite of the Year

Best Picture Nominees

Other Nominated Films

Nominated Films I'd Still Like to See

My Picks

Talking Drupal - Single Directory Components Workflow

Using Verbose Output When Applying Drupal Recipes

The Perils of Third-Party Scripts in Next.js

So You've Got a Script...

Wrestle Back Some Control with The <Script> Component

If Client Code Depends on These Scripts, My Thoughts Are With You

Always Open to a Cleaner Solution

Things I Enjoyed Over Winter Break

Holiday Celebration Nonsense 🎄

Blue Man Group

Games

TV

Guitar

Puzzles

Two Modules to Help Tame Large Drupal Menus

Big Menu

Menu Select

Bonus: Menu Firstchild

My Own Personal Bird of the Century

Talking Drupal API Client on Talking Drupal

Matching Drupal’s GitLab CI ESLint Configuration in a Contrib Module

Disaster Strikes

Using the Drupal Core ESLint Configuration

Using a Standalone ESLint Configuration

Happy Linting

Resources

Drupal API Client 1.0 Release

What is the Drupal API Client?

Recent Developments

See you at Stanford WebCamp and DrupalCon!

2024 Best Picture Nominees

My favorite movie of the year

Movies I Loved

Movies I Liked

Bonus

My Ballot

Extending The Drupal API Client

The Decoupled Router Endpoint

Extending ApiClient

Taking Advantage of Additional ApiClient Features

Wrestle Back Some Control with The `<Script>` Component