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

Illustration by unDraw

Configure env variables with Babel

  1. Install the plugin with npm install babel-plugin-inline-dotenv
  2. Include the plugin and the path to the .env file in your Babel config file:


Creating PWAs that feel native app-like by adding an image placeholder in case the original image is not found

Drawing of phone screen layout
Drawing of phone screen layout
Illustration by unDraw.


Run small snippets of JavaScript code quickly within Chrome DevTools

Photo by Luca Bravo on Unsplash

Opening Snippets in Chrome DevTools


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

Image source: blog.logrocket.com


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

Illustration by unDraw

Faster searching in websites with custom Chrome Search engines

Photo by Marten Newhall on Unsplash

A step-by-step guide on how to query your Cache and list offline pages using service workers and the Cache API

Illustration by unDraw


Using Workbox to improve your PWA

Illustration by unDraw


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

Illustration by unDraw


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

Illustration by unDraw

Charis Theodoulou

Web Performance & PWA 👨‍💻 | footy ⚽ | cars & racing 🏎️ | charistheo.io 🌐

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store