caseywatts

When looking at a running CI job, it's nice to see some progress occur so you know it's not stuck. Without this formatter, if you look at a running RSpec job, it looks stuck, because it doesn't display any output until it's run every test.

This formatter was created by a coworker, but I wanted to share this out in case it helps other folks!

caseywatts

How can we automate generation of AASM diagrams, so our documentation will always be up to date with our code?

This gist does two main things that the aasm-diagram repo doesn't do on its own as of today (May 2025):

1. Finds all of the uses of aasm in our Rails models itself, so we don't have to list them out
2. Updates a markdown file that embeds each of the AASM diagrams

When should we generate this?

rails-erd uses database migrations as the moment to auto-generate an ERD diagram, which makes a ton of sense!

caseywatts

This is a proof of concept, re-creating USWDS styles in MJML.

Why?

Email clients don't render everything the same way as web browsers -- for example, <button> element is not supported in email clients. There are many workarounds to get buttons to work in many email clients, each with pros and cons.

How?

Tools like MJML help make this easier, by providing an abstraction layer over the complex markup we need to ensure cross-email-client compatibility.

caseywatts

// note: this is using OKLCH, see https://oklch.com/
// https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl

import Color from "colorjs.io";

let marylandRedBase = new Color("oklch(52.44% 0.2043 17)");
let marylandAntiRedBase = new Color("oklch(52.44% 0.2043 197)");
let marylandGoldBase = new Color("oklch(84.63% 0.1611 83.87)");
let marylandAntiGoldBase = new Color("lch(65.14% 57.88 274.65)");
let marylandBlueBase = new Color("oklch(68.06% 0.173 281.52)");

caseywatts

<!-- Before -->
<div class="usa-site-alert usa-site-alert--emergency">
  <div class="usa-alert">
    <div class="usa-alert__body">
      <h4 class="usa-alert__heading">Emergency Status</h4>
      <p class="usa-alert__text"> Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit, sed do eiusmod. </p>
    </div>
  </div>
</div>

caseywatts

1. Install Astro pnpm create astro@latest
2. Install Tailwind pnpm astro add tailwind docs
3. Install a UI Framework (lit, svelte, etc) pnpm astro add lit docs
4. Install the Astro MDX Integration pnpm add @astrojs/mdx and pnpm astro add mdx docs
5. Install the Sitemap addon pnpm astro add sitemap docs
6. Push to new github repository gh repo create --push --public --source=.

caseywatts

// 1. Navigate to the Members View
// Enter slack in the browser. https://{insert your team name here}.slack.com/messages/
// Click on the channel you want.
// Click the information icon.
// Expand the members dropdown.
// Click "See All Members"

// 2. Run JS Code To Start
// Copy-paste this whole thing

caseywatts

I learned how to open a module in a Node REPL thanks to this StackOverflow post

How to use Faker in a Node.js REPL

1. npm install --save-dev "@faker-js/faker
   • = install Faker to your repository
   • (I made an empty project folder because idk how to find -g global ones in node)
2. node --experimental-repl-await
   • = open the Node REPL with the experimental await feature
3. let { faker } = await import('@faker-js/faker')

caseywatts

javascript:(function(){
  const title = document.querySelectorAll("h1.ytd-watch-metadata")[0].innerText;
  const url = window.location.href;
  window.prompt("Here's your markdown link!",`[${title}](${url})`);
})();

caseywatts

javascript: (function () {
  const tootContents = encodeURIComponent(
    document
      .getElementsByClassName("detailed-status")[0]
      .getElementsByClassName("status__content__text")[0].innerText
  );
  const twitterLink = `https://twitter.com/intent/tweet?text=${tootContents}`;
  window.location.href = twitterLink;
})();