Blog
Articles about web development, design, performance, and related topics. Subscribe via RSS to keep up with new articles, or browse by topic.
- Why My Personal Website Does Not Use Analytics
I do not need visitor profiles to publish articles, projects, and photographs, so my personal site collects less and loads less.
- The HTML Details That Make Forms More Accessible
Build clearer forms with visible labels, autocomplete, connected help and errors, fieldsets, and visible focus.
- When a Control Needs aria-label
Use aria-label for genuinely unlabelled controls while keeping visible text and native elements as the first choice.
- Making Links Easy to Recognize
Make links recognisable with underlines, clear focus states, useful text, and behaviour that does not surprise the reader.
- When CSS Layout Order Stops Matching the HTML
Keep Grid and Flexbox layouts aligned with the HTML order so keyboard focus and screen reader reading do not jump around the page.
- Keyboard Focus Styles With :focus-visible
Keep a clear keyboard focus indicator while avoiding the same focus ring after every pointer interaction.
- What a 2 MB Page Costs Your Visitors
Two megabytes can still mean slow downloads, expensive JavaScript, wasted mobile data, and a page that depends on ideal conditions.
- Where CSS Performance Problems Come From
Focus CSS performance work on stylesheet weight, layout, painting, DOM size, and unused rules before benchmarking ordinary selectors.
- How Much JavaScript Does a Website Really Need?
Start with the page's job, use the browser's native features, and add JavaScript only where its behaviour justifies the cost.
- Keeping Page Weight Under Control With a Performance Budget
Put simple limits on page weight, JavaScript, images, third-party code, and user-facing performance before small additions accumulate.
- Why Images Need width and height Attributes
Width and height attributes tell the browser an image's aspect ratio early enough to reserve space and prevent layout shifts.
- When to Use fetchpriority on Images
Give a genuinely important image a priority hint without marking every request urgent or combining contradictory loading instructions.
- Customizing Hugo’s RSS Feed
Adjust Hugo RSS titles, descriptions, content, and section filtering while keeping the generated feed valid and easy to discover.
- Organizing Hugo Content With Tags and Categories
Organize Hugo content with a small, deliberate set of tags, categories, or custom taxonomies that lead to useful archive pages.
- 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.