Forem: Rounit Ranjan Sinha

Web Performance Optimization Techniques

Rounit Ranjan Sinha — Tue, 09 Apr 2024 06:42:36 +0000

If Web Performance is Thanos, then LCP, FID & CLS are the infinity stones.

So, in the multiverse of web development every web developer must be aware about the web performance techniques, so that the website developed by them must give seamless user experience.

Let's understand these abbrev in deep.

=> LCP - Largest Contentful Paint: (this is related to loading of the website)
When a website loads it fetch a bunch of assets from the server like the CSS, HTML, JS, media etc., then it paints on your browser, so you are now able to see the stuffs. By minimizing this largest paint we can achieve a faster load.

Good < 2.5 sec < needs improvement < 4 sec < Poor
& BAD LCP == BAD SEO

How to find it and fix it?
When you go to the networks tab in inspect element window and examine the network waterfall.

To fix this:
1) Reduce resource load time: Compressing the images, use bare minimum types of fonts.
2) Use a CDN(content delivery network): Serve the assets from the CDN
3) Blocking JS: Suppose you have to run some JS before showing and image, you should avoid this. this is why Server side frameworks like Next.js have taken favour over SPAs like React. As a SPA, React has to run some JS before running the original content on initial rendering*.
4)Preload time: You can give priority to some stuffs to be discovered first,
"
also we can set fetching priority to images like
"

=>FID - First Input Delay (this is related to the interactivity)
This is the time between a user interacts with the page and gets the result.

Suppose there is a button on the website, and when the user clicks that button (let's say clicked at 12:00 AM), and when the result comes (suppose the result arrives at 12:01 AM), the time between these events (in this example, 1 second) will be the First Input Delay (FID).

(bhai like the temporal dead zone while declaring variables using let and const, ifykyk)

Good < 100ms < needs improvement < 300ms < Poor

The only way to optimize this is by reducing the JS execution, one can use web workers for this or to lazy load.

=>CLS - Content Layout Shift (this is related to the visual stability)
It indicates how much the elements on a page move around during the loading process.

imagine you're reading a recipe online. As you're about to click on the ingredients list, suddenly an image loads above it, pushing the ingredients down the page. This sudden movement can be frustrating because just when you're about to use the ingredients, they move out of reach.

Good < 0.1 < needs improvement < 0.25 < Poor

To improve this the image must have it's fixed width and height or you may use css' aspect ratio property.

"Egdm makkhan website banane ka"

Full vs Complete BiNARY TREEs

Rounit Ranjan Sinha — Sat, 20 Jan 2024 02:12:25 +0000

To understand this concept about Binary tree we have to learn about Binary tree representation in Array.

When the node is at index i, then the left child is at index 2*i _and _right child will be positioned at index i*2+1 and it's parent must be at i/2

After the binary tree representation as an array we can say

=>
Full Binary tree: If the binary tree is full with all the max nodes it can take corresponding to the height and adding another node to the binary tree will increase the height then it's known as Full BT

How to check max nodes according to the height?
Ans = Using formula_** 2^(h+1) - 1**_, where h is the height of BT

=>
Complete Binary tree: When the binary tree is represented in the form of an Array, and up to the length of the array if all the elements are present then it's complete Binary tree else it's not

Some real life examples to use BT
=>
Navigation Trees:
In website development, hierarchical navigation menus are common. Each menu item can have zero or more sub-items, forming a tree structure. This structure is useful for organizing and displaying a website's navigation hierarchy.
Home
|-- About
| |-- Team
| |-- History
|-- Products
| |-- Product A
| |-- Product B
|-- Contact

=>
Comment Threads:
For comment systems on blogs or forums, replies to comments often form a tree structure. Each comment can have multiple replies, creating a threaded discussion.

Implement Dynamic Programming in a cake shop (with code)

Rounit Ranjan Sinha — Tue, 16 Jan 2024 15:11:25 +0000

Suppose you own a cake shop and decided to redecide your menu because you want to maximize your profit by selecting the most valuable cakes to include in your menu.
Each cake has a weight ( chota cake, mota cake) and a value (paisaaa).
The goal is to determine the maximum total value you can obtain with a given maximum weight capacity for your menu.

Code explanation
1) Initialize the Table (menu banane ke lie page toh laoge na)

