Blog
Articles about web development, design, performance, and related topics. Subscribe via RSS to keep up with new articles, or browse by topic.
- 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.
- CSS @property Gives Variables a Type
Register a CSS custom property with a type, initial value, and inheritance rule so the browser can validate and animate it.
- Modern CSS You Can Actually Use Today
A practical selection of modern CSS features that simplify real websites, with a focused example for each one.
- Image Alt Text: When to Use It and When Not To
Write useful image alt text by deciding what an image contributes, including when the right alt value is empty.
- Why PageSpeed Tests Give Different Results
Why PageSpeed Insights and Lighthouse scores vary between runs, and which measurements are worth following.
- Expandable sections with HTML details and summary
Build simple accordions and disclosure sections with the native HTML details and summary elements.