Charis Theodoulou

By using a DOM reflow/layout event

Complex CSS animations can be a pain in the neck as there is no real way of debugging them and, if you have ever mixed them with some JavaScript special sauce, you have surely been in my place.

Yes, that frustrating place where no developer wants to go. To have…

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…

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…

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, as a headless CMS.

Note: For a general approach using simple CSS and HTML, follow this article on…

Charis Theodoulou

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

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