const dp = Array(cakes.length + 1).fill(null).map(() => Array(capacity + 1).fill(0));

This line initializes a 2D array (dp) to store solutions to subproblems. The array has rows for each cake and columns for different weight capacities.

2) Dynamic Programming Iteration:
for (let i = 1; i <= cakes.length; i++) { const currentCake = cakes[i - 1]; for (let w = 0; w <= capacity; w++) {
The outer loop (i) goes through each cake, and the inner loop (w) goes through each possible weight capacity.

3)Decision Making:
if (currentCake.weight > w) { // If the current cake is too heavy for the remaining capacity, skip it
dp[i][w] = dp[i - 1][w]; } else { // Max value between including and excluding the current cake
dp[i][w] = Math.max(dp[i - 1][w], dp[i - 1][w - currentCake.weight] + currentCake.value); }
Here, the code decides whether to include the current cake or not. If the cake is too heavy for the remaining capacity, it skips it. Otherwise, it calculates the maximum value between including the current cake and excluding it.

4) Result Extraction: (bas ab menu print kr do)

return dp[cakes.length][capacity];

The final result is stored in the bottom-right cell of the dp table, representing the maximum profit considering all cakes and the given capacity.

Example Usage:
const cakes = [ { weight: 2, value: 15 }, { weight: 3, value: 20 }, { weight: 1, value: 10 }, ]; const capacity = 5; const maxProfit = maxCakeValue(cakes, capacity); console.log("Maximum profit:", maxProfit);

Real-world Explanation:
The maxCakeValue function helps you decide which cakes to include in your menu to maximize your profit, given the limited space (capacity) available on your menu display. The example usage with the cakes array and capacity variable shows how you can apply this function to find the maximum profit for your specific cakes and menu capacity.

Developer Rounit ❌
Baker Rounit ✅

Git vs GitHub(cake version)

Rounit Ranjan Sinha — Sun, 14 Jan 2024 06:31:40 +0000

While talking about Git and GitHub, generally people gets confused in these two and assume these two same, but what we have to do LOL
hum toh chalo cake khane !

𝐂𝐚𝐤𝐞 𝐒𝐡𝐨𝐩 𝐚𝐬 𝐚 𝐏𝐫𝐨𝐣𝐞𝐜𝐭:

Rounit's Bakery (Project): The cake shop is a project, and the cakes you bake are the different versions or stages of the project.

𝐆𝐢𝐭 as a 𝐑𝐞𝐜𝐢𝐩𝐞 𝐁𝐨𝐨𝐤:

Recipe Book (Git): The recipe book is like Git. It keeps track of all the recipes (code) and any changes made to them over time. Each chef (developer) can have their own copy of the recipe book.

𝐆𝐢𝐭𝐇𝐮𝐛 as a 𝐂𝐞𝐧𝐭𝐫𝐚𝐥𝐢𝐳𝐞𝐝 𝐁𝐚𝐤𝐞𝐫𝐲:

Bakery Headquarters (GitHub): The bakery headquarters is like GitHub. It's a central place where all the recipe books (Git repositories) are stored. Chefs (developers) can share their recipes, collaborate on new cakes, and review each other's work.

𝐁𝐫𝐚𝐧𝐜𝐡𝐞𝐬 as 𝐃𝐢𝐟𝐟𝐞𝐫𝐞𝐧𝐭 𝐂𝐚𝐤𝐞 𝐅𝐥𝐚𝐯𝐨𝐫𝐬:

Cake Flavors (Branches): Imagine you have different branches for different cake flavors. Each branch represents a different development path or feature. For example, there's a "Chocolate" branch and a "Vanilla" branch.

𝐂𝐨𝐦𝐦𝐢𝐭𝐬 a 𝐂𝐚𝐤𝐞 𝐑𝐞𝐜𝐢𝐩𝐞𝐬:

Cake Recipe (Commit):

Each commit is like a specific recipe in the recipe book. It represents a snapshot of the cake at a particular point in time. Chefs (developers) can add new recipes (commits) to the book as they make changes to the cake.

