1/21 I had the opportunity to build a visual regression toolset using Storybook, Playwright, Azure Blob Storage, and Azure Pipelines. It tests all breakpoints from the Tailwind config file. Here’s how it went. 🧵

As part of the transition to serving images from Widen’s CDN (details here: bsky.app/profile/chee...), I found a way to divide the work between engineers based on image aspect ratios. I took on the 2:3, 1:2, and 5:2 ratios. Here’s what I learned along the way.

Cheerful Oriole@cheerfuloriole.bsky.social · 2y ago

The new Acquia DAM module serves images directly from Widen’s CDN, which means faster delivery, less server strain, and (hopefully) fewer syncing headaches. The new website is already using it, and an epic is in place to migrate the older sites. Here’s how the migration is progressing so far… 👇

I was assigned a spike to determine if it is possible to safely integrate a Racecheck carousel widget into one of our Drupal microsites. The microsite is about an annual 10K and 5K race. What I found might surprise you. Read on.

It was time to upgrade the Next.js site from Pages Router to App Router—along with Next.js 15 and React 19. A teammate led the primary task, while I handled several subtasks. Here’s what I contributed to the migration. ⬇️

I noticed a Content Security Policy (CSP) warning in the browser console. VWO was trying to create a Web Worker using a Blob URL. I created a bug ticket, and luckily, there was room in the sprint to address it immediately. It was time to dive into the details and figure out what went wrong. 🧵

Not quite a pull request, but I got to dive into Jira Automation recently—and it was pretty cool. Ever wondered how to make sure deploy notes and release tags never get forgotten? Turns out, automation can do a lot of the heavy lifting. 🧵

After updating the color palette on the Next.js site, I noticed white text on a bluish hue didn’t meet AA contrast standards. XD provided a more accessible option, so I updated the Tailwind config to fix the contrast. I also removed the rule in Storybook that had been silencing the a11y warning.

Acquia recently announced that they will begin rolling out Acquia ID, requiring Drupal to be on the latest version of the Acquia Connector module (version 4.1.0). As part of this transition, one of my recent PRs updated the composer.json file. Easy peasy.

What seemed like a simple task—updating the site’s email for automated messages like registrations and password resets in Drupal—quickly became more complicated. I ran into some unexpected configurations. Here’s how it went down.

For a recent task, I added 15 new sustainability icons to a component library. I sourced the SVGs from Google Fonts and followed the well-documented process in Storybook—drop them in a folder, run a command, and let SVGO handle optimization.

The new Acquia DAM module serves images directly from Widen’s CDN, which means faster delivery, less server strain, and (hopefully) fewer syncing headaches. The new website is already using it, and an epic is in place to migrate the older sites. Here’s how the migration is progressing so far… 👇

A sudden spike in 500 errors appeared in the logs after a bot scanned the site for vulnerabilities. These errors typically indicate server-side issues and can reveal misconfigurations or weaknesses attackers might exploit. In this case, they also triggered hundreds of email notifications.🧵

The changes to the Content Security Policy (CSP) (bsky.app/profile/chee...) introduced a bug that prevented users from submitting any forms on the website. I realized I missed an important step—submitting a form to ensure it worked. 🤦

Cheerful Oriole@cheerfuloriole.bsky.social · 2y ago

Content Security Policy (CSP) adds an extra layer of security by telling the browser which third-party domains are trusted—the user’s browser enforces the CSP, blocking unauthorized scripts and preventing malicious injections. This was one of my latest PRs. Here are the details.

After a sizable change to the Content Security Policy (CSP) (bsky.app/profile/chee...), logs in Acquia were monitored for CSP violations. Facebook’s pcm.js script showed up, so I was tasked with investigating whether it was affecting the user experience.

Cheerful Oriole@cheerfuloriole.bsky.social · 2y ago

Content Security Policy (CSP) adds an extra layer of security by telling the browser which third-party domains are trusted—the user’s browser enforces the CSP, blocking unauthorized scripts and preventing malicious injections. This was one of my latest PRs. Here are the details.

The play button on the video component, mentioned at bsky.app/profile/chee..., needed an update to align with the brand. It’s a semi-transparent circle with a triangle inside. The triangle’s sharp edges needed rounding, and the circle needed to shrink slightly. Here’s how I approached the update.

