Blog
Articles about web development, design, performance, and related topics. Subscribe via RSS to keep up with new articles, or browse by topic.
- Technical SEO for beginners
A practical first pass through crawling, indexing, site structure, performance, mobile use, and structured data.
- Hugo shortcode for raw HTML
Render selected blocks of raw HTML in Hugo content with a small custom shortcode.
- Show related content in Hugo
Use Hugo's built-in related content feature to show a short list of relevant pages after a post.
- Set up Tailwind CSS in Hugo
Set up Tailwind CSS in a Hugo project with the Tailwind CLI or a PostCSS build step.
- What makes a good laptop for web development?
Choose a web development laptop by workload, memory, screen, keyboard, ports, and operating system—not a model name.
- Practical ways to improve search visibility
Improve search visibility by matching intent, publishing useful content, and keeping the site easy to crawl and use.
- 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.