𝐏𝐮𝐥𝐥 𝐑𝐞𝐪𝐮𝐞𝐬𝐭𝐬 as 𝐂𝐚𝐤𝐞 𝐑𝐞𝐯𝐢𝐞𝐰𝐬
Cake Review (Pull Request): When a chef (developer) finishes baking a new cake layer or toppings (feature), they can submit it for review. This is like creating a pull request. Other chefs can review the cake, suggest changes, and decide whether to merge the new flavor into the main collection.

Cake khate raho, seekhte raho!

Follow #rounitsinha

𝐖𝐡𝐚𝐭 𝐢𝐬 𝐰𝐰𝐰? 𝐖𝐡𝐚𝐭 𝐢𝐬 𝐰𝐰𝐰𝟐 & 𝐰𝐰𝐰𝟑? 𝐈𝐧𝐭𝐞𝐫𝐧𝐞𝐭, 𝐖𝐖𝐖, 𝐁𝐫𝐨𝐰𝐬𝐞𝐫

Rounit Ranjan Sinha — Sat, 13 Jan 2024 05:38:25 +0000

=>𝐈𝐧𝐭𝐞𝐫𝐧𝐞𝐭:

𝐀𝐧𝐚𝐥𝐨𝐠𝐲: The entire marketplace where different shops, including the cake shop, exist.

𝐄𝐱𝐩𝐥𝐚𝐧𝐚𝐭𝐢𝐨𝐧: In the context of the Internet, think of it as the global network connecting computers, servers, and devices worldwide. It's the infrastructure that enables communication and data exchange between various entities.

=>𝐖𝐨𝐫𝐥𝐝 𝐖𝐢𝐝𝐞 𝐖𝐞𝐛 (𝐖𝐖𝐖):

𝐀𝐧𝐚𝐥𝐨𝐠𝐲: The cake shop within the marketplace.

𝐄𝐱𝐩𝐥𝐚𝐧𝐚𝐭𝐢𝐨𝐧: The World Wide Web is a specific service on the Internet. It's like a collection of interconnected documents and multimedia content (cakes and products) that can be accessed through web browsers. Each website has its own unique address (URL), similar to how the cake shop has its specific location in the marketplace.

=>𝐖𝐞𝐛 𝐁𝐫𝐨𝐰𝐬𝐞𝐫:

𝐀𝐧𝐚𝐥𝐨𝐠𝐲: The pathway or route customers take to navigate through the marketplace and reach the cake shop.

𝐄𝐱𝐩𝐥𝐚𝐧𝐚𝐭𝐢𝐨𝐧: A web browser (e.g., Chrome, Firefox, Safari) is the software tool that allows users to access and explore the content available on the World Wide Web. It acts as the means by which users navigate the Internet and visit specific websites.

Recently, I visited the HnM website(for window shopping, paise nhi h, refer kr do for job 😉 ) and got to see their URL has www2, I was like what?how?why? then I read about that and got to know

The terms "www2" and "www3" are sometimes used in URLs to identify specific web servers within a larger domain. However, this usage is not standardized, and its meaning can vary depending on the organization or website owner.

Here are a couple of possible explanations for the use of "www2" and "www3":

𝗟𝗼𝗮𝗱 𝗕𝗮𝗹𝗮𝗻𝗰𝗶𝗻𝗴:

In some cases, websites use multiple servers to distribute the load and improve performance. The "www2" or "www3" subdomains might be used to direct traffic to different servers for load balancing purposes.

𝐒𝐮𝐛𝐝𝐨𝐦𝐚𝐢𝐧𝐬 𝐟𝐨𝐫 𝐒𝐩𝐞𝐜𝐢𝐟𝐢𝐜 𝐒𝐞𝐫𝐯𝐢𝐜𝐞𝐬:

Large organizations or websites with various services may use different subdomains to host specific services. For example, "www" could be the main website, while "www2" and "www3" might host additional services or content.

Like this is their www website :

www .hm. com/ entrance. ahtml

This is their Asian websites:

www2. hm. com/ en_in/ index.html