Cheerful Oriole@cheerfuloriole.bsky.social · 2y ago

This PR was completed several weeks ago, but it's still fresh in my mind. It should've been split into multiple PRs—something I only realized a few days in. This PR involved making a video component.

After enabling VWO (bsky.app/profile/chee...), I noticed performance degradation in staging. This seemed like a good opportunity to gather real user metrics in production. I added a story to explore New Relic’s Browser Monitoring, which made it into a recent sprint. Here’s what happened next.

Cheerful Oriole@cheerfuloriole.bsky.social · 2y ago

VWO is a service designed for A/B, split URL, and multivariate testing. My task was to install VWO Drupal module and collaborate with the security team to ensure it adhered to privacy standards and avoided collecting personally identifiable information (PII).

Cloudflare wasn’t caching responses, and the `cf-cache-status` header always showed "DYNAMIC." This meant users were bypassing the CDN and hitting the origin server running Drupal. Here’s how I fixed it: 🧵

PR Update: The video component now works on press release pages. Admins can swap an image for a video, enhancing dynamic storytelling. You can see how I built it here: bsky.app/profile/chee.... Here’s how I integrated it with Drupal and Next.js.

Cheerful Oriole@cheerfuloriole.bsky.social · 2y ago

This PR was completed several weeks ago, but it's still fresh in my mind. It should've been split into multiple PRs—something I only realized a few days in. This PR involved making a video component.

I only have one prediction for 2025: Businesses will lose millions due to the :has() CSS pseudo-class. 1/3

Content Security Policy (CSP) adds an extra layer of security by telling the browser which third-party domains are trusted—the user’s browser enforces the CSP, blocking unauthorized scripts and preventing malicious injections. This was one of my latest PRs. Here are the details.

I suggested adding support for Baseline Widely Available in this issue: github.com/eslint/css/i.... If you have ideas or want to contribute, check out github.com/eslint/css/i.... It’s great to get involved early in a project that will likely become a standard in development.

Nicholas C. Zakas@humanwhocodes.com · 2y ago

We are looking for help from CSS folks to reimagine what a modern CSS linter should flag and suggest. github.com/eslint/css/i... Please share your thoughts and pass along to others. @sarasoueidan.com @nerdy.dev @joshwcomeau.com @kevinpowell.co

After a recent deploy, New Relic's browser monitoring stopped working. Monitoring the Next.js app is important because I’m concerned that growing JavaScript assets may affect users with underpowered devices. I created a user story to investigate and resolve the issue. It made it into this sprint.

Excited that my user story made it into this sprint! It's about adding the accessibility add-on (storybook.js.org/docs/writing...) to Storybook in our Next.js stack.

Docs | Storybook

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.

storybook.js.org

VWO is a service designed for A/B, split URL, and multivariate testing. My task was to install VWO Drupal module and collaborate with the security team to ensure it adhered to privacy standards and avoided collecting personally identifiable information (PII).

This past sprint, while reviewing PRs, I noticed a big #a11y gap on the team—especially with interactive UIs. I have the chance to block off a full day for a team learning session. Now the hard part. I need to watch a ton of conference talks and could use help from the #accessibility community.

The Acquia DAM module syncs DAM with Drupal’s media library, allowing content creators to search and select assets without leaving the site builder. Initially, the alt attribute wasn’t set up properly, causing file names to appear instead of proper descriptions.

My most recent PR involved removing a map-based UI from the website. After user acceptance testing and reviewing analytics, it became clear the page was underperforming, so the decision was made to remove the feature entirely.

In the latest PR, I enabled the Domain Access Entity module, allowing content editors to set site-wide alerts on specific microsites within Drupal. Once configured, I exported the setting changes to YAML files and added them to the PR.

This PR was completed several weeks ago, but it's still fresh in my mind. It should've been split into multiple PRs—something I only realized a few days in. This PR involved making a video component.

The most recent pull request focused on cleaning up dependencies, bringing consistency across setups for all engineers. I deleted the node_modules folder and package-lock.json, but encountered an 'SWC failed to load' issue during reinstallation. Using NPM’s force flag resolved it.