Blog
Articles about web development, design, performance, and related topics. Subscribe via RSS to keep up with new articles, or browse by topic.
- 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.
- Dark mode for SVG favicon
Use CSS inside an SVG favicon to give it separate colours for light and dark mode.
- Showing task progress with HTML progress
Use the native progress element for task completion, and style its browser-specific inner parts when needed.
- GitHub RSS Feeds for Releases, Commits, and Tags
Follow GitHub RSS feeds for releases, tags, commits, and public activity. Pick the right timeline, check Atom responses, and keep private feed URLs secure.
- A one-line CSS layout debugger
Outline every element on a page in a different colour with one line in Chrome DevTools.
- Use an emoji as a favicon
Put an emoji in a small inline SVG and use it as a favicon without creating a separate image file.