(given indentations in URL to avoid having HnM links on website, they can pay then will add 😉 )

Follow #rounitsinha for more

frontend #backend #webdevelopment #internet #frontenddevelopment #backenddevelopment

l2eseries

CSS and the Browser's Hardware acceleration

Rounit Ranjan Sinha — Wed, 10 Jan 2024 03:17:33 +0000

We know the CSS but what's this Hardware acceleration ?

**Hardware* acceleration is a technique used by modern web browsers to leverage the graphical processing unit (GPU) on a user's computer to accelerate rendering and improve performance, especially for graphics-intensive tasks like CSS animations and transitions.

Hardware acceleration offloads certain computations from the computer's central processing unit (CPU) to the GPU. The GPU is designed specifically for rendering graphics and is highly parallelized, making it well-suited for tasks that involve manipulating and displaying visual elements, such as animations, transitions, and graphics.

=> How Hardware Acceleration Works in Browsers?
^Graphics API:
Browsers use graphics APIs (Application Programming Interfaces) to communicate with the GPU. Common graphics APIs include OpenGL, WebGL, and Direct3D.

^Offloading to GPU:
When a web page contains graphical elements, such as CSS animations or transitions, the browser can offload the rendering calculations to the GPU through the graphics API.

^Parallel Processing:
The GPU can process multiple tasks simultaneously (parallel processing), which is advantageous for rendering graphics quickly. This is in contrast to the more sequential processing typically performed by the CPU.

^Smooth Animations:
By utilizing hardware acceleration, browsers can achieve smoother animations and transitions. The GPU's parallel processing power allows for more efficient handling of graphical operations, resulting in improved frame rates and responsiveness.

=> Advantages of Hardware Acceleration:
^Performance:
Hardware acceleration improves the performance of graphics-intensive tasks, leading to smoother animations and a more responsive user experience.

^Efficiency:
By offloading graphical computations to the GPU, the CPU is free to handle other tasks, contributing to overall system efficiency.

So, never underestimate the OG CSS and learn advance CSS, so that for animations and all (not advanced animations) avoid JS and write CSS for that, from scratch.

Get your hands dirty on css here :
https://cssbattle.dev/

Checkout my profile:
https://cssbattle.dev/player/rounit08

Get your hands dirty on css here :
https://cssbattle.dev/

Checkout my profile:
https://cssbattle.dev/player/rounit08

Follow #rounitsinha for more

👨‍💻 Why passing GIFs in HTML's tag is acceptable by browsers but not the video file? 🗃

Rounit Ranjan Sinha — Mon, 10 Jul 2023 16:17:55 +0000

🔺 When it comes to web development, we often encounter the need to display different types of media content.
GIF (Graphics Interchange Format) is an image file format that supports animation, making it an ideal choice for short, looped animations.

🖊 Actually, it consists of a sequence of images displayed in a specific order to create the illusion of motion. Since GIF is essentially a series of static images, it can be displayed using the "img" tag just like any other image.T

🔺 However, videos are a different story. Unlike GIFs, videos consist of both audio and visual data, requiring dedicated video players for playback. To accommodate this, HTML provides the tag, specifically designed to handle video playback. With the tag, you can include multiple source files, such as MP4 or WebM, within tags, specifying different formats for browser compatibility.

Type coercion in JS, it's hierarchy?

Rounit Ranjan Sinha — Fri, 16 Jun 2023 19:07:08 +0000

We as a js developer often used "==" and "===" operators in js, but few of us knows about diff b/w them,

"==" (Equality Operator):
The "==" operator is used for loose equality comparison. It checks whether the operands are equal after performing type coercion if necessary. Type coercion means converting the operands to a common type before comparison.
For example:
console.log(5 == '5'); // true
console.log(true == 1); // true
In the above examples, the operands are of different types (number and string, boolean and number), but JavaScript automatically converts them to the same type for comparison.

"===" (Strict Equality Operator):
The "===" operator is used for strict equality comparison. It checks whether the operands are strictly equal without performing type coercion. Both the values and the types of the operands must match for the comparison to return true.
For example:
console.log(5 === '5'); // false
console.log(true === 1); // false

