Blog
Articles about web development, design, performance, and related topics. Subscribe via RSS to keep up with new articles, or browse by topic.
- Choosing Between srcset and picture
Choose srcset when the image stays the same and picture when the crop, composition, or format needs to change.
- Finding Hidden Content With hidden="until-found"
Let Find in Page and fragment navigation reveal collapsed content with hidden=until-found, while keeping a usable fallback.
- Better Line Breaks With CSS balance and pretty
Use text-wrap balance for short headings and text-wrap pretty selectively for longer copy without hard-coded line breaks.
- Why 100vh Doesn’t Always Fit a Mobile Screen
Choose svh, lvh, dvh, or a flexible min-height when mobile browser controls make 100vh an awkward fit.
- Keeping a Website Usable When JavaScript Fails
Build content, navigation, and forms on working HTML so one failed script removes an enhancement instead of the whole page.
- HTML Features That Can Save You Some JavaScript
Use native disclosures, dialogs, popovers, form attributes, and responsive images before rebuilding their basic behaviour.
- 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.