0647 read as 423 in C++

In C++, octal numbers play a crucial role in numerical representations. One intriguing aspect of octal numbers is the significance of leading zeros in their representation. While it might seem puzzling at first, the way C++ interprets these numbers carries underlying reasons that differentiate octal representations like 0467 from alternatives like 647. Let’s delve into the world of octal numbers in C++ and unravel why 0467 is considered as 423 while omitting the leading zero results in a different value. Octal Number System Overview: The octal number system is a base-8 numeral system, utilizing digits from 0 to 7. Unlike the more commonly used decimal system (base-10), where digits range from 0 to 9, octal numbers’ uniqueness lies in their representation of values using a smaller set of digits. Understanding Octal Representation in C++: In C++, when an integer literal starts with a leading zero (0), the compiler interprets it as an octal number. Thus, an integer literal such as 0467 is considered an octal representation. However, omitting the leading zero alters the interpretation of the number. Consider the example: 0467 in C++ octal representation is read as 423. 647 is not considered an octal representation but a decimal number. 647 will be read as 647 but due to leading 0 , 0647 will be considered as an octal number. The Role of Leading Zeros: The leading zero signifies to the C++ compiler that the number following it should be treated as an octal value. As a result, the value 0467 is interpreted in the octal system, where the digit ‘4’ in the hundreds place, ‘2’ in the tens place, and ‘3’ in the ones place yield the octal value 423. However, when the leading zero is omitted, as in 647, the compiler doesn’t recognize it as an octal number but rather as a decimal one, resulting in a different interpretation and value altogether. Potential Pitfalls and Clarifications: Novice programmers might inadvertently overlook the significance of leading zeros when dealing wi

A Journey Filled with Friendship, Growth, and Countless Memories: Farewell Codemonk 👋

A Journey Filled with Friendship, Growth, and Countless Memories Farewell Codemonk

Hello Everyone, This is Ashutosh, and today marks the last day of my journey at Codemonk—at least in this home. But this is just a transition, not a farewell forever. We will always be connected through different platforms, and our bond will remain strong. More than 1200 days at Codemonk—it’s impossible to sum up in just a few words. I have lived countless emotions, traveled to amazing places, worked on 10+ projects, and with the support of my founders and team, I have been able to support my family as well. This journey has been nothing short of incredible. I still remember when I joined. We were just 4-5 people in the office—me, Akshay, the chai partner for evening tea runs; Suhas, my badminton/marathon/trip partner; and Ashwin, who was always there for anything I needed. Whether it was cycling, coding discussions, marathons, or even badminton, Ashwin was our own Hanuman, always lifting us up. He took us to some of the most beautiful places like Madhugiri and Coorg, and for that, he holds a special place in my heart. Goodbye are hardest, but life just go on . Codemonk has been a special part of my journey and I have seen it grow from just 10 members to nearly 100+ today. It all started with Mukkadir and Harshita, our Northeast Rajasthan adventurers, and then our beloved all-rounders my bhai log ❤️ Karan and Nihal joined. But something was missing—the heart of India. Then came Kavish, the champion of all; Harshil, whose wisdom is unmatched; Ram Shankar, the man of transformations; and Atul, the humble chai premi —becoming the pillars of Codemonk, bringing strength from all parts of the country. And of course, what’s a journey without some Lady Gaga energy? Enter Shravani ! 🎉 A big round of applause for her! Alongside her, Sayali , our first amazing manager at codemonk and , joined in, making this team feel even more like a family. Even though I have been working from home for the past two years, I never once felt far from you all. You stood by me in every challeng

KANKHAR a full stack friendwork

KANKHAR: A Full Stack Friendwork (of Friendship) In the silicon jungle of Bengaluru, where code monkeys swing from tree to tree, a legend was born. Not just any legend, mind you, but a full-stack legend - KANKHAR! 🐒💻 It all began in the aftermath of the great plague (aka COVID), when a brave soul ventured into the urban wilderness of Bengaluru. His name? Ashutosh Anand Tiwari. In November 2021, Ashutosh planted his flag at CodeMonk, becoming the first to join this fledgling banana republic of developers. Little did he know, he was about to become the nucleus of something far greater than himself. As the calendar flipped to April 2022, Ashutosh found himself face-to-face with two "interns." But calling Nihal and Karan mere interns would be like calling a smartphone a fancy calculator. These code-slingin' savants turned CodeMonk upside down faster than you can say "runtime error." The trio formed a bond stronger than any merge conflict, fueled by endless plates of lemon rice and idly. But as any good developer knows, variety is the spice of life (and the bane of legacy code). Enter the Litti Chokha Crusader, Ram Shankar! With his arrival, the team's flavor profile expanded faster than an unoptimized for-loop. But something was still missing in this masala mix of talent. Lo and behold, from the land of dhokla and garba, came the backend behemoth - Harshil! Now they had it all - North, South, and Gujarat. A pan-Indian papad of programming prowess! But wait, what's that sound? It's the honking of a Delhi metro, bringing with it the final piece of the puzzle. Make way for Kavish, the dropout who could out-code a senior dev with one hand tied behind his back! The team was buzzing with energy, like a server farm on Red Bull. They thought they were complete, a full stack of talent reaching from frontend to backend. But oh, how wrong they were! For in the heart of India, Madhya Pradesh, a crucial element was waiting to join the mix. Enter Atul, the nucleus that would bind t

My NDA experience.

My experience of NDA exam..

About myself Hello my name is Prince Tiwari, I am going to write about my recent experience in NDA exam, actually this was my 2nd attempt, so I am going to writes all mistakes I have done , all positive that happened to me while preparing for this exam... Writing soon..... Sorry, but I will write soon

Syntax, Expression, and Statement in JavaScript

What are syntax and expressions in javascript

How do we communicate? As we know, when developing something, we write code. When we want a computer to perform a task, we give it instructions. For example, if you want to use the calculator on your computer, you open the app and type something like \ 2 + 2\ , and the system will give you the output \ 4\ . This means you have given an instruction to the computer, and it has provided you with the output. Now, lets discuss more about the instructions you provide to computers or any software. Generally, we communicate with someone in a language they understand. For instance, if you meet a Chinese person and start speaking in Tamil, will they understand? The answer is NO. Similarly, when you write \ 2 + 2\ in your system, does the system understand it directly? The answer is also NO. So, how is it possible for a Chinese person to understand Tamil or for your system to understand \ 2 + 2\ ? The first thing that comes to mind is that you need some kind of mediator or translator who translates Tamil into Chinese and \ 2 + 2\ into a language that the computer can understand. Here comes the role of Compilers/Translators, which translate one type of input into another type of instruction so that the target person/system can understand. But there's one more thing we have to notice. Guess what? The input you are giving, whether it's Tamil or \ 2 + 2\ , should follow some rules. Otherwise, your translator will be confused, right? That's why the language you're writing or speaking should also have some rules. Isn't it? So, you have already got the definition of syntax. Syntax The rules of valid format and combination of instructions in a computer language are called syntax. Statement In the English language, as you know, a statement is a group of meaningful words. Similarly, in computer language, a statement is a group of words, numbers, and operators (like \ +\ , \ -\ , \ /\ , \ \ ) that perform a specific task. Expression If you want to remember this forever, here's a trick fo

My journy from Delhi to Bangalore

Delhi to Bangalore

I will be writing my journey from Delhi to Bangalore, thank you.

Basic Question of JavaScript

What is JavaScript? JavaScript is a scripting language that enables interactive web pages. It's commonly used to create dynamic content, control multimedia, and handle user interactions like clicks and form submissions. JavaScript is executed on the client's browser, allowing developers to build responsive and engaging websites. Who created JavaScript? JavaScript was created by Brendan Eich in 1995 during his work at Netscape Communications. Initially named Mocha, it was later renamed JavaScript. The language was designed to enable dynamic and interactive elements within web browsers. What are variables in JavaScript? Variables in JavaScript are used to store data that can be accessed and modified throughout the program. You can declare variables using var , let , or const . The let and const keywords are more modern and provide better scoping compared to var . For example, let name = "John"; creates a variable that holds the value "John" . What are operators in JavaScript? Operators in JavaScript are symbols used to perform operations on values and variables. These operations include arithmetic ( + , - , , / ), comparison ( == , === , != ), logical ( && , || , ! ), and assignment ( = , += , -= ) operators. For example, let x = 10 + 5; uses the + operator to add two values together. What are comments in JavaScript, and how do you write them? Comments in JavaScript are used to leave explanatory notes in the code. They are ignored by the JavaScript engine during execution and do not affect the program. Single-line comment: Use // for a comment on one line. Example: // This is a single-line comment Multi-line comment: Use / to start and / to end a multi-line comment. Example:

Data Types in JavaScript

Interviewer : Tell me all data types in JavaScript? You: There are total 8 built in data types in JavaScript. 1. string 2. number 3. boolean 4. null 5. undefined 6. object 7. symbol ( ES6 feature) 8. bigInt typeof Operator JavaScripts Provides typeof operator to check the value and its type

Where to practice JavaScript Questions 

E900: Where to ptactice javascript questions

Best video sources for JavaScript

E901: Best video sources for JavaScript

Polyfills in JavaScript with Code

Polyfills are code snippets that fill the gap for older browsers to support modern web features. More precisely, a polyfill is a piece of code that enables older browsers to use modern web features. Polyfills are often written in JavaScript but can also be implemented in other programming languages. How It Works? 1. A polyfill first checks if the browser supports a feature. 2. If the browser supports it, the polyfill does nothing. 3. If the browser doesn’t support it, the polyfill provides its own implementation. Now, let's explore polyfills for some JavaScript features and learn how they work. Polyfill for forEach Polyfill of Map Polyfill of Filter Polyfill of reduce Polyfill for call Polyfill for Apply Polyfill for bind Polyfill for Array flat Polyfill Promise.all

Spread and Rest Operator and Destructuring

This is ES6 feature Spread Operator The spread operator is used to expand elements of an iterable, such as an array, object, or string, into individual elements. It is used for: Copying arrays Merging arrays and objects Passing arguments to functions Rest Operator The rest operator is the opposite of the spread operator. While the spread operator expands values from an array, object, or iterable, the rest operator collects multiple values into a single data structure. It is mainly used for receiving function arguments, array destructuring, and object destructuring.

Common unix commands

Common Unix Commands

<body <h1 Common UNIX Commands</h1 <ul <li ls - List directory contents</li <li ls-al - List directory contents in long format</li <li who - print information about user</li <li echo- prints strings onto console</li <li cd - Change directory</li <li pwd - Print working directory</li <li mkdir - Make directory</li <li rmdir - Remove directory</li <li rm - Remove files or directories</li <li cp - Copy files or directories</li <li mv - Move or rename files or directories</li <li touch - Create a new empty file</li <li cat - Concatenate and display file contents</li <li find - Search for files in a directory hierarchy</li </ul </body

Welcome to Node.Js Course

e1: welcome

Course mein aapka bahut swagat hai! Node.js ko hum bahut detail mein samjhenge, aur Express aur MongoDB ko bhi achhe se cover karenge. Course lamba aur deep hone wala hai, aur hum Node.js ke core concepts ko 2024 ke end tak complete karenge. Main course ko regularly update karta rahunga, aapko bas dheere dheere padhna hai. Kabhi kabhi ek-do din ka gap ho sakta hai. Request from Anurag Bhaiya (Procdrr): Notes Jaroor banaye, chahe digital ya copy, WebSockets aur WebHooks bhi isme cover honge. Community mein active rahiye aur Discord par bhi active rahiye. Documents aur queries ke liye, logo se puchiye aur unke jawab dijiye. par jaake bhi aap help maang sakte ho ya Discord mein ye kar sakte ho. Aao ab prerequisites ke bare me jante hain in Markdown Request from Notes Creator Dekho maine kitni pyari notes banayi hain aapke liye, aap bhi aage ki notes likh sakte ho kyunki ye notes github se hai aur open sourced hai, ab jaake github par star kro iss repo ko aur padhna jaari rakho , Dhanywaad

 Introduction to Terminal and Shell

E:10 Introduction to Terminal and Shell

