Now, Chrome DevTools Supports JavaScript Performance Marks Logs and Visualization
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 …
Five recommended icon packs.
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. …
Tips to improve Serverless Web App Performance in AWS Cloud Platform
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.
1. Avoid Lambda Cold Starts with Provision Concurrency
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. …
Vital measurements for User Experience from Google, affecting page rank for websites.
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.
Core Web Vitals & Web Vitals
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. …
Reducing the negative effect of CORS to improve performance
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. …
A lot happened this year — let’s take a look
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.
January
Next.js 9.2 was released on January 16
The major release came in January, and the Next team released several updates throughout the year after this.
February
Angular 9 was released on February 6
This was the first of many major version upgrades of Angular in 2020.
Ionic 5.0 was released on February 11
Ionic released their first major version release titled Magnesium in Frbruary, with iOS 13 updates and brand new APIs. …
How to use CI/CD pipelines to automate your build process
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.
What Are 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. …
Optimize your JavaScript code by using the right loop types.
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.
Methods to Measure Performance
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 …
How I upgraded my project to React 17 and Webpack 5
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. …
Will Incremental DOM Replace Virtual DOM in the Near Future
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.
How Virtual DOM 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…
