Blog
Articles about web development, design, performance, and related topics. Subscribe via RSS to keep up with new articles, or browse by topic.
- Count the pages in a Hugo section
Use Hugo's where function to count the regular pages in a specific content section.
- Write code that is easier to maintain
Practical habits that make code easier to read, change, test, and maintain over time.
- CSS :has() Can Select a Parent
CSS :has() selects an element based on its children or nearby siblings, with examples and historical browser-support context.
- 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.
- Font sizes that scale with the screen using CSS clamp()
Use CSS clamp() to make type scale with the viewport without becoming tiny on phones or enormous on wide screens.
- Add Custom Headers to Cloudflare Pages
Add response headers to Cloudflare Pages with a _headers file, including security rules and noindex for preview deployments.
- 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.