An in-depth full explanation on how browsers manage to push pixels on the screen, and how to improve performance.

Feel free to take a seat!

Before you read

This is the continuation of on browsers’ internals (JavaScript focused), if you haven’t already read it, take 10-minutes and give it a shot (good content inside, I promise).

The critical importance of delivering 60FPs

If you are just doing simple stuff like CSS animations, simple landing pages, using few and lightweight elements, avoiding fancy / esoteric / satanic things, you may not be interested in this article, you can just code and everything should be fine also in mobile devices.

Instead, if your are dealing with more complex apps, with many time-sensitive and complex animations, with thousands of different and/or heavy elements, being…


A look inside browsers to discover how the JavaScript main thread handles our (good?) code

Ready? Let’s dig into it!

This post is not about the NBJF (a.k.a. the Next-Big-JavaScript-Framework), it is instead an overview of how the JS engine is integrated within the browser (these informations are mainly related to Chrome and the V8 engine, however they can easily apply with minor differences to other browsers).

Understanding the main thread is critical to handle (and debug) in the best way concurrent, time related and async tasks (widely used in modern JavaScript frameworks and libraries).

JavaScript, as you may already know, is single threaded, hence you can’t spawn new threads as you like to spread…


A short intro on CSS variables and why they could be useful for you.

The Chicken song rocks, isn’t it? 🐔

As you can see by inspecting a little with the Dev Tools in the new YouTube redesigned page (or just watching the video 👍🏽), it highly relies on CSS variables under the hood.

By just changing one CSS variable from the inspector you can change colors (and whatever is set in a CSS variable) all over the entire web page.

Imagine how much is now easier to create multiple themes, responsive new layouts and keeping consistency across all your codebase.

CSS variables are a powerful tool which allows you to use variables inside…

Francesco

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