Blog
Articles about web development, design, performance, and related topics. Subscribe via RSS to keep up with new articles, or browse by topic.
- One Font File, Many Weights: Variable Fonts
Use one variable font file to cover a range of weights, widths, slants, and other typeface variations.
- Add Anchor Links to Hugo Headings
Wrap rendered Hugo headings in links so readers can copy a URL to a particular section.
- Let Safari Draw the Apple Pay Button
Let Safari draw the correct Apple Pay button with CSS, including button types, styles, and an older-browser fallback.
- Add Cloudflare Pages Custom Headers With _headers
Add Cloudflare Pages custom headers with a _headers file, check responses, and handle preview domains, overlapping rules, and Functions separately.
- What's different about OpenType and TrueType fonts?
The practical difference between OpenType and TrueType fonts, including outlines, typographic features, and compatibility.
- Text-Only Websites for a Lighter Web
A collection of text-only, low-bandwidth, and deliberately lightweight websites.
- Preload, Preconnect, or Prefetch?
Choose between preload, preconnect, and prefetch based on when the browser will need a resource.
- Invert Colours With One CSS Filter
Use CSS filter invert() on an element or page, and understand why partial inversion is not simply a lighter version.
- Getting a content file's name and path in Hugo
A concise reference to the path, name, language, directory, and identifier fields on Hugo's page file variable.
- AVIF Images: Smaller Files With a Sensible Fallback
AVIF can produce small image files while supporting transparency, animation, HDR, and modern colour formats.
- Move Google Photos to iCloud Photos With Takeout
Export a Google Photos library with Google Takeout, then upload the downloaded files to iCloud Photos.
- Make an Iframe Responsive With CSS
Keep videos, maps, and other iframes responsive with an aspect-ratio wrapper and a small amount of CSS.
- Add a "Skip to Main Content" Link
Let keyboard and screen-reader users bypass repeated navigation with a small HTML and CSS pattern.
- Google Search Operators Worth Remembering
A practical reference for narrowing Google results by phrase, site, title, URL, file type, price, and more.
- How Netlify Sites Opted Out of FLoC
The Netlify header that opted a site out of Google's FLoC trial, and why this is now historical.
- Nesting Media Queries in CSS
Combine multiple conditions by nesting CSS media queries at the root of a stylesheet.
- Practical image loading improvements for the web
Reduce image cost with lazy loading, async decoding, dimensions, responsive sources, WebP, and image CDNs.
- Scheduling Netlify builds with GitHub Actions
Trigger a Netlify build hook on a cron schedule with a small GitHub Actions workflow.
- Programming quotes worth keeping around
A small collection of sharp, funny, and occasionally uncomfortable quotes about programming.
- A simple tag cloud for Hugo
Build a small Hugo tag cloud, filter out rare tags, and exclude terms you do not want to show.