Blog
Articles about web development, design, performance, and related topics. Subscribe via RSS to keep up with new articles, or browse by topic.
- The Modern CSS Color Functions I Find Useful
Practical uses for oklch(), color-mix(), relative colors, and light-dark() in modern CSS.
- CSS Scroll-Driven Animations Without JavaScript
Link CSS animations to scrolling for progress bars and reveal effects without maintaining scroll event listeners.
- Building a modal with HTML dialog
Build modal windows from the native HTML dialog element, including backdrops, forms, Escape handling, and practical examples.
- HTML Popover API: Popovers Without JavaScript
Create menus, help boxes, and other lightweight overlays with the native HTML Popover API and very little code.
- Why Every Website Should Have an RSS Feed
RSS remains a simple way to follow websites without algorithms, accounts, notifications, or dependence on a social platform.
- Native HTML and CSS Features That Replaced JavaScript
Replace common JavaScript components with native HTML and CSS, from disclosures and dialogs to container queries and scroll effects.
- Why I Still Build Static Websites in 2026
Why I still choose Hugo and static sites for blogs, documentation, portfolios, and other content-first websites in 2026.
- How to Hide Content Accessibly
Choose between display none, visibility hidden, opacity, aria-hidden, hidden, and visually hidden text based on behaviour.
- The Back/Forward Cache Makes Return Visits Feel Instant
See how the browser back/forward cache restores pages when visitors navigate back or forward, and what can prevent it.
- How Third-Party Scripts Slow Down Websites
See how analytics, ads, chat widgets, embeds, and other third-party scripts affect loading, privacy, and reliability.
- Why You Shouldn't Lazy-Load Every Image
Lazy loading helps below the fold, but adding loading=lazy to every image can delay important content and hurt Largest Contentful Paint.
- When to Use preload, prefetch, and preconnect
Choose between preload, prefetch, and preconnect without turning resource hints into extra work for the browser.
- Change Hugo's Markdown Output With Render Hooks
Use Hugo render hooks to control the HTML generated for Markdown links, images, headings, and code blocks.
- Responsive Images in Hugo Without a Plugin
Use Hugo image processing to generate responsive image sizes and srcset at build time, without a plugin.
- What HTML forms can do without JavaScript
Native HTML forms already provide input types, validation, autocomplete, mobile keyboard hints, and other useful behaviour.
- Show Better Mobile Keyboards With HTML inputmode
Use HTML inputmode to request a more useful mobile keyboard for numbers, phone numbers, email, URLs, and search.
- Making a page section inactive with HTML inert
Use the HTML inert attribute to temporarily remove a page section from focus and interaction.
- CSS interpolate-size: Animate From 0 to auto
Animate between fixed and intrinsic sizes such as auto with CSS interpolate-size, while keeping a safe fallback.
- CSS Cascade Layers: What @layer Is Actually For
Use CSS cascade layers to decide which groups of styles win before specificity turns the stylesheet into an argument.
- Keep Component Styles Contained With CSS @scope
Use CSS @scope to contain component styles without tying every selector to a long chain of parent classes.