Articles
Ordered by date, most recent first.
You can subscribe to a feed of my articles.
-
-
The command line (mostly Git) abbreviations I rely on
The abbreviations that have saved me countless terminal keystrokes, and the commands to add them to your zsh or fish setup
-
From Stimulus to web components
Stimulus experience translates to native custom elements. What does it take to make a custom element with Stimulus features?
-
-
-
-
Convert Tailwind 3 default screens from px to rem
Improve the desktop experience for users who prefer larger text
-
-
Styling VitePress with Tailwind
Configure Tailwind as a PostCSS plugin to use it in VitePress Markdown, JS/TS, and Vue files
-
SSG Astro with Headless Craft CMS Content Fetched At Build Time Or Cached In Advance
Astro on the front, Craft on the back. Craft can be local only, and the build environment doesn't have to connect to the CMS.
-
SSG Astro with Headless Craft CMS Content Fetched At Build Time
Astro on the front, Craft on the back. And Craft can be local-only!
-
-
SSR Astro With Headless Craft CMS
Craft’s great data modelling and admin experience, with a server-rendered Astro front end.
-
-
-
Highlight Code Block Lines In Eleventy with Shiki Twoslash
Eleventy Markdown code block line highlighting made simple
-
Accessible CSS-Only Light/Dark Toggles (with JS persistence as progressive enhancement)
CSS’s
:has()can obviate JS -
Numbered Code Block Lines in Eleventy with Shiki Twoslash
Bringing in a third-party library for easy, reliable line numbering
-
-
Writing zsh tab completions can be straightforward
How I add tab completion for the zsh command line
-
Add high-performance search to static sites with PageFind
The concise guide to using Pagefind for your static site’s search functionality.
-
Hometown: A Dynamic, Highly Configurable Git-Focused Zsh Theme
A fast zsh prompt that packs in a lot of Git status info
-
Git Prompt Kit: Configurable, Fast Git Status Components For Custom Zsh Themes
A collection of components for displaying Git information in your prompt
-
Watch for specific added nodes with MutationObserver
MutationObserver makes it easy to watch for the addition of specific nodes, if you know where to drill.
-
-
-
Algolia search in VuePress without joining DocSearch
VuePress supports Algolia-based search, but expects you to use the DocSearch service. This guide shows how to use VuePress’s DocSearch UI with standard Algolia.
-
The New Git Option For Rebasing Multiple Branches At Once
What used to take several commands can now be done with one. What used to be several problems is now one.
-
Using GitHub Pages to Build, Deploy, and Host Next.js
A guide to shoehorning Next.js projects into the GitHub Pages ecosystem, with GitHub Actions for building and deploying on push and Imgix for image hosting
-
Adding Safari 14 Support To Tailwind's Aspect Ratio
Tailwind CSS's aspect ratio plugin relies on the
aspect-ratioCSS property, which Safari 13 and 14 don't support. Use this plugin to add support! -
Fundamental ERB for Front-End Development
Your comprehensive guide for ERB front-end view templates.
-
Fundamental Twig for Front-End Development
Your comprehensive guide for Twig front-end view templates.
-
Automating build/deploy CI/CD with GitHub Actions
Use GitHub Actions to build every branch and to deploy the trunk when it builds successfully. I give an example of a Node site deployed via FTP, with workflows that can be adapted to your needs.
-
Comparing Heroku, Netlify, Vercel, and GitHub Pages for Node.js Projects
Running popular web-based CD tools against each other
-
CLI Equivalents for Common MAMP PRO and Sequel Pro Tasks
Start and stop servers and create new hosts with MAMP Pro's CLI commands; create, delete, export, and import SQL databases with mysql
-
Committed to the wrong branch? -, @{upstream}, and @{-1} to the rescue
Git has special named revisions that make referring to recently checked out branches and their remote branches easy.
-
Try Out Fish For Your Command Line Shell
Not into heavily configuring your terminal? Right out of the box, the fish shell will transform your CLI experience.
-
Configure Zsh Options & Plugins for Productivity in macOS's Default Shell
Zsh is highly configurable, but that configuration can be tricky. Get up and running with some essential options and plugins, and an informative prompt theme.
-
How to use local Node packages as project dependencies
Test packages that have not been published to a registry, without getting caught in the pitfalls of npm and yarn's built-in solutions.
-
ERB and Twig Cross-Reference for Front-End Development
Your comprehensive cross-reference guide for Twig and ERB front-end view templates.
-
Set Up Simulator and Test iOS Mobile Safari on Mac
Full interactive iOS Mobile Safari browser testing is possible right on your Mac, no additional services necessary. We'll set up Apple's Simulator and configure it for testing Safari on a wide range of iOS versions and devices.
-
Set Up a Windows 10 Virtual Machine and Run Internet Explorer 11 and Edge on Mac or Linux
Run a full Windows 10 computer on your Mac (or Linux!) computer, legally and for free. Test websites on IE11 and Edge with full access to browser developer tools, at full speed & with confidence that you're seeing exactly what your Windows users see.
-
-
Set Up AWS CLI and Download Your S3 Files From the Command Line
Have an AWS task that's awkward when done in the web interface? AWS CLI sets up easily and has a full command suite
-