Terminal: Yeh ek tarike ka app hai jiske through aap apne system ko operate karte ho. Jaise kai tarah ke browsers hote hain, waise hi kai tarah ke terminals bhi hote hain. Achha, ab kaise open karein? Iske liye aap apne keyboard par Start key ko press karein aur search bar mein Terminal ya PowerShell type karein. Aur bas, open ho jayega! Ye terminal me kai tarah ke shell hote hain, jaise Command Prompt aur Windows PowerShell — yeh Windows mein milte hain. Agar aap Linux use karoge, to wahan aapko Bash shell dikhega. MacOS mein aapko Terminal app mein zsh shell milega. Hum aage Bash shell hi use karenge. Install bash shell Chalo, ab VS Code mein chalte hain aur ek file banate hain terminal.js . Terminal ko open karne ke liye Ctrl + J press karo, jahan hum apna code run karte hain, wahi terminal hota hai. Ab waha right side aapko option milega select karne ka, ki aap kya use karna chahte ho — Git Bash select karo ya agar download nahi kiya, to Git download kar lo. VS Code ko reopen karoge, to Git Bash bhi dikhne lagega. Git install hua ki nahi ye janne ke liye aap check kr skte ho aise, terminal me Chrome mein aur har ek OS mein ek terminal by default aata hai, lekin Git Bash shell ek best options mein se ek hai, aur yahi hum use karne wale hain.

Basic shell commands

E11 Basic shell commands

Now let see few commands of the shell, echo echo is same as console.log() just printing what you typed So, aapne dekha ki Bash ke andar hum bahut kuch kar pa rahe hain. Actually, Bash bhi ek tarike ki scripting language hai, isme bhi loops hote hain aur bahut kuch. Bash file ka extension hota hai .sh , aur koi bhi file aap .sh se bana ke run kar sakte ho, aur saara code waha likh sakte ho. pwd : print working Directory/ Folder Iska full form hai print working directory , ye aapko current folder ka naam print kar deta hai. whoami ye user ka naam print kr deti hai cd Iska naam hai change directory . Ek directory se pichhle ya agle mein jaane ke liye. Dekho, aap ek level upar bhi ja sakte ho aur next directory mein type karke ja sakte ho, ya fir aap pichhe ja sakte ho. To kuch commands likh deta hu, aap apne terminal mein try kariye. Haan, aur Bash hi use kariye, PowerShell nahi. Achha, ek cheez, agar aap cd ../ karte jaoge to aap root directory par pahunch jaoge, aur last mein sign dikhega aapko. Aur agar kahin se bhi aapko home directory mein aana hai, to aapko terminal mein sirf cd likhna hoga. achh aapko kaise pta chalega kitne next folder hai directories hai mere curr directory ke andar ls : List ye hai list command aapke type krte hi jitne folder ya diretcories hai wo list ho jayengi ls -la ( will discuss later) Creating , Copying Moving and Deleting using commands Ab hum dekhne ja rhe hain files ko copy move rename aur delete kaise kr sakte hian ? touch : Create File touch ka use karke aap ek nayi file create kar sakte ho. Agar folder yaani directory create karni ho, to mkdir command ka use karna padega. mkdir : Make Directory / Folder Iska full form hai make directory , aur jab aap iske baad kuch likhte ho, to wo folder ke roop mein create ho jata hai. Niche jo command likhi hai, usse same root mein src folder ban jayega. cp : Copy Files cp file copy karne ke liye use kiya jata hai, aur aapko do paths dene hote hain. Ye dhyan rakhna, agar aap path likh rahe ho 

Promt in Terminal

E16: Promt in terminal

Ab humne GUI , CLI , aur commands ke baare mein kaafi achhe se jaan liya hai. Ab baari hai ye jaanne ki prompt kya hota hai. What is a command prompt? A command prompt is the input field in a text-based screen for an operating system (OS) or program. The prompt is designed to elicit an action. The command prompt consists of a brief text string followed by a blinking , which is where the user types command prompt commands. . Jab hum koi bhi terminal open karte hain, jaise Start button par click karke PowerShell open karte hain, to aapko waha ek PS likha hua milega, jaise ye: Aapko pata hai ye PS kya hota hai? PS ka full form hota hai Prompt String . PS ko nahi, but C:\Users\heyashu isse Prompt kehte hain. PS ka matlab Prompt String hai. Ab aao, jaante hain prompt ko kaise customize karein? Dekho, Bash mein PS1 aur PS2 naam se variables hote hain. To chalo, print karke dekhte hain. Kaise print karenge? Using $ . to ps1 ke andar wo stored ahi badi si string, ab isko hum rename ekr sate hain kaise?? Configure Terminal To agar hume PS1 aur PS2 ko permanently change karna hai, to aaye dekhte hain kaise possible hoga. Ek file hoti hai home directory ke andar. Achha, aapko kaise pata chalega home directory kya hai? To aap terminal mein jaayein aur likhiye: to ab folder open hua ab agar .bashrc file na ho waha to aapko banani padegi aise, ya fir normally ab file create ho jayegi.. ab us .bashrc ko vs code ya kisi editor me open kr lijiye, ab iss bash rc me jo bhi likh denge aap wo har naye terminal pe run hoga , ab aap likh dijiye .bashrc me ab har bar naye terminal me mere hello print hoga Alias Iska use tab hota hai jab aapko koi bahut badi command baar-baar likhni padti ho, to aap usko ek naam de sakte ho. Jaise, git add . aur aap nahi chahte baar-baar ye command likho, to iska ek upnaam (alias) de do, jaise mera naam Ashutosh hai aur aap mujhe Ashu bula sakte ho waise. Ab aapko .bashrc file mein likhna hoga. To chalo, sabse pehle .bashrc ko source karte hain aur run kart

Basic OS feat Node JS

E19 Basic OS feat Node JS

Jaise hum JavaScript ko web pe run karte hain aur browser ki capabilities jaante hain, jaise document aur aur bhi cheezen, waise hi Node.js bhi JavaScript hai, lekin jab run hoti hai, to usko OS yani hardware ka access hota hai. Matlab, Node.js ko operating system ke resources tak pohoch hoti hai. Yeh samajhna zaroori hai ki kaise yeh sab kaam karta hai, kyunki agar aapko OS basics acche se aate hain, to aap ek pro developer ban sakte ho. Isi liye OS ki understanding bahut important hai Node.js development mein. CPU: Central Processing Unit Jo abhi aapke dimaag me image aa rahi hai, wo CPU nahi hai. Wo CPU ka dabba hota hai, jise cabinet bolte hain. CPU actually uska chhota sa hissa hota hai jo motherboard ke upar laga rehta hai. Cabinet ke andar Motherboard hota hai, aur Motherboard pe hi SSD laga hota hai. OS inhi cheezon pe run karta hai. Core kya hoti hai? CPU me cores hoti hain, lekin unhe aankhon se nahi dekh sakte. Pehle zamane me sirf single core hoti thi, aur ek baar me sirf ek hi program run ho sakta tha. Aaj kal 4 cores hoti hain, jinka matlab yeh hai ki ek baar me multiple tasks perform ho sakte hain. Logical Cores Agar hamare system me 4 logical cores hain, to modern technology se unhe 8 cores tak badha diya jata hai. Is tarah se manage kiya jata hai ki 4 cores ka kaam 8 cores jaisa ho jata hai. Ye sab processor ke manufacturer manage karte hain, aur operating system bas inhe operate karta hai. Apne system me ye information dekhne ke liye Task Manager open kariye, aur CPU tab pe jayiye — aapko sari details wahan mil jayengi. Ab aao dekhte hain yeh sab Node.js se kaise pata karte hain. Apne terminal me jayiye, aur likhiye node , phir enter press karke Node.js environment me aayiye. Operating System kya hai? OS bas ek software hota hai. Yeh ek special software hai jo hardware ko manage karta hai. Yeh decide karta hai kaunsi app kitne time ke liye kaunsa hardware use karegi. Basically, OS ek manager hai jo sab applications ke liye kaam karta hai. Kernel ky

Prerequisite

e2:  prerequisite

Prerequisites Basics of Frontend (Not covered in the course) HTML/CSS : Basic knowledge of HTML and CSS is useful since we'll be using Node.js for web development. Good Knowledge of JavaScript (Not covered in the course) Syntax and Basics : You should be comfortable with JavaScript syntax, variables, loops, conditionals, functions, and error handling. Advanced JavaScript Concepts : Understanding concepts like closures, callbacks, promises, async/await, classes & OOPs, JSON, and event handling is crucial since Node.js heavily relies on asynchronous programming. Basics of Terminal (Covered in the course) Shell Commands : You should be comfortable using basic shell commands to navigate directories, manage files, and execute scripts. Basics of OS (Covered in the course) CPU and Cores : You should have a basic understanding of CPU and Cores. Process, Threads and Kernel: You should have a basic understanding of Process, Threads and Kernel. File Systems and Paths : Understanding file paths, relative vs absolute paths, and file permissions. Environment Variables: Knowing what environment variables are and how to set them in different operating systems. Environment Variables: Knowing what environment variables are and how to set them in different operating systems. Basics of Computer Networking (Covered in the course) IP Addresses, Ports, and DNS : Understanding how IP addresses, ports, and DNS work is helpful when dealing with networking in Node.js. Above content is copied from :

What is process ?

e21: what is process in operation system

Process ek unit of execution hota hai, matlab ek aisa program, code ka piece ya application jiska apna memory allocation hota hai aur jo processor ko use karke computation yani kuch kaam kar sakta hai. Har process apni life cycle ke dauran alag-alag states se guzarta hai, jaise ready state, waiting state, running state, terminated state, aur sleep state. Ye states process ki current condition ko define karti hain. Agar aapko ye states dekhni hain ya kisi process ko monitor karna hai, to aap Windows mein Task Manager khol sakte hain, macOS mein Activity Monitor ya Linux mein System Monitor open kar sakte hain. Har process ki apni ek unique ID hoti hai, jise Process ID (PID) kehte hain. Ab in sab mein kuch important details jo humne pehle discuss ki hain, jaise Execution Context aur doosri cheezein, wo aapko dikh nahi rahi hongi. Inhe dekhne ke liye aap kuch additional apps install kar sakte hain jo in details ko monitor karne mein madad karte hain. Un apps mein se ek popular app hai Process Explorer . Is app ko install karke aap har process ki in-depth information jaise CPU usage, memory consumption, aur execution context ka analysis kar sakte hain. Iske alawa, aap htop (Linux ke liye) aur Activity Monitor (macOS ke liye) jaise tools bhi use kar sakte hain. https://learn.microsoft.com/en-us/sysinternals/downloads/process-explorer https://processhacker.sourceforge.io/downloads.php : isme windows ka setup download kr lijiye Yaha se aap context switches bhi dekh sakte hain. Kisi bhi subprocess pe click karke jo dialog open hoga, usse aap yeh check kar sakte ho ki uska parent process kya tha aur current process kya hai. Ab ek kaam karte hain, chaliye dekhte hain Node.js ka process kaise hota hai aur kitna CPU aur memory consume karta hai. Terminal pe jaake node start kar dijiye. Jaise hi aap node start karte ho, wo REPL environment (Read-Eval-Print Loop) ko start kar deta hai, jiska matlab hai aap waha directly commands likh ke unhe execute kar sakte ho. Ab yaha se hum d

Duniya Threads ki !

e22: Thread, Concurrency, and Parallelism

Dekh rahe ho Vinod? kaa bhaiya, kaise thread ghoom rha hai ? Achha, hum yeh toh jaante hain ki ek process ek core par execute hota hai. Lekin kya ek process sirf ek core par hi chalta hai? Nahin! Ek process ke kai sare threads ho sakte hain. Jaise Chrome mein kai tabs hote hain—ek tab mein video chal raha hota hai, aur doosre tab mein aap email likh rahe hote ho. Dono alag-alag threads mein kaam kar rahe hote hain. Jab koi process start hota hai, toh hum kehte hain process ko "spawn" karna. Jab ek parent process apne child process ko banata hai, toh usse "spawn" kehate hain. Ye baat toh suna hi hoga? Process kai threads create kar sakta hai. Threads ko spawn karna fast hota hai, jabki process ko spawn karna kaafi expensive (mehenga) hota hai. Baki details aap online padh sakte ho. Socho, ek Chrome jisme do tabs hain, dono alag threads par chal rahe hain, aur yeh threads alag-alag cores par run kar sakte hain. Lekin agar CPU mein sirf ek hi core hai, toh kya fayda hoga do threads banane ka? Haan, fayda hoga! Thread banane ka fayda yeh hai ki OS (Operating System) kaam efficient banata hai. Threads ke saath kaam karne se context switches (yaad hai?) jaldi-jaldi hote rehte hain. Matlab, ek thread ke execute hone ka intezaar nahin karna padta. Samajh rahe ho? Jaise aapke do bacche (threads) ek ke baad ek kaam kar rahe hain, bina time waste kiye. Isliye, multi-threading single core CPU par bhi possible hoti hai. Process hi thread create karta hai, isliye ise "worker thread" kehte hain, kyunki thread process ka worker hota hai. Aise samjho, aap ek boss ho (process) aur aapke do naukar hain (threads), jo bina rukhe kaam karte ja rahe hain. Ab aao, samajhte hain kaise system mein threads ko dekh sakte hain! Threads in Task Manager Ab aap Task Manager open kar lijiye... aur "Details" section mein chale jayein. Agar aapko "Threads" column nahi mil raha hai, toh kisi bhi column ke upar right-click karke "Threads" ko select kar lijiye. Isse aap dekh sakte hain ki har process me