But "==" does type coercion, means converting to a common type before comparison. So, is there any hierarchy on which conversion depends?

Yes, there is a hierarchy for type coercion in JavaScript. The coercion process follows a set of rules:

If either operand is a null or undefined, they are considered equal (unless strict equality is being used with the "===" operator).
If either operand is a boolean, the boolean is converted to a number (false becomes 0, true becomes 1) before comparison.
If one operand is a string and the other is a number, the string is converted to a number before comparison.
If one operand is an object and the other is a primitive value, the object is converted to its primitive value before comparison. This can be done using the valueOf() or toString() methods of the object.
If the operands are both strings, they are compared as strings.

Tip:
It's important to note that the type coercion process can sometimes lead to unexpected or non-intuitive results, which is why it's generally recommended to use the strict equality operator "===" instead of the loose equality operator "==". The strict equality operator does not perform type coercion and requires both the values and the types to match for the comparison to return true.

Follow #rounitsinha for more 😝

React's arrow of Reconciliation

Rounit Ranjan Sinha — Mon, 05 Jun 2023 18:50:43 +0000

In React, reconciliation is the process of comparing the virtual representation of a component's previous state with its new state, and determining the minimal set of changes needed to update the user interface efficiently. It's how React figures out what parts of the UI need to be updated when the state or props of a component change.

Here's a step-by-step explanation of the reconciliation process in React:

Virtual DOM: React uses a virtual representation of the DOM called the Virtual DOM. It's a lightweight copy of the actual DOM.
Render: When a component's state or props change, React re-renders the component and generates a new virtual representation of the component's UI.
Diffing: React takes the previous virtual representation (from the previous render) and the new virtual representation (from the current render) and performs a process called "diffing." Diffing involves comparing the two representations and identifying the differences between them.
Update Strategy: React employs an efficient update strategy based on the diffing process. It aims to minimize the number of actual changes made to the real DOM by only applying the necessary updates.
Reconciliation: Once React has identified the differences between the previous and new virtual representations, it performs the necessary updates to the real DOM to reflect the changes. This process is called reconciliation.

During reconciliation, React follows a few principles to optimize the update process:

Elements of different types are considered different and are completely rebuilt from scratch.
React tries to update the props of components if they have the same type.
React uses a "key" prop on lists of elements to improve the efficiency of updates.

By following these principles, React ensures that the user interface remains in sync with the component's state and props while minimizing unnecessary DOM manipulations, resulting in better performance.

Reconciliation is a core concept in React, but you don't need to worry about it too much in your day-to-day development. React's reconciliation algorithm is highly optimized and handles most cases efficiently. However, understanding the basics of reconciliation can help you write more efficient and optimized React components when dealing with larger applications.

Understanding CSRF in Web.

Rounit Ranjan Sinha — Sun, 04 Jun 2023 18:55:50 +0000

As a web developer one needs to understand about Web Security,
Let's talk about Cross-Site Request Forgery (CSRF), with a common example.

Suppose you are single (us bros us) and want to enter a pub, but only couples are allowed. You tried, but the bouncers outside the pub gave you some kicks on your *** (less than your ex). Then you see a girl outside the pub who wants entry but is not allowed. You both pair up and then get entry inside that pub. After the party is over, you both move out from there with exchanged phone numbers 😉.

Chalo bht hua, ab tech smjho!

Here's an example of a CSRF attack:

Let's say Rounit is browsing a social media platform called "SocialBook," where users can post messages on their profiles. When users submit a new post, the platform sends a POST request to the server to save the message.

Now, suppose Rounit is logged into SocialBook(means authenticated) and comes across a malicious website while browsing the internet. This malicious website contains hidden code that automatically submits a form to create a post on Rounit's SocialBook profile without his knowledge or consent.

Here's how the attack unfolds:

Rounit is logged into SocialBook and visits the malicious website.
The malicious website includes a hidden form that targets SocialBook's post creation endpoint with predefined values: <form action="https:/anylink" method="post"> <input value="Check out this website!"> </form>.
The attacker uses JavaScript to automatically submit the form in the background without Rounit's awareness.
Rounit's browser, following the attacker's instructions, sends a POST request to SocialBook's post creation endpoint with the predefined message.
SocialBook's server receives the request and treats it as a legitimate request because it appears to originate from Rounit's session.
The malicious message gets posted on Rounit's profile without his knowledge or consent.

