Harry's blog page
Blog
How to create an Accessible 'Skip to Main' link
A short guide about how to implement a Skip Navigation link, also known as "skip to main" link.
Copy text and images to clipboard
How to easily copy text and images to the clipboard using the asynchronous Clipboard API.
Minimising Layout and Layout thrashing for 60 FPS
Minimising Layout / reflow and Layout thrashing events in the browser for smoother experiences on the web.
Lazy loading React components
Lazy loading React components in both server and browser environments can prove challenging depending on the framework you are using.
Replace GIF with Video in Sanity + Gatsby
Replace GIF image formats and use video instead to render animations on the web while using Sanity + Gatsby
Placeholder image fallbacks for PWAs
Rendering an image placeholder in case the original image was not found in Progressive Web Apps.
Environment variables and Babel
How to configure environment variables inside of
babel.config.js
.Prevent image layout shifts in Sanity + Gatsby
Prevent layout shifts due to images by preserving their aspect ratio in Sanity + Gatsby.
Prevent image layout shifts with padding hack
Prevent layout shifts due to images by preserving their aspect ratio with the
padding
hack.Fluid website scrolling with a tiny trick
Increase frames per second while users scroll a website with a tiny CSS trick.
Offline pages in Progressive Web Apps
A step-by-step guide on how to store and list offline available pages using Service Workers and the Cache API on the web.
Optimised images for the web, responsive and adaptive
Images are one of the biggest performance bottlenecks — but only if you let them be.
Cache handling with Service Workers and the Cache API
Leveraging service workers and the powerful Cache API for creating fast and app-like experiences on the web.
Workbox Strategies with examples and use-cases
Looking at how to use the Workbox library and its Strategies to improve any Progressive Web App.
Optimise media on the web with next generation formats
Optimise media on the web by serving users with next generation formats like WebP, WebM and AVIF.
Restart a CSS Animation With JavaScript
Restarting a CSS animation with the use of the
layout
(akareflow
) browser process.