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.
For this purpose, we can use babel-plugin-inline-dotenv to load the corresponding env file based on what environment we are in, i.e. production vs development:
npm install babel-plugin-inline-dotenv
.envfile in your Babel config file:
After this, you should be able…
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. One of these ways is to make sure that every image has a placeholder image as a fallback in case of a bug, cache invalidation, or bad network conditions.
This is what we would like to avoid:
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 the
Firstly, to locate the
Snippets section within Chrome DevTools, you will have to navigate to the
Note: For a general approach using simple CSS and HTML, follow this article on preventing image layout shifts with the padding hack.
It all starts with the
gatsby-source-sanity plugin. The plugin helps you import all your data from your Sanity database and view it within your Gatsby site, as it changes in real-time.
Warning: The setup I have listed below, is using
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:
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 I guess for you too, is the caniuse.com website.
This is a feature that I rarely come across when browsing the web and surely you do too. This might be for a number of reasons including app structure, lack of resources/time, and developers being unaware that this can be accomplished on the web.
Implementing such a feature requires a service worker and effective use of the Cache API. Due to these requirements, there is a lot of friction for developers to develop such an offline experience.
Luckily, and strangely enough, it is not as difficult and time-consuming as I originally thought.
In this article, I will be showing you…
However, although Vanilla JS will give you more clarity, it’s still recommended that you use Workbox instead, to avoid mistakes and add simplicity.
Workbox can simplify your service worker file, making it more readable and easy to update by…
In this article, I will be including various ways in which you can leverage the powerful Cache API on the web.
The Cache API allows developers to control cache memory with no sweat. This memory is not to be confused with the browser cache/memory cache nor the HTTP cache.
The Cache API allows HTTP Request caching which can be useful on almost any website out there.
Combined with the unique power that service workers unlock, it is possible to offer offline functionality on any website. Whether that is a static website or even a server-side-rendered app.
Let us then get…
THIS ARTICLE IS OUTDATED — for an updated version follow this article at https://www.charistheo.io/blog/2021/03/optimised-images-for-the-web-responsive-and-adaptable/.
In this short piece, I’ll take you through some common image-optimisation techniques you can implement right now. Hopefully, you’ll get huge performance improvements and create a smooth web experience.
But first, let’s get on with some data about why it’s important to optimise your images on the web — and especially for mobile.
Quoting Mustafa Kurtuldu from his ebook:
“As we have just tested, a very high percentage, around 70% of a site…