What are Environment Variables?

e25: What are Environment Variables?

Ye ek tareeke ke key-value pair hote hain, aur dono strings hote hain. Achha, aapke Windows OS me bhi environment variables hote hain. MacOS aur Linux pe bhi aap inhe dekh sakte hain. Agar aap Windows me "environment" search karenge, to aapko global environment variables dikh jayenge. User variables aur System variables ke do tareeke ke sections aap dekh sakte ho. Aur aap naye variables bhi add kar sakte ho "New" pe click karke, jisme aap paths wagairah bhi dal sakte hain. System variables me aapko PATH wagairah bhi dikh jayega. Lekin system variables ko edit karna recommend nahi kiya jata. Abhi humne dekha ek user variable aur ek system variable show ho raha hai, jo basically operating system aur user se related hote hain. Achha, ek teesre tareeke ka variable bhi hota hai. Process Specific Variables Jab bhi ek process start hoti hai, jaise Node.js process, to hume us process ke variables ka bhi access milta hai. Ek warning hai aapke liye—ye blog jo aap padh rahe ho, wo pichhle blog se related hai, to kaafi cheeje humne pehle se install aur configure kar rakhi hain. To ye highly recommended hai ki aap pehle pichhle blogs ko achhe se padhein. Yaha hum pichhle wale A, B, aur C thread wale example par debugger laga ke run karenge. Aap JavaScript debugger ke auto-attach ko on kar lijiye. Agar samajh nahi aa raha ho, to pichhle blog ko follow kariye . Humne debugger laga ke start kar diya hai thread wali file, jisme humne teen threads bana rakhe the, aur debugger unhi threads me doosre thread par ruk gaya hai. Ab jab aap "Process Informer" app kholenge (jo humne pichhle session me download kiya tha) aur Node.js process pe click karoge, to environment section me PS1 dikhai dega. Actually, is dialog box me aapko teen accordion dikhenge: Process, System, aur User. Jo ye Process section hai, yahi process-specific variables ka hota hai. Achha, hum yeh bhi samajhte hain ki jab ek process child process ko start karti hai, to child process apne parent process ke saare variables 

Installing Linux (WSL) in windows

e27: Installing Linux WSL in windows

The permission system on Linux is totally different from Windows, and whenever we deploy our project on a server, the terminal we get is usually a Linux system. So, it's important to learn the Linux path and file system as well. What are you waiting for? Let's start! Click the Windows key and search for "WSL." If it shows up, great! Otherwise, just install it and get ready to explore. After opening and installing, if you search and click on WSL, you'll get this terminal where you can start exploring the Linux environment. So, just like this, all cloud providers offer you a similar terminal. If you're installing it for the first time, you might need to restart and set up in the terminal, meaning you'll need to answer a few setup questions. That's it! Now, if you check your VS Code terminal, you'll notice that WSL has been added as a new terminal environment option. he full form of WSL is Windows Subsystem for Linux , and with this, we've basically installed a new OS (Linux) inside our Windows system. If you already have Linux, then you're good to go—nothing to worry about, you're already rocking! To navigate in the terminal, use cd / to move to the previous directory. Go to \\wsl.localhost\Ubuntu to check all Ubuntu files. And for accessing the .bashrc file, navigate to \\wsl.localhost\Ubuntu\home\heyashu . So, did you get it? Windows has a different .bashrc and Ubuntu has its own .bashrc , right? Now, you can create any file or folder inside this directory, open it with VS Code, and run whatever you need. We also recommend downloading this extension as well! https://code.visualstudio.com/docs/remote/wsl-tutorial and then you can wirte sudo commands also The full form of sudo is Super User Do . So, what you've done is downloaded WSL, which installed Ubuntu. Now, any folder you're opening in VS Code is actually opening in Ubuntu. This makes it super easy for you to learn Linux file paths and use all the Ubuntu commands, including sudo for superuser privileges. You're 

Understanding the Path System: Windows vs. Linux Explained

E28: Understanding the Path System: Windows vs. Linux Explained

Okay, before discussing anything, let's first understand what comes to your mind when I say "file" or "folder." A file is like a box or container of data such as audio, video, or text. A collection of files can be put inside one more container, which is called a folder or directory. That's easy, right? But here's one more thing called: Symbolic Links These can't be seen in file explorers, but if you open your bash terminal, you will. When you go to the root directory using cd / , you will see all symbolic links. And when you run ls -l , here are a few things to know: d stands for directory l means symbolic links indicates regular files A symbolic link points to a file or a folder (directory). Below, if you see l , it indicates that it's pointing to the Templates directory. We don't work too much with symbolic links, but if you want to explore more, do some research. Let's move to the path system. Path System (Windows) A path refers to the location or route of a directory or file. There are two types of paths. You can go to your VS Code, right-click on any file in the left-side file explorer, and you will get two options: copy relative path and copy absolute path. 1. Relative Path 2. Absolute Path An absolute path means it will start from the root directory. Relative path ( soemtime stats with ./ ) and in windows it starts with \ and i unix it starts with / And in widnows what is the propblem lets try to understand Actually, above you will see \t is pointing to the tab, which is why \ can be dangerous. \n will point to new lines, and the backslash ( \ ) is a special character in multiple programming languages. That's why in Windows, we use double backslashes \\ in paths. But in Unix, it's different. Path in Unix System In bash, if you observe, everywhere it uses and gives / (forward slash) because bash simulates the UNIX system and handles everything behind the scenes. And read about the cygpath command, what it does, and how in the future you can interchange paths. 

What are Executable Files ?

e29: What are Executable Files

Let's understand more about what executable files are and how you can create them. What is the purpose of these executable files? There are two types of executable files: Script Executable File Binary Executable File You can create any file and write anything in it, but it will only be treated as an executable file if it's properly formatted for execution. For example, in VS Code, if you create a file called hello.txt and write "hello" inside, it won't automatically run as an executable. However, in the terminal, if you type ./hello.txt, the system will try to execute it, assuming you’ve given the necessary permissions. The term ".exe" refers specifically to Windows executable files, but other systems like Linux or macOS have different formats for executable files. Now, if you write the ls command in the hello.txt file, which is a valid command, and then execute the file using ./hello.txt, it will list all the files in that directory (assuming you have made the file executable and are using a Unix-based system like Linux or macOS). So, this hello.txt is treated as an executable file, specifically a script executable file. Note that in Windows, whatever file you create can potentially be treated as an executable file, regardless of its extension or even if it has no extension. Remember, a script file does not necessarily need to have a .js extension; it can be anything. However, a confusion arises—since all files can potentially be treated as executable files in Windows, to avoid this, we use the .sh extension for better visibility. Files with this extension are referred to as bash script files. There are two common types of script files: .sh files are used for Linux-based systems. .bat files are used for Windows systems. Everything we've discussed so far applies mainly to Windows. However, if you try the same thing in Linux, or in Windows using the Windows Subsystem for Linux (WSL), you may encounter an error like "Permission denied". This is because Linux systems r

What is backend & client server

e3 what-is-back-end-client-server

Server ek tarike ka computer hi hota hai. Maine iske baare mein pehle hi kaafi likh rakha hai, aap padh sakte hain. Uske baad yaha aake continue kar sakte hain. Ek front-end application ko run karne ke liye ek server hona zaroori hota hai. Jab hum VS Code mein live server use karke run karte hain, to wo Node.js ka code use karke hi run hota hai. Ye live server ka GitHub repo hai, waha jaake aap isko padh sakte hain, ye Node.js ka hi code likha gaya hai.

 Managing File Permissions in OS

e30: Managing File Permissions in OS

Now we are going to see the permissions of different files in OS. In Windows Just click on any file, actually right-click and view it in File Explorer, and then right-click on the file and go to properties. And then, once the Properties tab is opened, you select the Security tab, and you can see the permissions. Now, if you click the Edit icon and then select your name as the user, you can modify the permissions. Now, if you deny write permissions, then you will not be able to write anything in permission.js , which I have created and accessed after revealing it in File Explorer. If you deny read permission, you will not be able to read, and when you deny write, you will not be able to write. A Gotcha A file that has write access but not read access—how will you write without reading it? VS Code and any editor will not help you with this because only after reading will you be able to write. That’s why terminals are powerful. Now, using terminals, you will be able to write into it, using the commands we’ve already discussed earlier. There are multiple types of permissions, but we will focus on three only: 1. Read 2. Write 3. Execute In Windows, Read and Execute permissions are combined in the Windows OS, as you can see in the above screenshot, but that’s not the case in Linux systems. In Windows, you can click ALT + ENTER to open the properties window if the file is opened in File Explorer. Note one thing: if you remove executable permission in Windows, after trying to run the file, you will see the same message in the terminal— PERMISSION DENIED . Read more here: . In Linux - - - The time you see in the last modified time. 197121 : is denoting bytes of files. And remember, the directory/folder size remains the same, and that doesn’t depend on the files under that folder, technically speaking. Not like on top, but think technically. By default, a folder has 4096 (4KB assigned). Ashutosh Tiwari : is the user of WSL. There is a concept of groups in an OS. You can check

How commands gets executed ? 

e32: How commands gets executed

If you write anything and press enter in the terminal, it will say "command not found." There are some types of commands: 1. Alias : Bash first checks if the command matches any defined aliases. 2. Functions : Next, it checks if the command matches any defined shell functions. 3. Built-in commands : Like cd , echo , pwd , etc. 4. Hash Table : 5. Executable : Finally, it searches through the directories listed in the PATH environment variable, in the order they appear, to find an executable file matching the command name. So, the question is: How do you know which type of command is being used when you type it? For example, if you type pwd , how do you know what type of command it is? You can use the which command before the actual command to determine its type. If you run cd / in Windows, it will take you to the path where Git is installed. When you run explorer . , it will open that directory, and you can see the pwd.exe file, which is an executable binary file. type Command If which gives you any unusual result, try using the type command. How to Create Function Commands Let's open the .bashrc file and see how we can write functions. To open .bashrc , just run: Nowi bahsdrc wirte tghuis Now, cd is already a built-in command. So, how do you know which one will run? Yes, this will override the main cd command. If you define a function named cd and type cd , it will execute your function and print an echo. Using this overridden cd , you will not be able to change directories. How poriority gets decides ? It checks in the following order: Aliases , then Functions , and then continues to other types. Now, guess what the type of node would be? node is also a command, right? winpty node.exe is aliased somewhere. Remember, we saw this winpty in the Performer app? . You can learn that winpty simulates a Unix-like environment in Windows. After checking functions, it looks for built-in commands, then the hash table, and finally executable files. Also, remember that the which

CLI vs GUI

e4: cli gui 

CLI ka full form hota hai Command Line Interface aur GUI ka Graphical User Interface . Dono tarike ke apps hote hain. Kuchh aisi applications hoti hain jinka interface nahi hota, jaise git . Git ko run karne ke liye command yaani terminal application use hoti hai. Jaise aapne likha git pull , iska koi GUI (graphical interface) nahi hai, saari cheezein commands se hi hoti hain, hai ki nahi? Jaise ek aur library hai jiska koi UI nahi hai, lekin command ke through aap saare YouTube ke videos download kar sakte ho, iska link yeh hai: . For example: Baaki kaise install hota hai, yeh sab aap jaake inke Discord pe dekh sakte ho. Abhi ke liye itna jaan lo ki aisa possible hai, aur baaki hum aage dekhenge. To bas, yeh ek example tha CLI ka aur commands se kaam karne ka. Windows mein start button dabake cmd likho to ek CLI open ho jaata hai. Linux mein terminal hota hai, toh yahi sab hota hai. Hum bhi aisi applications Node.js ki madad se bana sakte hain, CLI bana sakte hain. Jaise Operating Systems hote hain, kuch terminal-based hote hain jaise MS-DOS , UNIX , jo ki command-based interfaces hain (CLI). Aur inhi ke upar macOS aur Linux bane hain jo graphical user interfaces (GUI) hain. Windows bhi ek GUI, yaani Graphical User Interface, hai. Aage Node.js mein bhi hum CLI use karenge. Aur front-end mein bhi aapne git toh use kiya hoga, hai ki nahi?

What Is Node.js ?

e5-what-node-js 

