Lazy loading React components in both server and browser environments for various frameworks — React apps, like any other type of web app (Angular, Vue, etc) can become very big and bloated with unused code at any given time while it is being downloaded and executed in a browser.

Easily copy contents to the clipboard using the asynchronous Clipboard API — In this article, we will look at a simple way of copying text in the clipboard and the not-so-consistent way of copying images to a user’s clipboard, by using the relatively new Async Clipboard API. Note: document.execCommand was widely used in the past for copying text to a user's clipboard…

Render animations in your web apps — The GIF (.gif) image file format is a very old type (latest release in 1989) of animated image format that has exploded in use after a massive increase in the use of memes, online chats, and forums. Although you can create a GIF image by blending together consecutive frames of…

How to configure environment variables inside of babel.config.js. — In this short guide, we will look at a simple way of configuring our environment variables and load them for use inside of our front-end code, while using Babel. Lastly, we will look at a quick way to access those variables inside of the babel.config.js file itself. Configure env variables with Babel For this purpose…

Creating PWAs that feel native app-like by adding an image placeholder in case the original image is not found — Building a PWA can sometimes get a bit complex if you also want to add offline capabilities. While it takes time to build a good offline experience, you may spot more ways that you can enhance this offline experience for your users. …

Run small snippets of JavaScript code quickly within Chrome DevTools — Chrome DevTools is a remarkable tool with no doubt that offers a collection of features and tools within its interface that I have strong reason to believe that most of them are not very well known. But they are absolute gems! One such amazing feature is the Snippets section within…

Prevent layout shifts due to images by preserving their aspect ratio in Sanity and Gatsby. — This article covers the approach I am using for this blog to prevent layout shifts from images as they load. My website is built with Gatsby.js, as a web framework and Sanity.io, as a headless CMS. Note: For a general approach using simple CSS and HTML, follow this article on…

Prevent layout shifts due to images by preserving their aspect ratio with the padding hack. — This is a minimal, quick, no-fuss guide on how to preserve space for images with an aspect ratio and reduce layout shifts. Essentially reducing Cumulative Layout Shift and preventing this type of bad user experience:

Faster searching in websites with custom Chrome Search engines — Ever tired of having to visit a page over and over, wait until it loads and then use their search bar over and over again? You know the page, you visited a million times already and you already know where the search bar is. One such example for me and…