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…
However, although Vanilla JS will give you more clarity, it’s still recommended that you use Workbox instead, to avoid mistakes and add simplicity.
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.
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.
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.
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.
Now let’s dive in.
First things first. There are two names for the process I’m about to explain:
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 🧙♂️.
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…
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.