Node.js ka use karke aap JavaScript ko browser ke bahar bhi run kar sakte hain. JS pehle sirf browser ke liye bani thi, lekin jab JS ko browser ke bahar run karte hain, toh yeh bahut powerful ho jaata hai. NPM Node.js ka ek package manager hai, aur Vue ka CLI, Next.js ka CLI, aur Create React App sab Node.js ka use karke hi banaye gaye hain. Chalo, main aapko dikhata hoon: Jaake TypeScript aur saare CLI ka code GitHub pe dekho. Scroll karoge toh aapko dikh jayega ki jo JavaScript browser mein nahi chal rahi, wo Node.js mein chal rahi hogi. JavaScript sirf browser tak simit nahi hai. Bas aap itna samajh lijiye ki yeh bahut interesting hai aur aane wale videos mein hum Node.js ke deeper concepts ko explore karenge. Toh tayaar rahiye, kyunki hum Node.js ke " muh dikhayi " karenge aur installation process bhi dekhenge. Milte hain agle blog mein!

Node JS ki muh dikhaayi 👰

e6 installing node js 

Agar aapke system mein Node.js installed hai toh bhi is article ko skip mat kariye, kyunki yeh kaafi helpful ho sakta hai seekhne ke liye. Aapko bas apne VS Code editor mein ek script.js file banani hai aur usme yeh code likhna hai jo maine neeche diya hai. Aapko pata hoga ki hum index.html ya live server ka use karke script.js ko attach karte hain aur fir Chrome ya kisi aur browser ke DevTools mein check karte hain ki sab sahi se kaam kar raha hai ya nahi. Neeche diye gaye screenshot mein aap dekh sakte hain ki kaise hota hai. Toh sabse pehle aap apni index.html file mein script.js ko attach karke live server ke through 5500 port par run kar lijiye: http://localhost:5500/index.html . Isse aapko kuch aisa interface dikhega console me. Debugging in VS Code (Web App) Lekin yaha pe "Chrome" ka koi role nahi hai, kyunki hum backend seekh rahe hain, yani browser ko ab side mein rakho. Samajhiye ki ab humne browser se V8 engine ko alag kar liya hai aur usko Node.js mein use kar rahe hain. Ab baat yeh hai ki hum kaise JavaScript ko Node.js ke andar run karenge, kyunki Node.js humein JavaScript ko browser ke bahar run karne ki power deta hai. Ab aapko VS Code mein jaana hai aur ye teen steps follow karne hain: 1. Run and Debug option ko kholiye ya (Ctrl + Shift + D) press kariye. 2. "Run and Debug" wale full-width button pe click kariye. 3. Ab dropdown me se Web App chrome select kariye aur aapka app chrome pe chal rha hai Jab aap debugging setup karenge aur dropdown pe click karenge, to ek file automatic generate ho jaayegi .vscode folder ke andar, jisme ek launch.json file hogi. Is file mein aap apne project ke debugging configurations ko set kar sakte hain. Aapko port ko 5500 set karna hai, ya fir aap niche ka code launch.json file mein paste kar sakte hain: Dhyan rakhiye, program key mein jo path hai, usse aap apni main file ka path set kar sakte hain, jaise app.js ya server.js depending on aapka project structure. agar vs code folder aur aapki js file ek level pe hai t

First Line in Node Js

e7: running first line of code.

"Chalo ek file text.txt banate hain apne VS Code mein aur waha kuch likhte hain, jaise ki 'hello.' Uske baad script.js , jo ki text.txt ke bagal mein hi hai, usse run karna hai. Aapko ya fir F5 press karo ya fn + F5 press karo. Haan, debugger lagana mat bhuliye, aur aapko input mil jayega. Output niche code editor mein dekhna hai, aur yaad rakho output debugger console mein hi dikhega." So, abhi aapko buffer mila hai, aur yeh file se related hai, khaane-peene se nahi. Toh yaha dhyan dijiye! Ab yeh buffer kya hai? Actually, yeh wohi file ka data hai jisme jo bhi content present hai. Ab kaise read karein? Niche screenshot mein diye gaye steps follow kariye. Number 1 pe hover karke ek extension install kijiye, aur fir buffer ko read karte hain. Install aap se bhi kar sakte hain, lekin view tabhi hoga jab aap debug kar rahe honge, yani red mark file ke console pe rakhiyega. Extension installation ke baad yeh result aayega (baad me dekhenge) Ab aap itna samjhiye ki aap file read kar paa rahe hain. Kya aap ye simple JS se browser environment mein file read kar sakte hain? Answer is nahiii ! Toh ye ek best benefit hai aur power hai Node.js ki, ki using JS, we can read the file. Aur bhi bahut kuchh kar sakte hain, jo hum aage ke session mein dekhenge. Global Object in Node.js Jaise browser mein window global variable hota hai, waise hi Node.js mein global naam se global variable hota hai Confuse ho gaye? Rukiye, main aapko dikhata hoon. Left side VS Code mein aapko 'Run and Debug' option dikh raha hoga, waha Global object dikhai dega. Usko expand karke dekhiye, aapko global object ki sari details dikhengi. Ya fir, aap script.js file mein code likh dijiye, aur terminal open karne ke liye Ctrl + J press kariye, fir likhiye: (Pichle session mein humne ye dekha tha.) Aapko console mein output dikh jayega. Filhaal, main screenshot dono jagah ka niche daal raha hoon. Iss Global aur window ke baare me english me . So, yeh jaan lena zaroori hai ki web browsers mein global naam ka k

Why we should use Node Js

e8: Why Node JS

JS browser ke bahar bhi bahut kuchh kar sakti hai, chalo kuch examples dekhte hain.” FS ke bahut saare methods hain, bas itna samajh lijiye ki JavaScript Node.js me file delete, write, edit, aur create kar sakti hai. Aage hum isko detail me padhenge. Hum kisi bhi application ko bhi open kar sakte hain, jaise ab ek example dekhte hain kaise Chrome ko open karein. Networking capabilities JS Node.js me server bhi start kar sakti hai. Ek file banao aur usme likho Server ka code debug se run karne ke liye, aap left top pe green play button ko click kar sakte hain. Dhyan rahe, aapke launch.json file me ye code hona chahiye. Yani, program me aapke file ka naam hona chahiye. Mere file ka naam script.js hai, to maine script likha hai Process management kr sakte hain Operating system se interact kr sakte hain node js se aur bahut saari cheeje ….

History of Node Js

e9: History of node js

2008-2009 ke aas-paas ek developer Apache servers ke sath kaam karta tha, jahan har request ke liye ek naya thread create hota tha, jo blocking hota tha. Iska matlab ye tha ki jab ek request process hoti, tab tak doosri request wait karti. Is problem ko solve karne ke liye, 2009 me us developer ne JavaScript ko server pe run karne ka socha aur non-blocking approach ko adopt kiya, jisme ek hi thread multiple requests handle kar sakta tha bina block kiye. Usne Chrome ke JavaScript engine V8 ka use karke JavaScript ko server-side pe run kiya. Is experiment ke baad, 2010 me NPM (Node Package Manager) launch hua, jo JavaScript libraries aur modules ko manage karne ka ek asaan tarika ban gaya. Phir 2011 me Node.js ka Windows version release hua, aur iske baad Node.js ki popularity aur badh gayi. Ek company, Joyent , ne Node.js ke creator, Ryan Dahl , ko hire kiya. Ryan ne 2009 me Node.js banaya tha, aur ab Node.js ka development kaafi strong ho gaya. Lekin, 2014 me ek challenge aaya jab kuch developers ne Node.js se alag ek project banaya jiska naam tha IO.js . Dono ka focus server-side JavaScript tha, lekin alag-alag development ho raha tha, jiski wajah se confusion badhne laga. 2015 me Node.js Foundation banayi gayi jisme Node.js aur IO.js ko merge karke ek single project banaya gaya—Node.js. Is foundation ne Node.js ko organize kiya aur LTS (Long-Term Support) version ke sath stable releases shuru kiye. Sab kuch theek hone laga. 2019 me OpenJS Foundation banayi gayi, jo web aur server-side JavaScript frameworks ko manage karti hai, aur aaj Node.js OpenJS Foundation ke under managed hota hai.

A quick overview of gRPC

It's kind of like a sibling to REST API or GraphQL, enabling communication with the server in a unique way. RPC stands for Remote Procedure Call , and the "g" in gRPC stands for Google , as it was created by Google. Let's understand it now: Suppose there are two machines—one is the client (any machine) and the other is the server (another machine). In the end, when we call an API, it executes a function on the server. With RPC, instead of making a traditional API request, the client can directly call a function on the server. Below is the architecture diagram, and we will discuss each terminology in detail. In REST APIs, data is transferred in JSON format, but in gRPC, it happens using Protocol Buffers (Protobuf) , which is an IDL (Interface Definition Language) . To use gRPC, we need HTTP/2 . Just like REST APIs send serialized data over the network, gRPC also transmits protocol-serialized data . However, gRPC maintains a single long-lived connection and supports bidirectional streaming . So, referring to the screenshot above, once an HTTP/2 request is made using gRPC, bidirectional data flow happens. Each time we call a server function , a bidirectional data flow occurs, and the connection ends after the response. We already discussed that gRPC uses Protocol Buffers (Protobuf) instead of JSON . Now, let’s understand Protocol Buffers and how encoding and decoding take place. Protocol Buffer (ProtoBuf) is developed by Google. ProtoBuf is an IDL (Interface Definition Language) and also provides serialization and deserialization . It supports binary data transfer , unlike REST APIs, where we use .json() , in gRPC, we use .proto (also called proto3 ). The .proto file defines the request and response structure. This file enables code conversion , making it compatible with multiple languages. The response can be deserialized in any language , which makes gRPC highly flexible. Honestly, this concept is a bit confusing, but we’ll explore it further to understand it better.

Best Web Performance tools

If something works on my system, it doesn't mean it's good for all. So, to know whether it's good or not up to the mark for everyone, we need some tools to test our website. So, let's talk about those. There are three personas while discussing web pages and their construction: 1. Developer mode 2. Simulated Environment 3. Real user data For Real-Time Users For real user data, we can use CRUX of Chrome. Read here: . It's basically Chrome’s user experience report, showing how real Chrome users experience a website. PageSpeed.web also comes under that, which can be used to analyze all web vitals for a web page: https://pagespeed.web.dev/. Other tools: – You can use Request Metrics by injecting the script provided by them into your system to check performance. Microsoft Clarity – Another tool that can be used to check page-wise core vitals, error tracking, and much more. New Relic Sentry Google Analytics For Simulated Data To test simulated data, there are many tools available to analyze your website: – A great tool to get detailed data from different locations far from you. For Developer mode \-Lighthouse \-Netwrok tab In Dev Tools , under the Network tab, you can see what is loading and when. \-Performance tab We can also tweak the Performance tab to check things in detail. Note: Please test your web apps in incognito mode . Always dock out your dev tools to test in full viewport.

Browser Cookie Storage

Cookies are also a storage mechanism for persistent data. The data stored in cookies travels with requests from the client to the server, meaning it is automatically transferred via HTTP calls. Whatever is saved on the client can always be read by the server. However, data set by the server is not necessarily accessible by the client. There are two types of cookies: Session Cookie Expires when the browser is closed. Persistent Cookie Remains stored until the set expiry time is reached. If no expiry time is set, it persists until the browser is closed. Key Points: Size Limit : 4KB per domain. Since cookies travel with every request, excessive use can slow down performance. Persistence : Controlled by expiry date/time. It either expires when the browser closes or when the set expiry time is met. Data Structure : Stores stringified data. Below, I have demonstrated how to save a single cookie. For multiple cookies, proper handling is required. Authorization purposes are served when we need to store lightweight data that the server can use. Do not use it for large datasets. It is mainly used to store user preferences. Helps customize the user experience based on previous selections.

Browser Database and Caching Overview

Caching Levels When data is received in the frontend, caching helps optimize performance. Caching happens at different levels: 1. HTTP Cache 2. Service Worker 3. API Caching 4. Application-Level Caching (State Management using Redux, etc.) Browser Databases for Caching 1. Local Storage 2. Session Storage 3. Cookies 4. IndexedDB These storage options can also be used for caching data efficiently.

Browser Indexed DB

IndexedDB is a large-scale, NoSQL storage system that allows storage of just about anything in the user's browser. In addition to the usual search, get, and put actions, IndexedDB also supports transactions, and it's well suited for storing large amounts of structured data. IndexedDB is a large-scale NoSQL storage system that allows storing almost anything in the user's browser. Supports search, get, put, and transactions. Ideal for storing large structured data like Google Docs and Teams messages. Asynchronous operations (non-blocking). Persists across browser sessions. Stores data as key-value pairs and maintains indexes for faster lookups. When to Use Large data caching History storage Handling a large dataset When Not to Use Sensitive and secure data Small database operations Complex data structures (use only for caching) Security Considerations Use authentication and encryption Avoid storing sensitive data Third-Party Library for IndexedDB There is a third-party library that makes IndexedDB usage easier: 🔹 Dexie.js - A Minimalistic Wrapper for IndexedDB 🔗 It simplifies working with IndexedDB by providing a Promise-based API, better error handling, and easy queries. Code A live app : https://mdn.github.io/dom-examples/to-do-notifications/

