When using service workers on a website, if you’re already familiar with the APIs and the way everything works inside the service worker’s thread, you can definitely write all of the code by yourself in Vanilla JavaScript.

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 is a set of JavaScript libraries aiming to simplify implementation of advance caching using service workers and progressive web app development in general.

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…

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.

The average mobile website is 2.2 MB big, of which 68% are images.

Quoting Mustafa Kurtuldu from his ebook:

“As we have just tested, a very high percentage, around 70% of a site is composed of images.”

In a slow 3G network, big resource size would be…

This optimization technique is rather simple to understand and to implement. So, in this article, I will be taking you for a walk down the park and show you another way you could improve your website’s performance and you have hopefully never heard of it.

The following technique is useful because it minimizes DOM reflow/layout and paint events, thus increasing the frame rate.

Disabling the Hover Effect While User Is Scrolling

The goal here is to minimize browser reflow and repaint events to increase the frame rate. This is done by removing the hover effect from all the elements in the DOM while the user is scrolling.

Let…

In this article, I will be listing a few ways by which a DOM reflow / layout shift event might occur, why it’s bad, how to track these events and how to minimise its occurrences mitigating its effects.

For the rest of this article, I will assume you are comfortable with front-end development components such as CSS, the Browser DOM, and accessing HTML elements using JavaScript.

Now let’s dive in.

What is DOM Reflow / Layout Shift?

First things first. There are two names for the process I’m about to explain:

• DOM reflow in Firefox
• Layout or layout shift in Chrome/Safari/Opera/IE

Both of them refer to the…

While writing code you will soon notice that you write the same code over and over again, either some short one-line piece of code or a longer 5 lines of code that always looks the same. In this article I will be showing you how to save time while coding while you won’t have to remember everything that you type all too often. Get ready to unleash the power of snippets. Get ready to learn some Developer wizardry 🧙‍♂️.

Emmet 🙂

VS Code has built-in support for Emmet and does not require any external extension. …

Personally, before I start investing time and money into something whether that is a book, a programming language/framework, taking on a new job opportunity, I always take some time researching about the advantages and the opportunities this new thing could bring me in the long-run, how it could help me for what I want to become and how it will reward me one day.

In other words, I like to invest some time and effort before investing more time and effort on learning a new skill.

The reason why I think this mindset is so important nowadays is because we…

While there are a number of techniques out there for optimising images for the web, in this article I will be showing you how to optimise for speed by cutting down the size of image files. Specifically, I will be guiding you through converting your png/jpeg/gif files to a couple of new file extensions that were built for the web. Then we will be adding a fallback to our converted files as the support of these extensions does not cover all browsers yet.

This article is divided into two sections and for each of them we will be going…