Web Caching: How to avoid common pitfalls.
Page load time has become a crucial indicator of user experience that’s even considered by Google as a core web vital for its ranking algorithm.
Caching is certainly one of the most important elements for page load optimization. However, improper use of it could lead to other problems.
This article will help you understand why setting up caching for websites is essential and make you aware of the common pitfalls. At first, let’s explore the benefits in detail.
1. Improved Page Load Time and Responsiveness
With caching, data retrieving gets faster since it limits the need for full network roundtrips. …
There are many ways for JavaScript DOM traversal. Let’s find out how to traverse using parent, child, and sibling nodes.
As you all know the JavaScript DOM is a tree data structure of nodes. If you have been in frontend development for a while, I’m sure you are aware of the methods you can use to access DOM elements. Just to recap, here are some of the methods that we use to refer to DOM nodes.
- getElementsByTagName()
- getElementsByClassName()
- getElementById()
- querySelector()
- querySelectorAll()
These are the ways to select HTML elements within your DOM using JavaScript. However, it might be cumbersome to access each and every element in the DOM by referring to it using a class name or an id.
In…
Get to know the benefits of using the BFF pattern in practice
Imagine a scenario where you need to build an e-Commerce application using microservices. You may have microservices for Customers, Orders, Products, Shopping carts, etc. The microservices will exposes APIs to be used by the frontend.
However, the data returned to the frontend by the Microservices may not be formatted or filtered according to the exact way the frontend needs to represent them.
In that case, the frontend needs to have some logic on its own to re-format these data. Having such logic in the frontend will use up more browser resources.
In a situation like this, we can use a…
Get to know the features of Axios and how to use them in practice
Axios is a powerful promise-based HTTP client used to make requests to external servers from the browser. If you are a front-end developer, you might already be using this technology.
However, Axios provides a range of advanced features not known by many. Therefore, this article will focus on these features to increase your awareness of its true potential.
- Request and response interception
- Make concurrent requests
- Protection against XSRF
- Transforming data
- Support for upload progress
- Response timeout
- Ability to cancel requests
Request and response interception
This particular feature of Axios is widely spoken about. Therefore, I won’t be doing a detailed explanation. …
A JavaScript API for dynamic image creation coupled with CSS
Images add color to an application. However, as we all know, having a lot of high-resolution images affects the page load time. For images of products, scenarios, and so on, we have no option but to include these images and optimize the application by caching them. But if you need a geometric image in your application, you don’t have to include it as an asset anymore.
You can programmatically generate geometric images on the fly using the CSS Painting API.
Let’s find out what this API is and how to generate an image using it.
Introduction to the CSS Painting API
The CSS Painting API enables…
Understand the important attributes of WebSockets that every developer should know
In the early days of the Internet, web applications were built around HTTP requests triggered by user interactions. With the advancement of technology, the requirement for real-time data transmission and two-way communication emerged. It was a requirement for low-latency applications such as,
- Multiplayer online games
- Chat applications
- Realtime updating social feeds
- Live sports scoreboards, sports tickers, etc.
The solution was WebSockets. With its wide acceptance, many libraries emerged to simplify its applications. Consequently, many of us started using the technology without knowing the internals, leading to inefficiencies.
Therefore, this article attempts to cover the essential attributes of WebSockets to reduce…
Get to know the applications of Iterators and Generators in JavaScript
Have you come across a situation where you need to loop through a list, but the task took so much time, that you gave up on it?
Well, I have experienced incidents as such while carrying out computationally heavy operations in my applications. Sometimes it affects the stability of the program by crashing and hanging in the middle of the process.
So in this article, I will be discussing two elegant ways to improve efficiency while performing such tasks with JavaScript.
Iterators improve efficiency by letting you consume a list of items, one at a time, similar to a stream…
With the continuously improving CSS over the years, is SCSS relevant anymore? Let’s find out.
When it comes to the domain of styling web pages, we have the choice of using plain CSS or SCSS in a project (among other preprocessors). SCSS is a superset of CSS. Most developers find it more convenient to use it over CSS due to its advanced features and clearer syntax.
In this article, I want to explore the SCSS features and improvements in CSS over the years. In addition to that, I will evaluate whether CSS is ready as a replacement for SCSS in practice.
What CSS offers today
CSS has come a long way since its early days. The recent developments in…
Deep dive into IndexedDB API and its usage in practice
Have you heard of the NoSQL database on the browser?
IndexedDB is a large-scale, NoSQL storage system. It lets you store just about anything in the user’s browser. In addition to the usual search, get, and put actions, IndexedDB also supports transactions.
Source: developers.google.com
You can find an example of an IndexedDB below.
A mechanism to stop overriding your CSS styles using Shadow DOM
As a frontend developer working with a large team, one major hassle I have come across is managing styles for components. Having a shared styles file for components will always result in styling conflicts as it is quite common for two developers to name a style class using the same name.
CSS won’t throw an error for this. As a result, I have experienced unexpected style usage in the components where its time consuming to resolve those.
The technique I am going to introduce next will give you a solution to avoid CSS naming collisions.
What is a Shadow DOM?
Shadow DOM is part of…