Browser Local Storage

This is storage where we keep some data persistently on the user's device. Persistent means the data does not get erased even if the user reloads, exits the window, or closes the tab. You can check this storage in Inspect Mode → Switch to the Application tab (next to the Network tab) to view Local Storage . What is allowed Size Limit: 5MB per domain (maximum data storage allowed). Local Storage operations are synchronous. Persistent Storage: Data remains even after closing the tab or window, except in Incognito Mode . Only serialized data (strings) are allowed in Local Storage. Security Considerations: Do not store sensitive data. Be cautious of CORS and XSS attacks . Use Cases: Store user preferences, selected themes, usernames, and basic settings—but never passwords . Asset Storage can also be done. LocalStorage is not reactive .

Browser Session Storage

Session storage is similar to local storage with some basic differences, and it retains data even after a reload. Similarly, there are some methods we can use to perform actions and take advantage of them. It has the same 5MB data limit as local storage and is synchronous. Just remember: It gets cleared when the browser session ends, such as when you close a tab or window. That’s the key difference from local storage. Structurally, it uses serialized data for storage. Important: If you switch tabs within the same domain, you won’t get the stored data. However, if you reload the same tab, the data remains. If you duplicate the tab, session storage initializes as a fresh state for that tab and does not sync with the original. Be mindful of what to store and what not to. Avoid storing sensitive data. Session storage is best for temporary data related to the current session. Avoid storing large datasets, asynchronous operations (since it’s synchronous), or data that needs to persist long-term.

Build Optimization Techniques

Build optimization comes into the picture when we develop our app. To deploy our app, we build it, and the building process is done by a bundler. So, we'll talk about different bundling techniques here. We develop in different files like TypeScript, CSS, Tailwind, React, Angular, Vue.js, but at the end, the browser needs a file that it can understand. That’s the work of the bundler. A bundler is a tool that takes input and gives an optimized and compatible output that the browser can understand. For example, browsers can’t understand SCSS, but we write SCSS code. The bundler converts SCSS and bundles it into CSS. The responsibilities of a bundler include: Module management Optimization Development enhancement (HMR) Cross-browser compatibility Asset management There are multiple bundlers in the market. When comparing bundlers, you can use a site like to analyze and choose trendy bundlers. But before selecting one, let's first understand the core bundlers and how they optimize the build process. Build time optimization impacts two aspects: Customer Experience (faster page loads, reduced waiting times) Developer Experience (faster build times, better tools) Code Splitting Bundlers typically deliver code in a single final JS file. However, web apps often have dynamic features and page-specific code. To improve performance, bundlers can split the code into multiple smaller JavaScript files, which is known as code splitting . This approach allows only the necessary code for a specific page or feature to load, improving load times and performance. Code splitting enables a more efficient delivery of content, as the browser only fetches the code it needs for the page being visited, instead of loading everything upfront. Tree Shaking Tree Shaking is a technique used to eliminate dead code from the final bundle. It removes unused code from the application, helping reduce the size of the JavaScript bundle. This technique is helpful when there are libraries or functions not used

Communication Protocols

HTTP (Hypertext Transfer Protocol) Used in web browsers for transferring hypertext documents. It involves establishing a TCP connection followed by HTTP Request and HTTP Response messages. This protocol is fundamental to web browsing and allows clients to communicate with servers. TCP (Transmission Control Protocol) Uses a three-way handshake to establish connections. TCP guarantees that no data packets will be lost during transmission. It's commonly used for web browsing and email protocols, providing reliable data delivery between applications. UDP (User Datagram Protocol) A fast protocol that operates without establishing handshakes. It sends and receives data immediately, making it ideal for video conferencing where speed is more important than guaranteed delivery. HTTP/3 QUIC (Quick UDP Internet Connections) A modern protocol built on UDP, designed for Internet of Things (IoT) and Virtual Reality applications. It features header compression and improved network connection handling. HTTP/3 offers better performance while maintaining speed similar to UDP. HTTPS (Hypertext Transfer Protocol Secure) An extension of HTTP that includes Transport Layer Security (TLS). The server sends a public key to the client, and a session key is exchanged for encrypted communication. This is now the standard protocol for secure web browsing. WebSocket A protocol that starts with an HTTP connection and upgrades to a full-duplex connection. Commonly used for chat applications and real-time data transfer, allowing continuous two-way communication between client and server. SMTP (Simple Mail Transfer Protocol) Email protocol that uses intermediate SMTP servers to receive and transfer messages to their endpoints. This protocol manages the routing and delivery of email messages across networks. FTP (File Transfer Protocol) Designed for transferring large files between systems. It provides a dedicated protocol for moving data from one computer to another over a network.

HLD High Level Design Overview

High-Level Design (HLD) for a frontend application is an overview of the application's architecture and structure . It focuses on the big picture without detailing the implementation of each component. HLD is a phase in the Software Development Life Cycle (SDLC) where the overall architecture and structure of a software system or application are planned and documented. It bridges the gap between requirement specifications and actual implementation. The goal is to provide a blueprint or roadmap for how the system will function and how its various components will interact. From requirement gathering to understanding users, architecture design, development, and delivery—everything is planned in HLD to ensure a smooth process without issues. In HLD, you also consider stakeholders, deployment, and third-party services. Key Aspects of HLD 1. Requirement Analysis 2. System Architecture: Server, client, components, database, etc. 3. Component/Module Design 4. Data Design / Interfaces / API Schema 5. Technology Selection 6. Functional Requirements: Interaction flow 7. Non-Functional Requirements: Performance, responsiveness, accessibility, SEO, offline support, caching, etc. 📌 Watch this: Remember in Interviews - Ask questions - Don't assume—always ask for clarifications - Drive the interview based on the interviewer’s intent - System design is more than just drawing boxes - Understand functional vs. non-functional requirements

HLD Photo Sharing App Instagram

Functional vs. Non-Functional Requirements Functional Requirements 1. Feeds 2. Create Post 3. List Post 4. Reels, Create Reels 5. Story, Create Story 6. Browse, Filter 7. Messaging 8. Like, Comments 9. Edit Features 10. Profile & Followers Non-Functional Requirements 1. Security & Privacy Features 2. Desktop vs. Mobile: Device Support 3. Authentication 4. SEO 5. Optimization 6. Accessibility 7. Offline Support 8. Testing 9. i18n / l10n (Internationalization & Localization) 10. Deployment Architecture Design Architecture is not about folder or component structure. Start with a high-level server and client design and overall system architecture. 🚫 Avoid framework or language-specific discussions. ✅ Focus on concepts like MVC, client-server interactions, and data flow Component Architecture 1. Feed List : Comment Section, Add Comments 2. Feed Creation : Comment, Caption, User Details, Post Body 3. Media : Image or Video Component Data Models Post Data : id , caption , createdAt , updatedAt , userId , mediaIds[] Feed List : postIds[] , totalPosts User Data : id , name , profilePhotoUrl Media : id , type (image/video) API Endpoints /feedList : pageNo , size (GET) → Response structure & frontend data usage discussion /create-post : Create post, upload media Optimization Asset Optimization Image formats: WebP/SVGs srcset , userAgent , DPR (Device Pixel Ratio) Device connectivity, prefetch images Feed Optimization SSR (Above-the-fold strategies) Lazy Loading Infinite Scroll (Virtualization, Intersection Observer) Code Splitting Loading Shimmers Preserving Feed State Web Workers Optimistic Updates Implementation Image Editing Crop, Resizing, Filters using Canvas API or CSS Filters Try online CSS filter tools for testing and familiarity File Upload HTTPS POST multipart/form-data Base64 encoding Multi-selection File Chunking

How the Web Works

Network is a core part of software, as the frontend needs data and the backend sends it. All of this happens through the network. How is data transferred over the internet? How does it reach the client, and what protocols are required? These are essential concepts for software development. We need to understand what happens when we type " ," what DNS is, and its role in the process. We commonly use REST APIs, but we'll also explore how the web works, including GraphQL, gRPC protocols, and more. We'll dive into networking fundamentals, how the internet works, frontend-backend interactions, REST concepts, HTTP methods, headers, CORS, and other key aspects. How the Web Works To understand this, we need to know the client-server model. A client is the entity requesting information, while a server is the entity providing it. Essentially, the client asks for something, and the server serves it. This is the basic definition of client-server architecture. IP Address Each system on the internet has an IP address. IP Address : An IP address is like a home address for devices on the internet. It uniquely identifies devices (like computers or phones) so they can find and communicate with each other. Examples: IPv4: 192.168.1.1 IPv6: 2001:0db8:85a3... Domain Name A domain is a human-readable address linked to a unique IP address. Domain Name Parts When you say https://www.google.com , there are specific parts, each with its own significance: 1. Root Level Domain : The last dot represents the root level domain. 2. Top-Level Domain (TLD) : Examples: .edu , .org , .gov , .com , .au . 3. Second-Level Domain : Examples: 4. Third-Level Domain : Examples: download.microsoft.com sales.microsoft.com Data Centers A data center is a physical facility that stores computing equipment and digital data for companies. It's like a server, but without displays—only CPUs and hardware managing incoming requests. Where are data centers located? Data centers can exist in multiple physical locations w

Mastering Network Optimization: A Comprehensive Guide

How to do Network Optimization in web

As we know, we can check website performance using different tools. If you're not aware, I highly recommend checking these notes: . In this blog, we will cover: 1. Critical Rendering Path 2. Minimizing HTTP Requests 3. Sync, Async, and Defer for Loading JavaScript 4. Avoiding Redirections 5. Resource Hinting 6. Fetch Priority 7. Early Hints 8. HTTP Upgrades (HTTP/1.1 vs. HTTP/2 vs. HTTP/3) 9. Compression: Brotli/Gzip 10. HTTP Caching & Cache Control 11. Caching Using Service Workers Critical Rendering Path you know the client-server architecture , where the client sends a request to the server, and the server responds. Now, let’s understand how HTML is displayed in the browser when the server sends it. 📄 Official Document: When the server sends HTML, the browser processes it step by step: 1. DOM Creation – The HTML is parsed, and a DOM tree is created. 2. CSSOM Creation – The browser checks for CSS, processes it, and builds the CSSOM (CSS Object Model) . 3. JavaScript Execution – JavaScript interacts with the page, often modifying the DOM or delaying rendering. 4. Rendering & Painting – The browser combines the DOM + CSSOM , applies styles, and renders the page. 🚨 Important Notes: CSS is render-blocking – It delays the page from being displayed until it's fully loaded. JavaScript is parsing-blocking – It can pause HTML processing while being executed. The first packet received from the server is 14KB in size. When someone asks what is CRP (Critical Rendering Path) , just say: The critical rendering path refers to the steps involved until a web page starts rendering in the browser. To render pages, browsers need the HTML document along with all critical resources required for rendering. For example, you can write an HTML document with scripts, CSS, and HTML, render it in the Network tab , and observe what gets loaded. Minimize Network/HTTP Requests When we make a request from the client to the server, it takes time to resolve, affecting the web page. So, we should 

HTTP Headers Methods Status Codes and Rest API Deep Dive

If you are a junior developer, a senior developer, or just a complete newbie, this is going to be a great place to learn about REST APIs—what they are, why they are used, and how they work. This is going to be a long blog, so it’s for serious readers. If you prefer short TikTok-like videos for instant information, this might not be for you. Let’s get started! What We Will Learn in This Blog What is a REST API? Why do we use it? The building blocks: Understanding URLs HTTP Methods Headers Responses Status Codes Building an application Postman usage HTTP 1/2/3 Best practices Advanced topics What is a REST API? First, let’s understand the frontend and backend in web development using the example of a kitchen. Overview The frontend is like the dining area where people eat, and the backend is like the kitchen where everything is prepared. Both are in the same place in a basic setup. Now, imagine if you were handling 100 orders, everything might still run smoothly. But if online orders suddenly increase drastically, things can get messy. Management becomes a problem. What’s the best solution? Move the kitchen to a separate place. Now, you can simply ask for what you need to serve. The kitchen prepares the food and sends it to the dining area. In this setup, there is a communicator (like a waiter) who takes the client's order and ensures the backend kitchen prepares it. If the frontend and backend are in the same place, it’s called a 1-tier architecture . If the frontend (dining area) and backend (kitchen) are in different places, it’s called a 2-tier architecture . But what happens if the kitchen also has to manage raw materials and storage? It can still get clumsy when scaling. So, the best solution is to move the storage (the database, in web terms) to another place, separate from the kitchen. Now, we have three separate blocks: the dining area (frontend), the kitchen (backend), and the storage (database). This is called a 3-tier architecture . So, coming to the API par

