Blog
Articles about web development, design, performance, and related topics. Subscribe via RSS to keep up with new articles, or browse by topic.
- A More Useful 404 Page in Hugo
Turn Hugo's 404 page into a useful route back to the homepage, search, or content visitors may have wanted.
- Build Breadcrumb Navigation From Hugo's Page Hierarchy
Generate accessible breadcrumb navigation from Hugo page ancestors instead of maintaining trails by hand.
- Add an Automatic Table of Contents in Hugo
Use Hugo's built-in table of contents for long Markdown articles, with sensible heading levels and a compact mobile layout.
- Cache Repeated Hugo Template Work With partialCached
Use Hugo partialCached for expensive repeated template work without accidentally reusing page-specific output.
- Add Attributes to Markdown Links With Hugo Render Hooks
Keep Markdown links simple while Hugo adds classes, rel attributes, titles, and external-link styling in one template.
- Responsive Images With Hugo’s Image Processing
Resize, crop, convert, and cache page-bundle images during a Hugo build, then publish responsive dimensions and srcset markup.
- What You Get With a Real HTML Button
A native HTML button includes keyboard, focus, form, disabled, and accessibility behaviour that a clickable div must rebuild.
- When to Use a Link or a Button
Choose links for navigation and buttons for actions, then style either element to match the interface.
- The Difference Between HTML meter and progress
Use the HTML meter element for a value within a known range and progress for work moving towards completion.
- Showing Calculation Results With HTML output
Use the HTML output element for totals, slider values, estimates, and other results produced by form controls.
- Input Suggestions With HTML datalist
Add native suggestions to an HTML input with datalist while still allowing values outside the provided list.
- HTML autocomplete Values Worth Using
Give browsers useful autocomplete tokens for identity, contact, address, password, and one-time-code fields.
- What the HTML search Element Is For
Use the HTML search element to identify search and filtering controls without changing how the form submits or looks.
- When CSS @supports Is Useful
Add modern CSS with @supports feature queries when unsupported browsers need a genuinely different layout or behaviour.
- Show Form Errors After Interaction With :user-invalid
Use :user-invalid and :user-valid to style native HTML validation states without marking untouched fields as errors.
- Smoother Page Changes With View Transitions
Use the View Transition API for same-page state changes and progressive cross-document animation on a normal multi-page site.
- Styling Scrollbars With Modern CSS
Style scrollbar width and colours with standard CSS, while keeping the control visible, usable, and familiar.
- When to use CSS clip-path or mask
Choose between CSS clip-path and mask by deciding whether the element needs a hard boundary or levels of transparency.
- Fading images with CSS masks
Use CSS masks for image fades, scroll hints, cutouts, and recolourable icons without changing the source asset.
- Responsive shapes with CSS shape()
Use the CSS shape() function for scalable clipping paths with lines and curves, while keeping a simple fallback.