Blog
Articles about web development, design, performance, and related topics. Subscribe via RSS to keep up with new articles, or browse by topic.
- 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.
- Social sharing buttons without JavaScript
Add lightweight sharing links for social networks and email without loading third-party JavaScript.
- Installing MySQL on macOS
Install MySQL Server from the official macOS disk image and start it from System Preferences.
- Adding page metadata and Open Graph tags in Kirby
Generate canonical, description, Open Graph, and itemprop metadata from a Kirby page template.
- How to take screenshots with Chrome DevTools
Capture a full page, a selected area, or one DOM element without installing another browser extension.
- Adding JSON-LD to a Hugo site
Generate WebSite and BlogPosting structured data from Hugo templates and site configuration.
- Illustration libraries for websites and apps
A practical list of customisable, free, and commercial illustration libraries for websites and apps.
- Creating a Hugo theme from scratch
Generate a Hugo theme skeleton, understand its main folders, and add the first piece of content.
- Adding Google Tag Manager to a Hugo site
Configure a Google Tag Manager container in Hugo, add both snippets, and keep it disabled on localhost.
- Comma-separated tags in Hugo
Render a Hugo page's tags as links separated by commas, without leaving a trailing comma.
- Client-side search for a Hugo site
Build search for a Hugo site with a JSON index, Fuse.js, Mark.js, and a small search template.
- The hidden fonts included with macOS Catalina
macOS Catalina includes optional fonts from Commercial Type and Klim Type Foundry, but you need to download them in Font Book.
- Mixing percentages and pixels with CSS calc()
Use CSS calc() to combine percentages and fixed lengths in practical, responsive layouts.
- The web open font format (WOFF)
A practical overview of WOFF, the compressed font container designed for use on the web.
- Dark mode images without JavaScript
Serve separate light and dark images with the picture element and prefers-color-scheme.
- Styling list markers with CSS list-style
Understand the list-style shorthand and its type, position, and image values with a small CSS example.
- Working around the 100vh problem in Mobile Safari
Why 100vh can extend behind Safari's browser controls, plus several practical workarounds available in 2020.