LLD: Infinite scroll

infinite scroll

We have seen multiple platforms like Swiggy, Zomato, and even social media apps with a feature where we keep scrolling, and content never ends , right? That’s infinite scroll —instead of a scrollbar, content keeps getting added dynamically. How It Works 1. First, we fetch a block of data and render it. 2. Detect when the user has scrolled 80% or 100% of the page. 3. Load and append more data dynamically. Problem Let's identify when the user reaches the bottom of the screen. So, we need a formula that tells us whether we have reached the bottom of the page or not, correct? If that formula returns true , it means we have reached the bottom and should call the API to load more data. Formula to Check if We Have Reached the Bottom If my window scrollY (whatever we have scrolled) + window.innerHeight is around or equal to the scrollHeight of the page: There is one substitute for this, which is pagination , and we will discuss its implementation in the next lecture. 🔗 Links 📌 🚀

LLD:  Accordion Component

LLD Accrodion Component

Accordion is a kind of controlled input used to show data. So, after confirming where the data comes from and knowing the requirements, we start the development.\ 🔗 Links Approach Here, we have accordion items and children. Since siblings are sharing data and using the same state to track which one is opened and which is not, it's better to use state lifting. That's why the parent component will keep all the state, and children will receive props based on which item is opened. This ensures that the accordion works properly. After checking the code, you will also see state lifting in action.

LLD Auto Complete Searchbar

LLD: Image Slider Component

LLD Image Slider Component

If you get this problem in an interview , first query the image data properly. Once you have the image URLs , then start the development. Requirements 1️⃣ Render an image from an array of image URLs . 2️⃣ Have two buttons to change the source of the image in the <img tag. And that's it! 👇 See the code below:

LLD Nested Comments UI

Nested Comments Nested comments are where multiple people comment on a comment, creating a hierarchical structure . This helps provide clear context on who is participating and in what way. Different platforms like Reddit, Instagram, etc., have implemented this deep comment UI feature. Reddit is one of the best examples of this. Some platforms, like YouTube , restrict the level of replies . On YouTube, you can only see one level of replies , meaning no one can reply to a replied comment —only the parent comment can have replies. But Reddit allows deep nesting , so we will implement that . Approach We render a comment , and based on its replies , we call the same component recursively . This ensures that all comments are displayed hierarchically , with each level slightly indented to indicate depth. Let me show you how the data structure looks like.

LLD:  Offset and Cursor Pagination 

LLD Offset and Cursor Pagination 

Pagination: Offset & Cursor If the backend has too much data, loading everything at once is not possible. That’s why we use pagination or infinite scroll for better access. - Infinite Scroll: The user doesn't know when the data will end. If data is sorted alphabetically (A to Z), you can’t directly jump to "Z." It has no footer and is best for live or addictive content. - Pagination: You can go to a specific page, making it ideal for admin panels. Infinite scroll is mobile-friendly, while pagination is better for structured navigation. Offset Pagination Pagination can be: 1. Server-Side Pagination 2. Frontend Pagination In server-side pagination , data is loaded page-wise. Example: If you request ?page=1 , you get 25 records. Clicking ?page=2 fetches the next 25, and so on. This is called offset pagination . If ?page=2&count=20 , it skips 40 records and fetches 41-60. - Faster initial load than frontend pagination. - Each page change requires an API call. - Example API:This fetches 10 products while skipping the first 10 records . In frontend pagination , API is called once , and data is stored locally. - No extra API calls, faster access after load. - Easy to implement, no backend logic needed. - Cons: High initial load time, heavy on the browser. Cursor Pagination Google introduced cursor pagination to solve offset pagination issues. Offset Pagination Problem - Suppose there are 12 users , and each page shows 4 users . - After fetching page 2 , new users register on page 1 . - This shifts data, causing missing records or duplicates . How Cursor Pagination Solves It - Instead of page numbers, it uses a cursor (like a timestamp or ID) to fetch data. - Example: - Cursor = 7 , Limit = 4 → Fetches 4 records after 7 . - Cursor = 9 , Limit = 6 → Fetches 6 records after 9 . - Advantages: - No duplicate or missing data. - Faster and better for real-time updates. Use offset pagination for structured data and cursor pagination for real-time updates like social media feeds. C

LLD Real time updates

I have already covered these topics please refer below links \ \

 LLD: Youtube live chat UI

Low Level Design : Component Design

Low-Level Design in Frontend In React, everything is a component. Even on a web page, whatever we see is an element, and a collection of elements forms a component—like an image component or a logo component. A composition of multiple components forms a complete web page. Components are the building blocks of a web page. Low-Level Design in Frontend Front-end low-level design refers to the detailed, component-level design process within a web application's user interface. It focuses on the specific implementation of individual features like buttons, forms, or modals, their interactions, rendering patterns, and performance considerations. So, it’s all about how code is written and how components are structured . If you are asked to design a web page with a navbar and some cards , it will look like this: Code wise it will look like this Low-Level Design in Frontend In an interview, you need to explain everything clearly to show that you have proper knowledge of how to structure and design an entire web application. You should be able to talk about : Scrollbars (horizontal, vertical) and how they work. Which libraries you will use to enhance user experience. How to design platforms like YouTube —where components will be placed, how many components will be there, and how they will interact. Your code should be: ✅ Modular ✅ Reusable ✅ Readable ✅ Testable ✅ Scalable Design a Sidebar If an interviewer asks you to design a sidebar with a toggle state , you need to explain : Where to place your components. How to manage state properly. How to structure the component for efficiency. 🚀 Component Hierarchy Before writing code , focusing on component hierarchy is a must . It helps in: ✅ Better structure ✅ Easier maintenance ✅ Less refactoring in the future Always plan your components on digital notes or a notebook before writing code. This ensures efficient design and scalability in your project. - - - SOLID Principle S: Single Responsibility Principle (SRP) This applies to com

Practical Guide Long Polling 

As the name suggests, Long Polling means something is long, delayed, or not happening instantly. First, if you haven't checked what Short Polling is, read this blog—it will take just 2 minutes to learn: ] Quick Recap of Short Polling In short polling , the system checks for data at regular intervals, useful for chat notifications or small applications where data is light, and backend or database operations are minimal. What’s Different in Long Polling? Everything is the same, except for one key difference—you don’t get a response immediately after one request. Instead, the server waits until the requested data changes before responding. What if the data never changes? Good question! If no change happens within a set timeout , the server responds with whatever data is available, even if unchanged. So, in long polling , the connection stays open until new data arrives or the timeout occurs. 🚀 4o Characteristics of Long Polling Single long-lived connection Connection stays open until new data arrives or a timeout occurs Reduces the number of API calls, lowering latency Puts load on the server due to persistent connections, leading to scaling issues Use Cases Real-time collaboration When data updates every few minutes or hours, not in seconds How It Works When the frontend (client) makes a request, it also sends an identifier (like the last updated data ID). The backend checks this against the current data. If new data is available, the server responds immediately. If no change is found, the connection stays open and waits. When the server detects a change (from any request), it sends the updated data to all waiting clients. Let's Code! Now, it's time to code! Clone this repo if you want to see it live: 🚀 Let's Understand the Code 1. Server If you look at the code below, we have an endpoint /getData . When someone hits , the frontend calls this API with an empty string the first time. The server checks for changes and responds with "2013 Congress Government" . The fro

LLD: State Managemnet and Libraries

State Managemnet and Libraries

In any web app, there are two types of layers: 1. UI Layer – This refers to any UI elements you see on the webpage. 2. Data Layer – This is where the data is defined. It serves as the actual data source for the UI application. The UI layer is controlled by the data layer. The data layer is responsible for everything happening in the app, including bugs and data changes. Why Do We Need State? Each UI element has some interactivity where data changes dynamically. To manage this changing data, we need a place to store and update it. This is where state comes in—it allows us to track and manage dynamic data in a web app. Local State Suppose your UI layer has cards like this (refer to the screenshot below). In a card, we need an image source, heading, and tags , correct? Where does this data come from? It comes from a data source , which is the data layer . In a React app, this data is usually stored in the local state of the file where the card is defined using HTML or JSX. That's why local state is needed for UI elements—it holds the dynamic data of the app to display information in the UI layer. Props Drilling Suppose you have multiple cards managed by a parent component , and each card (a child of the parent) has more children . The cards share an identical data set coming from a single source. To pass data to each card, the best approach is to store the data in the parent component and then pass it down to all child components instead of managing data individually in each card. This process— passing data from parent to child to child —is called props drilling . It follows a unidirectional data flow , which is a core concept in React. State Lifting In React, child components cannot communicate directly with each other. This is a limitation. Suppose Child 1 has some data that affects Child 2 . If data changes in Child 1 , it should also update Child 2 . But since children can’t communicate directly, how do we manage this? This is where state lifting comes in. Instead 

LLD: Multi Languages Support

Web Multi Languages Support

If we want multi-language support in our app, where users can select a language based on localization , we should load our website in the local language . This is all possible based on config-driven UI , using: 1. A JSON file or 2. Calling an API when a language is selected from the dropdown. A config-driven UI means that the UI is controlled by configuration files instead of hardcoded values. So it's all possible because of Config-Driven UI . The JSON is responsible for the web page content getting changed based on the selected language . In the same way, you can use a store to manage data where the language is updated based on the selected language. For example: Live link : https://heyashu-react.netlify.app/multi-lang-support Code Link: https://github.dev/ashumsd7/react-playground-2025/blob/main/src/pages/MultiLangSupport.jsx

What are Web Rendering Patterns

Web Rendering Patterns

In this guide, we’ll dive deep into the DOM , how content gets rendered on a web page, how data comes from the server, different rendering types, and more. Types of Rendering 1. Client-Side Rendering (CSR) 2. Server-Side Rendering (SSR) In SSR, there are two key variations: SSR (Server-Side Rendering): Content is generated on demand. SSG (Static Site Generation): Pages are pre-generated at build time. A mix of SSR and CSR is known as React Server Components (RSC) , a new concept in modern web development. Client-Side Rendering (CSR) I’ve written a simple functional component in Next.js that renders a page using CSR. You can observe how everything happens on the client side. GitHub repo: Client-Side Rendering (CSR) In CSR, the browser first loads the HTML, then fetches CSS, JavaScript, images, and API calls before rendering the page. Hydration happens in between, where event listeners are added to the DOM elements. A key issue with CSR is that LCP (Largest Contentful Paint) gets delayed since everything loads before the largest content element is painted. Hydration In client-side rendering, hydration is the process where a JavaScript framework like React takes static HTML and transforms it into an interactive web page by attaching event listeners and application state to existing DOM elements. Server-Side Rendering (SSR) In SSR, everything—HTML, API calls, JS execution, and CSS—is processed on the server. The generated HTML is sent to the browser, making the page appear faster. However, hydration still happens in the browser , where event listeners are attached to make the page interactive. In SSR, you can see the API call, but no image load, as the API is handled on the server, not on the client. We need to avoid things that take too much time on the first load. If your first page relies on props in SSR and loads after 3 seconds, LCP gets impacted, so be aware. Static Site Generation (SSG) SSG is a technique similar to SSR, but instead of generating the page dynamic

Web Routing & Protected Routes

URL is the most important part of any web app. Changing it after production is not a good idea from both a user perspective and a developer perspective. Changing it later affects the entire file structure, which is not good. Changing routes is also not good for SEO and your website ranking. So, we need to choose routes carefully and protect them wherever required. We will discuss all of that. A best practice, if you are changing routes, is to redirect from the old to the new route. However, users may not have a good experience with this approach, but there is no better solution than redirection. A Bit About History There used to be multiple-page applications (MPAs) with files like index.html , about.html , contact.html , etc. When new frameworks emerged, they started following the SPA (Single Page Application) approach. Technically, everything happens on a single page, but users see different routes without page reloads. In traditional MPAs, switching pages caused a full reload, which was not the best user experience. Over time, frameworks evolved, and they introduced routing packages, either developed by them or third-party libraries. Libraries: - For Angular, there is a different library. - For Vue.js, there is another one. - For React, the widely used library is react-router-dom . Interview Perspective If asked about routing in an interview, you should be able to talk for about five minutes on how you manage routes and their best practices. Protected Routes In any web app, some routes are accessible to all users, while others are restricted. For example: - /about and /terms can be accessed by everyone. - /billing should be restricted because it contains user-specific billing details. These restricted routes fall under protected routes , so during route design, you need to ensure they are not visible to unauthorized users. To handle protected routes, we create a wrapper in code that restricts access to non-public routes, ensuring only logged-in users can visit the

