Handy localStorage helpers for Chrome extensions
Learn how to add custom fonts to Tailwind CSS v4 (and v3). In Tailwind 4, you use the @theme directive and "--font" variables to load custom fonts after initializing Tailwind.
Harrison Broadbent — Blog
A collection of tech, software & programming articles about things I've learned building internet projects.
Latest posts
New Tailwind v4.2 colors now in Tailcolors
With Tailwind v4.2 introducing 4 new color palettes, I've gone ahead and updated Tailcolors, my tailwind color palette tool, to support them.
Custom fonts in Tailwind v4 (and v3)
Learn how to add custom fonts to Tailwind CSS v4 (and v3). In Tailwind 4, you use the @theme directive and "--font" variables to load custom fonts after initializing Tailwind.
7 SaaS fonts worth trying
I got sick of digging around Google Fonts, so I compiled this list of my favorite SaaS fonts. It includes 7 all-time classics, plus two bonus fonts. There's a font for every SaaS in this article.
A tooltip with plain HTML & Tailwind CSS
Learn how to build tooltips with nothing but plain HTML & Tailwind CSS. They work great and avoid an extra Javascript dependency. Plus, learn how the new CSS anchor API will make these tooltips even better once it's more widespread.
An interactive Tailwind CSS star rating component
Learn how to create a star rating input using plain HTML and Tailwind CSS. This Tailwind star rating input is flexible and very portable.
Blogging with Ruby, Middleman & Tailwind CSS
Sharing my Ruby, Middleman and Tailwind CSS blog template. It's an easy way to spin up a static site using the Middleman blogging engine for Ruby.
Add an RSS feed to your Middleman blog
Learn how to quickly add an RSS feed to any website built in the Middleman Ruby gem. Plus, copy the RSS feed builder code directly into your own app.
Cool native HTML elements you should already be using
Learn how to use native HTML to implement features like modals & accordions, image captions, grouped lists and more.
Using Tailwind CSS in a Chrome Extension (the easy way)
Learn how to use Tailwind CSS in your Chrome Extension for easy styling. It takes less than 5 minutes to install Tailwind in your Chrome Extension by following these steps.
Recolor images with Tailwind CSS mix-blend-mode
Lear how to use the Tailwind CSS mix-blend-mode filters to re-color an image dynamically. By combining mix-blend-hard-light with grayscale, we can accomplish some pretty cool effects.
Simple Toast Notifications using Vanilla Javascript
Learn how to build a simple toast notification system using nothing but vanilla Javascript and CSS. No framework is required to add these simple toast messages to your app or website!
Redirect www. URLs to non-www within Cloudflare
Learn how to redirect a www. URL to the non-www URL within Cloudflare, using a custom Redirect Rule. Cloudflare has only recently supported using Redirect Rules to map a www. request to your root domain; This article walks you through setting one up.
Goodbye Netlify, Hello Cloudflare.
Learn why I switched from Netlify to Cloudflare for my hosting, after years of happy usage.
Anatomy of a Hacker News traffic spike
A breakdown of a HN traffic spike which drove 15k+ visitors to my blog post. I show you the exact anatomy of a Hacker News traffic spike, including how long it lasted and some long-tail effects.