In this example, the CSRF attack tricks Rounit's browser into making a request on his behalf to perform an unintended action—creating a post on his SocialBook profile—by exploiting the trust relationship between Rounit's browser and SocialBook.

To protect against CSRF attacks, SocialBook can implement measures such as CSRF tokens, to ensure that requests originated from forms embedded on their own website rather than from external sources.

To protect against CSRF attacks, Implement CSRF tokens: Use unique tokens in each HTML form or request that performs sensitive actions. The token should be generated server-side and embedded within the form or included as a header in AJAX requests.

Follow #rounitsinha for more such contents

Do browsers really understand JSX? What are transpilers?

Rounit Ranjan Sinha — Fri, 28 Apr 2023 03:48:30 +0000

Do browsers understand JSX?

Short Ans - NO

Long Ans - No, to render JSX in a web browser, it needs to be transpiled into regular JavaScript using a tool like Babel. The resulting JavaScript code can then be executed by the web browser.

So, What it is meant to be transpiled?
=> Transpiling is the process of converting source code written in one programming language into another programming language that has a similar level of abstraction.

But that's what a compiler do, so what's the difference?
=> Transpilers and compilers are both types of tools that convert code written in one programming language into another language, but there are some differences between them:
1)Output language: The main difference between a transpiler and a compiler is the output language. A compiler typically translates source code into machine code that can be directly executed by a computer, while a transpiler usually converts code into a higher-level programming language that needs to be further processed or executed in a runtime environment.

2)Level of abstraction: Compilers generally operate at a lower level of abstraction than transpilers.
(The level of abstraction refers to how much detail or complexity is present in a particular idea or concept.)
For example, let's consider the concept of a car. At a high level of abstraction, we might think of it as a vehicle that transports people or goods from one place to another. We're not concerned with the specific details of the car's mechanics, design, or history.
On the other hand, at a low level of abstraction, we might look at specific details of a car, such as its engine, transmission, wheels, and interior features. We're now dealing with more specific and detailed information.

3)Target audience: Compilers are usually intended for developers who are building low-level systems or performance-critical applications, while transpilers are more commonly used by web developers who want to write code in modern languages and still support older web browsers.

Currying with placeholder support : Explained with detail.

Rounit Ranjan Sinha — Thu, 23 Mar 2023 19:25:02 +0000

Currying is one of the most important concepts and also most asked JavaScript/Frontend interview question.

In this article we will be solving one question which uses currying and some array methods.

So, here we have some requirements to solve this question:
1) We have to check arguments length
2) We have to replace the "_", placeholder.

So, we have to write code inside function curry(as shown in question above.)

So, as we know that currying is a concept in javascript in which a function returns another function expecting the next argument(s).

So, here in function "curry" we had passed "func" as an argument.
and acc to this question this argument "func" is the join function.

Now, there may be a condition in which there are arguments coming to the function more than the expected function's length.

So, we don't want extra args, here we have used the splice method.

which is splicing the args from 0th position to the length of func(i.e., join here)
=> args.splice(0, func.length)

Now we need to check if the placeholder(i.e., "_" in this case) is present or not

So, we have used the Array.some() method of javascript.
**Now, let's understand that how this .some() method works, so basically it works like the filter() method but returns something else, actually as in filter method of javascript, we write some logic and if that element is present in the array then we return that element., but here in this some() method, instead of returning that element we return true if logic fits, else we return false.

Now, there maybe the condition where there is no placeholder present and the length is also equal to the expected length.

So we use the apply() method of javascript, basically this apply method accepts arguments as an array.(here in the code keyword "this" represents the function "func" itself)

And now the worst can happen is there is the presence of the placeholders and now we need to replace them in order to obtain expected output.

So, we need to iterate over the args to check the presence of the placeholders.

Here's the complete code.

I hope it helps :)
Follow for more such contents