Web Socket Lets Chat

Let’s learn about WebSockets. This is another way to communicate from the client to the server, just like short polling and long polling, but it is more commonly used. It supports full-duplex communication. Now you might wonder, what is full-duplex? Full-duplex means data can be transmitted in both directions simultaneously—both parties can send data to each other without any interruption. Here, the parties are the backend and the frontend, or the client and the server. Unlike short polling and long polling, which rely on HTTP, WebSockets are a completely different technology. It works based on a single, live TCP connection, allowing continuous and bidirectional communication. The first handshake happens over an HTTP connection, which is then upgraded to WebSockets using the 101 Switching Protocols method. After this, a new connection is established, and a long-lived TCP connection is maintained. This connection stays open until it is explicitly closed from either the backend or the frontend. During this time, bidirectional data flows continuously. We will discuss all of this in detail, but first, let’s build something and see it in action. Code We’ve built a simple chat UI with an input box, a send button, and a section to display messages. However, there are two key problems we need to solve: When we type a message, it should be sent to the server. Anyone who has opened should receive the new message without reloading the page. This is the essence of a duplex connection. Messages should flow seamlessly between clients. If someone types a message, it should appear on my screen, and vice versa. How will we make this possible? / WebSockets We are going to use Socket.io , a technology designed for bidirectional and low-latency communication across platforms. You can read the documentation by . Remember, WebSocket is also available as an , but here we’ll implement this using . After installing all the dependencies, you can close the repo. Then, go to this URL: , and yo

FCP LCP CLS and INP The Core Web Vitals  ?

What are FCP LCP CLS and INP The Core Web Vitals 

So, we know why performance is important , but how do we measure changes? Where do we monitor, and how do we track metrics? Let’s dive into Performance Metrics / Core Web Vitals. Performance Metrics / Core Web Vitals Let’s discuss performance optimization , starting with Core Web Vitals . Now, the question is: What are “vitals”? In the context of the human body, vitals are the critical organs, like the brain, liver, heart, and lungs, that are necessary to maintain life. Similarly, for the web, there are some Core Web Vitals that are crucial for website performance: LCP (Largest Contentful Paint) FID (First Input Delay) CLS (Cumulative Layout Shift) These metrics help evaluate user experience and are essential for performance monitoring. We name it Core Web Vitals because there are multiple web vitals, but these three are the most important. For a web page, the journey is like this: first, it loads; then you interact with it; and finally, you consume the content, which may involve layout changes. LCP (Largest Contentful Paint) LCP simply means how much time it took to load the maximum elements of the web page . For example, as you can see in the above screenshot, if it takes 2.5 seconds to load, it is good. If it takes between 2.5 to 4 seconds , there is a need for improvement. If it takes more than 4 seconds , then there is a serious issue, and the performance is bad. Official documentation for LCP: FID (First Input Delay) FID measures the time when an element becomes interactive . The delay is counted from the time when the element is loaded until it is interactive. Under 100ms is great. 100ms to 300ms needs improvement. Above 300ms indicates poor performance. Official documentation for FID: CLS (Cumulative Layout Shift) CLS happens after the page loads when elements change their position unexpectedly. It measures the amount of layout shifting that happens and whether it's good or bad for the user experience. There are formulas and techniques to calculate CLS, whic

Server Sent Events:   A Real time communication

What are Server Sent Events  A Real time communication

Let’s talk about a modern way of real-time communication on the web: Server-Sent Events (SSE) . It’s supported by most modern browsers. So, let’s understand what this is. First, a connection is made from the client, which is basically an HTTP connection. This connection is long-lived. Whenever new data is available on the server, it is sent to the client at regular intervals. But there are a few key terms we need to understand: Long-lived connection Unidirectional connection Single HTTP connection For example, on platforms like LinkedIn or Twitter (X) , you see notifications like "New post available" without refreshing the page. Similarly, in monitoring dashboards or notification systems, the client doesn’t have to do anything—the server pushes the updates automatically. So now you might be thinking, how does this work? How does the data come through, and do we need any third-party libraries? 🤔 Let’s discuss these things. We receive data in the form of event streams . 🚀 How to Achieve This? Generally, on the server side , we expose an endpoint where we send data as a stream with the content type text/event-stream . On the frontend , we make an HTTP API call and use the EventSource API, which is natively supported by modern browsers. This allows us to listen for events sent by the server. For now, on the server, we’ve mimicked the process by sending data as an event stream every 5 seconds. 📂 GitHub Repository I’ve added a GitHub repo where you can clone the project, follow the commands, and see it in your browser. But if you really want to understand how it works—whether you run the code or not—I’ve provided the core code below. 💻 Server Code Here’s the server’s core logic: So if you see above, we have an endpoint that will be called by the client. We are setting headers to: Keep the connection alive for a long-lived connection. Set the Content-Type as text/event-stream . Disable caching with no-cache . Then, we are writing the stream , and after 5 seconds, we wr

Introduction to Web hooks

What are web hooks

