Harry's blog page

A short guide about how to implement a Skip Navigation link, also known as "skip to main" link.

How to easily copy text and images to the clipboard using the asynchronous Clipboard API.

Minimising Layout / reflow and Layout thrashing events in the browser for smoother experiences on the web.

Lazy loading React components in both server and browser environments can prove challenging depending on the framework you are using.

Replace GIF image formats and use video instead to render animations on the web while using Sanity + Gatsby

Rendering an image placeholder in case the original image was not found in Progressive Web Apps.

How to configure environment variables inside of babel.config.js.

Prevent layout shifts due to images by preserving their aspect ratio in Sanity + Gatsby.

Prevent layout shifts due to images by preserving their aspect ratio with the padding hack.

Increase frames per second while users scroll a website with a tiny CSS trick.

A step-by-step guide on how to store and list offline available pages using Service Workers and the Cache API on the web.

Images are one of the biggest performance bottlenecks — but only if you let them be.

Leveraging service workers and the powerful Cache API for creating fast and app-like experiences on the web.

Looking at how to use the Workbox library and its Strategies to improve any Progressive Web App.

Optimise media on the web by serving users with next generation formats like WebP, WebM and AVIF.

Restarting a CSS animation with the use of the layout (aka reflow) browser process.