ALT Three vertically stacked Vim windows showing Markdown mission statements for different client engagements. Each document begins with a heading and concise project summary. Client names have been replaced with placeholders and identifying path information is redacted.

ALT Harry Roberts presenting a web performance talk at LeedsJS, speaking beside a slide reading ‘build for the web, build on the web, build with the web’ during a talk on platform-first web development and modern front-end architecture.

ALT A boxed Apple USB C plug and charging cable about to be purchased from an Apple Store.

ALT A moody, atmospheric black and white photo of the CN Tower looming above me in a cloudy and overcast Toronto.

ALT A pan full of shakshuka taken from the point of view of a diner. It’s centred on the table with places made up ready to eat.

ALT Aerial photo of a colourful bowl of pasta: caponata-style sauce clings to casarecce pasta, topped with feta, parsley, and pickled hot peppers.

ALT Black and white photo of me speaking on stage. The slide behind me reads ‘how to think like a performance engineer’.

ALT DevTools screenshot showing a `cache-control: public, max-age=14400` response header with the word `public` highlighted.

ALT A screenshot showing how explainshell.com can take a CLI input (e.g. ls -lhFG) and explain its component parts.

ALT A very rich SpeedCurve dashboard showing a comparison of performance characteristics between HTTP/2 and HTTP/3 visits to my site.

ALT V60 coffee dripper decanting branded coffee beans into a SpeedCurve mug.

ALT Hyper-aggressive cache-control headers (public, max-age=31536001, immutable) attached to non-versioned HTML responses.

ALT A view from within an airport terminal building looking out onto a wet taxi/docking area. Several Ryanair planes are taxiing.

ALT ⇱

ALT img[alt]:not([alt=""])::after { /* Only apply to images with non-empty alt text. */ content: " ["attr(src)"]" / ""; /* Provide emtpy alt text for `content`: prevents AT’s reading it. */ font-family: monospace; font-style: italic; }

ALT Chrome: Screenshot of a JS Bin demo. The HTML defines an image with alt="This image deliberately 404s" and a missing src. CSS uses img[alt]::after with content: " [attr(src)]". On the right, the rendered output shows “This image deliberately 404s [deliberate-404.jpg]” in italic monospace.

ALT Firefox: Screenshot of a JS Bin demo. The HTML defines an image with alt="This image deliberately 404s" and a missing src. CSS uses img[alt]::after with content: " [attr(src)]". On the right, the rendered output shows “This image deliberately 404s [deliberate-404.jpg]” in italic monospace.

ALT A screenshot showing that the before and after MD5 checksums of csswizardry.min.css are identical.

ALT Terminal screenshot of a git show for a commit titled “Fix stupid typo”. The same HTML change is displayed three ways: a normal unified diff, a word diff, and a regex-based word diff. Each shows corrections to meta tag image paths in demo/index.html, replacing /assets/og-image.png with /Obs.js/demo/assets/og-image.png.

ALT Screenshot of browser DevTools showing how adding `display: block` and some other cosmetic properties can not only make active `<script>`s visible, but actually become part of the documentation themselves.

ALT An email from Slack: “Jump back into the conversation “See what your team’s been up to while you’ve been gone. “🔥 1,400,820 messages sent”

ALT Chrome DevTools experiment to allow saving trace files in Gzipped format.