This is another technique used for real-time communication, commonly used in applications without being noticed. We use multiple services, and one such service is Webhooks . In this blog, we’ll understand Webhooks using the example of payment processing—how a payment is initiated from the browser and the confirmation received. Polling vs Webhooks in Payment Processing Below is a screenshot comparing Polling and Webhooks for handling payments. Both methods are used for payment processing, but let’s first discuss Polling . Polling In the polling method, API requests are sent to a payment service to check if the payment is processed, completed, or failed. The challenge with polling is that it’s a repetitive process, constantly checking for payment status, leading to unnecessary API calls. This results in wasted resources as the server checks repeatedly, even when there’s no update, causing blocking and waiting. It’s an inefficient way to handle requests. For more on Polling, read here: . - - - Webhooks offer a more efficient solution, notifying in real-time whenever the status changes. Stay tuned to learn more about how Webhooks solve this problem - - - Webhooks Webhooks are a way for applications to communicate with each other in real-time by sending data over HTTP . They are triggered by specific events, such as a payment transaction. In this example, we provide a callback to a third-party service, which calls you back once the job is done. It’s an event-driven mechanism where webhooks know when to call and what methods to invoke, depending on the status. There is also a retry mechanism for verification and acknowledgment. Things to Remember Real-time communication Event-driven POST REST API Payload, authorization, and secret key Retry, verification, and acknowledgment Usage Notification systems Data synchronization (performing other tasks once the main work is done) Automation (For example, on GitHub, once you push to the main branch, a mail is generated for deploym

What is Config Driven UI

Config-Driven UI If a website runs globally but needs to show an ad campaign only in India, we use Config-Driven Design . This approach relies on a JSON file that defines the page layout and elements dynamically. When the page loads for the first time, an API call fetches the config file, which determines how the HTML structure and content should be displayed. The order of elements and layout is controlled by this config. 📌 Config ⇒ Defines the webpage layout 📌 Also known as Dynamic UI For example, Swiggy loads content dynamically based on the user’s location. So basically, when Swiggy loads, it calls an API that returns a config file . This config defines how the page should look, including the layout and content, based on the user's location. Result Config And based on the config , it renders the page. This is also known as Backend-Driven UI or Server-Driven UI . Importance of Config-Driven UI Customizable Multiple UI variations based on location Better UI management No frontend code changes required You need to answer this way and keep these points in mind for Config-Driven UI before designing an application.

What is Shimmer Effect

Shimmer UI is a user interface that uses a moving animation to indicate that a web page or app is loading . It is used to enhance the user experience by displaying a placeholder similar to the actual content until the real data loads. That's it. I'm not providing a specific example—you are capable enough to understand this and develop it using any library or your own CSS and HTML. Display this component until the isLoading value is true .

What is short polling! Learn with example

What is short polling!  Learn with example

Ah, I see! Let’s imagine this scenario: You’re super hungry, but the kitchen is closed. You can’t just go in and make something yourself, so you’ve ordered food, but you’re not sure when it’ll be ready. What do you do? You can’t wait forever, so you keep knocking on the kitchen door at regular intervals, hoping to see if your food is ready yet. Every few seconds, you knock again, checking if it’s time to eat. It’s not constant—just a brief check, then you wait and knock again after a short while. This is exactly like short polling. You keep checking for an update (your food being ready) at small intervals, without establishing a long connection, just knocking (or requesting) repeatedly until you get the response. In short polling, just like you keep knocking, the system repeatedly asks for data at regular intervals, waiting for a response each time. So, here we are going to discuss short polling, including its interview perspective with examples and code. So, let's not wait anymore and start learning. It is a methodology we generally use to connect the front end to the backend—a communication technique. Generally, when we need data, the front end calls an API and uses it. If you need data again, you call the API, and it provides the data after each request. But what if you need this data quickly, like loading a cricket score, checking notifications from the backend, or seeing if the delivery boy has arrived? This is called the short polling technique, where you repeatedly call or check for results in real-time and need constant updates. It is not a persistent connection but retrieves data after each call. We are not increasing or establishing a new connection over an existing one. Instead, we call the API each time, but the calling frequency is very high, happening again and again. So, to check real-time data, you can use short polling. But remember, calling an API repeatedly is not scalable. If the API has limited resources, you can use this method, but for large-s

Why GraphQL over Rest APIs

Many companies today use GraphQL . In this blog, we’ll explore what GraphQL is, its benefits, and why it’s so popular. Be patient—it’s not an Instagram Reel, but for serious learners, it’ll be worth the read. Here’s what we’ll cover: 1. What is GraphQL? 2. Why GraphQL? Its benefits 3. REST vs. GraphQL 4. Building blocks of GraphQL 5. Building a GraphQL app 6. Calling GraphQL from the client 7. Tools provided by the GraphQL community 8. Advanced features that make GraphQL powerful - - - What is GraphQL? Suppose your app needs information about continents, countries, and languages. If you’re using REST APIs, you’ll likely call multiple APIs to fetch this data and then organize it for your frontend. (Read: ) In GraphQL, however, you define exactly what data you need, and the GraphQL server acts as a middle layer to handle the request efficiently. This means the frontend gets only the data it asks for, reducing unnecessary load and improving performance. Let’s see how! More About GraphQL GraphQL stands for Graph Query Language . Imagine a graph where continents have countries, and countries have languages. It’s like a hierarchy where everything is interconnected, forming a graph structure. If you observe closely, almost everything on the planet is connected in some way, just like a graph. This is why GraphQL is so powerful—it mirrors the way data is naturally structured. It allows us to efficiently query and showcase only the specific data we need in a frontend web app. GraphQL empowers the client by giving it the flexibility and capability to request exactly what data is needed—no more, no less. The biggest benefit of GraphQL is that it allows you to fetch only the required information. For example, in the screenshot below, the client requests only firstName and lastName , and that’s exactly what the response includes. Even if additional information like userVillage or pincode is available on the server, it won’t be sent unless explicitly requested. This avoids unneces

Why is Web Performance Important?

Let's talk about web performance—what is necessary to know for interviews and what is not. We'll cover the key aspects of web performance and everything you need to understand. Here’s what we are going to learn: 1. Why performance matters 2. Performance metrics 3. Measuring performance and tools 4. How to monitor something already in production 5. How assets are accessed from the server to the client (Asset Optimization) 6. Rendering patterns: CSR, SSR, ISR, Server Components 7. Network optimization 8. React/Framework optimization 9. Build-level optimization 10. Semantic ways of writing code Why is Performance Important? For a web developer, performance is not just an interview topic but an essential skill from junior to senior levels. Understanding performance helps developers work efficiently and become experts in their field. Let’s understand why performance matters: Improving User Experience: Users shouldn’t have to wait too long or see blank screens. Productivity: In apps like admin panels, everything should work instantly without long loading times. Customer Satisfaction: A fast and smooth experience keeps users happy. Revenue & Profitability: Use cost-effective services while maintaining the best performance. Operational Costs: Efficiently handling tickets and complaint systems reduces costs. Competitive Advantage: Compete with the best websites in your industry. Google Ranking: Performance impacts search rankings. Business Metrics: Align performance improvements with business goals. Bounce Rate: Avoid users leaving after opening your site for the first time. Session Time: Increase user engagement duration. Understanding Users: Know your end users and their needs. User Device Percentage: Analyze the percentage of users on different devices and optimize your website accordingly, especially for mobile. For example, you can check real-time statistics on . For your website, you can use tools like Google Analytics , Plausible Microsoft Clarity , and other similar 

 Deep dive into v8 JS Engine

 E-8 Deep dive into v8 JS Engine

Now, let's focus on one of Node.js's best friends, the V8 Engine. It takes the code and runs it. Before doing anything, I just want you to read this carefully. Alright, let’s move on to the session now. When the V8 engine processes the code, it happens in a few steps: 1. Tokenizing/Lexing : Your code is broken down into smaller tokens. You can explore this further by visiting . This is more on the academic side, so if you're interested in the details, you can check out the subject of Compiler Design (or just take a look at the screenshot provided). Also, read this article for more insight: . Interpreted Language vs. Compiled Language An interpreter reads and executes code line by line, while a compiler reads the entire code, compiles it, and then passes it to the engine for execution. JavaScript uses both a compiler and an interpreter to run the code, along with several optimizations like JIT (Just-in-Time Compiler) . I highly recommend reading to dive deeper into these concepts. I am covering digital notes of these books seeding soon in the garden . The compiler used by V8 is called Turbofan , and its job is to optimize the code so that it runs faster, especially if the same section of code is executed multiple times. Also, remember that Garbage Collection happens in parallel to free up memory. Below, I’ve listed the names of some garbage collectors used in the V8 engine—make sure to look them up and read about them. How Byte code looks like ? https://medium.com/dailyjs/understanding-v8s-bytecode-317d46c94775 - - - Search These Keywords 1. Turbofan 2. Ignition Interpreter 3. Bytecode 4. Optimized Code 5. JIT (Just-in-Time Compilation) 6. Deoptimization in Compilation 7. Inline Caching 8. Copy Elision 9. Orinoco Garbage Collector 10. Oilpan Garbage Collector 11. MCompact Garbage Collector 12. Scavenger Garbage Collector 13. Mark-and-Sweep Algorithm 14. Questions 1. How does the compiler optimize the code, and in what situations does it fail to optimize? 2. Research 

Welcome to the course

E0 Welcome to NamasteNodeJS

About the Creator (The Boss, Akshay Saini) Akshay started building websites in the 7th or 8th grade and has since worked at Paytm, Uber, Lendingkart, and multiple startups, where he learned how to develop large-scale projects. He even started a startup while still in college. Throughout his career, one of the key factors that has helped him succeed is being curious. He believes that having curiosity and the desire to learn new things will help you continually improve. He encourages you to ask questions, as this will significantly benefit your career. Akshay urges you to maintain this curiosity during the course as well. Requests from the Creator Before Starting the Course 1. Keep taking notes, either digitally or in a notebook, as you follow along with the videos. 2. Practice the concepts as you watch the videos. 3. You can write notes in Notion, Evernote, or on your personal website (this suggestion is from me, not the creator). 4. Focus during the videos. Silence your phones. 5. Plan and schedule your course, and stick to it. 6. Watch one episode, then take a break. Try to explore the concepts on the internet, implement them on your system, and then move on to the next one. 7. Join the Discord community (the link is available within the course). 8. Ask questions and help each other out. 9. Make friends. 10. Refer each other in your respective careers. 11. Give your full attention, focus, and practice to this course. Okay… Let’s get started… Here we go 😄

Introduction to NodeJs

E1:  History of node js in depth

Watch its Free What is Node JS https://nodejs.org/en Its a JS runtime built on top of chrome v8 JS Engine. Node JS is Cross Platform ( Can run on different type of systems) , Open Source: Code is Open and Managed by Open JS Foundation ( Organization) and it executes JavaScript outside the web browsers . Node JS has an event driven architecture ( will discuss later) and capable of Asynchronous / non blocking I/O History of NodeJS 2009: Node JS born First version came in 2009 developed by : 2010 : NPM born NPM came in the picture ( package manager ) Anyone can do a work and post in NPM for public use 2011: windows came initially Node JS was developed it was just for Mac OS and Linux in 2011 windows support came and ( Joyent + Microsoft ) they given node js support for windows 2012: NPM NodeJS friendship Joyent said they will not be managing Node JS now Isaac Z. Schlueter took over it and he was the creator of the NPM 2014: Fedor Indutny forked and made IO.js Because When development was slow nowadays because Joyent has left so people was started contributing it was one of those Now everything was scattered because two versions of Node Js was running 2015 ( Sep) : Node.js Foundation Came Node.js Foundation came and resolved all conflicts between io.js and others a legal foundation started managing this 2019 : git merge two-foundations There was two foundations and both are merged Now Open JS foundation is managing Node JS Feedback Hey your feedback si required for me , please give a star 🌟 if you liked the blog if you want to contribute in it please feel free to fork , You can see github link on top right corner of top bar or I am waiting for your feedback, See you in next episode, Thanks 👋🏻

Microservices vs Monolith - How to Build a Project

e1: Microservices vs Monolith How to Build a Project

Do you know about SDLC, also known as the Waterfall Model? It stands for Software Development Lifecycle, a process that a project follows from start to finish. There are various models, and Waterfall is one of them. Here's a breakdown: SDLC (Waterfall Model) 1. Requirement : Managed by Project Managers, CTO/CEO, or senior staff in smaller companies. They collaborate with designers to define requirements. 2. Design : Engineers or tech leads handle high-level and low-level designs. 3. Development : Done by developers. 4. Testing : Managed by QA, with test cases sometimes written by developers. 5. Deployment : Managed by DevOps or senior developers. 6. Maintenance : Continuous process if new requirements arise, repeating the cycle. Monolith vs. Microservices Monolith: Monolith architecture is like building everything together in one big project. Imagine when you make a website; you write HTML, CSS, and JavaScript, then install packages, which brings package.json . You’ll add backend, database, and any services like sending emails within this same project. So, everything is in one repo , from frontend to backend and database. It’s like all developers working on the same large codebase —the monorepo . All functionalities are inside this one project. Microservices: Now, let’s talk about microservices. First, understand that a service is a separate project that does a specific thing. For example, if you need to send an email, you can have a microservice for email notifications . This microservice will work as a standalone project, not part of the main app. So, in this approach, instead of everything living in one big project like monolith, you have many small independent projects (microservices) handling individual tasks. This helps when scaling or maintaining projects, and services can run independently . So, whether to go for monolith or microservices depends on your project requirements. What to use? Both Monolith and Microservices architectures come with their own pros

LibUV Thread Pool: Deep Dive

E10: Thread Pools

Welcome back! If you haven’t read the previous blog about the two friends, go and check that out first because things are getting more interesting. We’ve received an official FIR against Node.js, and when Node.js faced trouble, it called in its two best friends for help. One of them, V8, was already investigated in our last episode. Now, it’s time to bring in the second friend: Libuv . Libuv is full of secrets, and this investigation won’t be easy. There are many things we don’t know yet. So, what are we waiting for? Let’s head to the police station and question Libuv until we find the answers. It’s time to close this case for Season 1! We’ve already talked a lot about Libuv, but there are still a few questions we need answers to. Specifically, we haven't looked at the idle , prepare , and pending callback phases These are important, and today, we’re going to clear them up. Ready, detectives? Let’s dive in and solve these mysteries. You can also check the official Node.js documentation here: https://nodejs.org/en/learn/asynchronous-work/event-loop-timers-and-nexttick Pending callback As we know, all file and connection-related tasks are handled in the poll phase , right? But sometimes, there’s a possibility of a process getting stuck in the poll phase. This could happen for various reasons, like recursive calls, errors, or a large number of requests, which may cause delays. To avoid such situations, if there are any pending callbacks , they get executed in the pending callback phase . This phase is not super important in everyday work, but academically, you should be aware of it. If you have the time, go ahead and read more about it. Essentially, it executes I/O callbacks that were deferred to the next iteration of the event loop. idle/prepare In this phase, checks take place within the event loop, and it is performed internally. As I mentioned earlier, this phase is more for academic understanding. If you're interested, go ahead and read the . Keep in mind that the

Create a http server using Node JS

e11: Create a node js server

We covered a lot of theory, investigating Node.js from its beginnings to 2025, and now it’s time to take action. But be patient — we'll start with some theory to set the context of what a server is, and then write something. Today, your VS Code or code editor won’t be alone. Node.js will be part of your code base, and we will write something. So, what are we waiting for? Let's begin! We'll read about servers, what development means, what a proxy server is, and what DNS is. Then, we’ll create a server What is Server? When someone says "deploy to the server," it means we're referring to the hardware where the operating system and processors are. It means we're running our application, the one we've coded, on that machine. This hardware allows us to save something to the system and retrieve it. That’s what a server does. Deployment is all about saving and running our code on that hardware machine Can we use our systme as server? The answer is yes, but the question is: will you be able to provide what a server from AWS offers? No, because you have limited RAM, limited memory, and no 24/7 access. So, while it's possible, it’s not practical. AWS and other servers run 24/7, have large-scale RAM and memory, and their processors are very powerful. Internet connection is also a concern. IP Address A system can be identified by one address. For your computer, this address might change, but for servers, it does not. Servers have a dedicated IP address that never changes, which is why they are called servers. They are designed to serve, and they also have multiple hardware servers running in different locations. For example, when you create a Firebase server, it will ask where you want your server, such as Singapore. To create a real-time database server, you just click, and you’ll be asked to choose the physical location where you want to connect. Node Server What we do now and in the future is create servers that can handle requests from the outside world. That’s what Node.js 

Databases and mongoDB

E12: Databases and mongoDB

In computer science, a database is an organized collection of data, a structured way of collecting and storing information. It is based on the DBMS (Database Management System), which means you can create, delete, edit, and retrieve data. The DBMS software manages everything, including the storage. Types of Databases 1. Relational Databases (MySQL, PostgreSQL) 2. NoSQL Databases (MongoDB) 3. In-Memory Databases (Redis) 4. Distributed Databases (CockroachDB) 5. Time-Series Databases (InfluxDB) 6. Object-Oriented Databases (db40) 7. Graph Databases (Neo4J) 8. Hierarchical Databases (IBM IMS) 9. Network Databases (IDMS) 10. Cloud Databases (Amazon RDS) 11. Multi Model Database I’m not diving deeper into this. You can read more by searching on the internet. RDBMS: Relational Databases (MySQL, PostgreSQL) In 1970, E.F. Codd introduced Codd's 12 rules (actually 13, because they start from 0 to 12). He designed to define what qualifies as a relational database. If a database follows these 12 rules, it falls into the category of a relational database. There are multiple databases that don’t strictly follow all these rules but are still called relational databases. MySQL and PostgreSQL are the most commonly used in this category. History of MySQL MySQL was created by Michael Widenius . He has three daughters: My, Max, and Maria. My is the name of his eldest daughter, which is how MySQL got its name. Later, he created more databases, like MaxDB and MariaDB . MariaDB was a fork of MySQL. After some time, Sun Microsystems acquired MySQL, and later, Oracle acquired Sun Microsystems, so now Oracle manages MySQL. This isn't typically asked in interviews, but it's good to know for your curiosity! Postgres Another scientist, Michael Stonebraker , was working on a project called Ingres at the University of California. He left the university around 1985 and started a new project called Post Ingres . This project focused on SQL (Structured Query Language), and eventually, it evolved in

Create MongoDB database using Node JS

e13: create mongo db database

Okay, it’s time to create a database. Go to the database website by clicking here. There are two ways to install the database: 1. Download the file and install it : Remember, MongoDB is cross-platform, so it works on Windows, Linux, and everywhere. 2. Use a managed database service : You can ask MongoDB to host and manage your data. There are also two versions of MongoDB: Community version : This is free and available for developers to use. Enterprise version : This is for large companies, and you need to pay for it. This version corrects the grammar while keeping the content clear and simple. Let me know if you'd like further adjustments! Self-Managed vs Mongo-Managed With self-managed , you install, back up, and host everything yourself — that’s what self-manage means. But let's use the second approach where MongoDB manages everything . So, in this blog or notes (whatever you want to call it), we are using the MongoDB Managed version . If you want to know how to manage it yourself, plant a seed by writing a blog here. You can get started by . Installing MongoDB After clicking on download or installing Atlas , you’ll be asked to fill out a form with 2-3 fields. Fill that in, then proceed to the next step. Since this database is managed by MongoDB, they might adjust the setup based on your requirements. Rename your cluster — it’s currently named Cluster 0 , but you’ll need to identify it later. Click on free MO — remember in the last blog we learned that the server is hosted in a location? Check if Mumbai is written there. After clicking Create Deployment , a dialog will appear. Copy your username and password. You can create multiple users or just click on the Create a Connection Method button, where you can find your cluster name. As you can see in the screenshot, your cluster is created. Now, to use it, click on Connect . Remember, the website interface might look different depending on when you're using it, but the same keywords and steps apply consistently. Aft