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

Image for post
Image for post
Illustration by unDraw

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…

Using Workbox to improve your PWA

Image for post
Image for post
Illustration by unDraw

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…

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

Image for post
Image for post
Illustration by unDraw

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…

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

Image for post
Image for post
Illustration by unDraw

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…

Lower browser repaints while the user is scrolling

Image for post
Image for post
Photo by YorKun Cheng on Unsplash

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.


Image for post
Image for post
Photo by Hal Gatewood on Unsplash

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…

Become a Developer Wizard 🧙‍♂️ in no time with the use of snippets

Image for post
Image for post
Photo by Joshua Aragon on Unsplash

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. …

Image for post
Image for post
Photo by Lukas Blazek on Unsplash

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…

Image for post
Image for post
Illustration by unDraw

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…

Image for post
Image for post
Photo by Luca Bravo on Unsplash

By studying trends, surveys, discussions within the community and attending meetups/conferences, one can have an insight in understanding what are the current tools and technologies used by developers around the world. While I spent time doing all that, it doesn’t make me an expert however I would like to share with you some of my most loved resources and tools that I have gathered during the years of my self-learning journey as a Web Developer.

This article assumes that you have an idea about how the internet works: servers, databases, http requests, user (browser), what’s front-end and what’s back-end.

🧱⛏️ Resourcefulness


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