Intro
Thoughts on web development, design, and making things for the web. Sometimes tutorials, sometimes experiments, and occasionally something else.
Blog
- 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.
Projects
- Media Cheat Sheet
Social media image sizes, video and advertising specifications, and downloadable templates in one place.
- ShutterCount
Check your camera’s shutter count from an original JPEG or RAW file with a free browser tool.
- The Colophon
A curated collection of creative website designs, with details about their layouts, technologies, and fonts.
- Shelf
A Chrome extension for saving visual ideas, screenshots, and web references in a private, local library.