As developers, we always push our limits to develop better-performing applications. And most of the time, we use specialized tools and libraries to measure our applications’ performance.
Do you know that JavaScript provides a powerful Performance API that we can use in any JavaScript project?
JavaScript performance API comes with a variety of inbuilt functions like Console.time
, Console.timeEnd
, Performance.now
, Performance.mark
, Performance.measure
, etc.
Each of these functions has its advantages and covers a broader scope. However, in this article, I will be focusing on Performance.mark
and Performance.measure
…
Over the past decade, web and mobile applications have become a part of our day to day lives. Today, we can find many applications solving the same problem. Therefore, it’s clear that the functionality of an app isn’t the only differentiator anymore.
Besides, the overall user experience given by the application plays a significant role in the success of these apps. To fulfill that, we also need better User Interfaces (UI).
As developers, we must ensure the look and feel of the application meets higher standards to attract new users and retain existing ones. …
Serverless has become one of the hottest topics in the development world right now. There are many reasons for this popularity.
One of the core reasons is that Serverless takes care of the underlying complexities such as scaling, security, availability while allowing you to focus on your code.
However, optimizing a Serverless application requires specific expertise. Besides, there are many obsolete methods out there due to the rapid innovations involved with Serverless. In this article, I will be discussing modern approaches to optimize Serverless web apps for better performance.
When developing APIs using Serverless services in AWS, we use API Gateway and Lambda to run our backend code. And these functions start upon receiving events from API Gateway. …
There are many ways to optimize the user experience of websites. But knowing the best and optimal method from the beginning can save time and cost drastically.
Google introduced Web Vitals to measure websites’ user experience and use those measurements as part of their ranking algorithm. To get a better understanding, let’s see what those Vitals are.
You don’t need to be an expert in any area to understand Web Vitals. They are simple things like mobile-friendliness, browsing safety, HTTPS, interactivity, visual stability, loading time, etc.
Out of these Web Vitals, Google has identified three main measurements as Core Web Vitals common across all types of websites. …
Cross-origin resource sharing (CORS) is an agreement between web browsers and web servers across origins. This agreement allows servers to decide what resources are allowed to access outside it’s hosted domain/sub-domain and instruct the browsers to follow the rules.
For example, you will encounter CORS if your web application is hosted in myapp.com, and it accesses the API in api.myapp.com from the frontend.
Although there is an importance of having CORS for security purposes, most developers overlook its impact on the application performance.
Whenever you make an HTTP request from the frontend to a different domain, the browser will send another HTTP request ahead of that, sequentially to make sure the server grants it. …
The difficult year of 2020 is almost over, and we all need to have a better year in 2021. But when it comes to the development world, things remained relatively normal. We saw some major releases from some tech giants.
In this article, I’ll bring all these important things together into a single page. Go through them, and see if you’ve missed any of these important things.
The major release came in January, and the Next team released several updates throughout the year after this.
This was the first of many major version upgrades of Angular in 2020.
Ionic released their first major version release titled Magnesium in Frbruary, with iOS 13 updates and brand new APIs. …
Being a software engineer is not just about coding and building projects. It’s a massive ecosystem consisted of requirement analysis, designing, development, deploying, maintaining, etc.
So it’s essential to automate things to reduce the time and focus on the development process’s core functionalities. We can use CI/CD tools to manage such situations easily.
In this article, I’m planning to integrate the GitHub repo and AWS S3 bucket to automate the deployment of a React application using a CI/CD tool named Buddy.
Before that, let’s get a simple understanding of CI/CD tools.
Continuous integration, continuous delivery, and continuous deployment (CI/CD) have been used in the software development industry for a long period. CI/CD practices can contribute similarly in both infrastructure and internally developed applications. Many organizations use CI/CD tools to automate different phases of their application build. …
As developers, we always push our limits to write better-performing applications. And most of the time, we look for performance from a higher level. But what about the tiny decisions you make in the code. Does it matter?
After thinking about it, I was curious to see how different Loops in JavaScript affects application performance as a starting point.
I hope you would also like to know the fastest Loop in JavaScript.
So, I went ahead with a small experiment to measure different types of Loops in JavaScript to measure their execution time.
JavaScript has several inbuild functions that you can use to measure your code’s performance. Out of them, I’ve used Console.time
and Console.timeEnd
…
I have been working with React for several years now. So far, after each release, it always excited to try out new features. But this wasn’t the case with React 17. It was advertised as a No New Feature release.
I was a bit disappointed initially but anyway went ahead with upgrading to React 17 and to Webpack 5.
Later, I noticed several enhancements under the hood with React 17, which I strongly recommend updating.
This article will discuss the steps to upgrading a React project to React 17 and Webpack 5 with my own set of tips to avoid common pitfalls. …
If you are familiar with React, you have probably heard of the concept of Virtual DOM. It is one of the main contributors to React’s popularity by increasing UI performance.
However, when Angular released their new renderer Angular Ivy back in 2019, many wondered why they chose a concept known as Incremental DOM over Virtual DOM. And still, Angular sticks with the idea. So you might wonder why Angular uses Incremental DOM in the first place and keeps on using it. Let’s find it out.
First and foremost, let’s start with Virtual DOM and understand how it works.
Virtual DOM’s main concept is to keep a virtual representation of UI in the memory and sync it with real DOM using the reconciliation process. This process consist of 3 main…