An array like ["MacBook", 16, 2026] doesn't tell us much. What does the 16 mean? RAM? Screen size? Price in thousands?

That is where Objects come to the rescue!

1. Why Objects? The Problem with Arrays

Before we learn what objects are, let's understand the problem they solve. Imagine you're building a user profile for a website. You might start with an array:

// What does each value mean?? 
const user = ["Prakash", 20, "Rajasthan", true, "developer"];

// To get the profession, you need to remember it's at index 4
console.log(user[4]); // "developer" — but why 4? Who knows!

This is a nightmare. Index numbers are meaningless. If you add a new field in the middle, every index after it breaks. Your code becomes impossible to read and maintain.

Now here's the same data as an object:

// Crystal clear — no guessing!
const user = {
  name: "Prakash",
  age: 20,
  state: "Rajasthan",
  isLoggedIn: true,
  profession: "developer"
};

// Now it's obvious what you're getting
console.log(user.profession); // "developer" — perfectly readable!

💡 Rule of Thumb: Use an Array when you have a list of similar items (e.g., a list of product names). Use an Object when you're describing a single thing with multiple different attributes.

2. What Are Objects? The Key-Value Structure

In JavaScript, an object is a standalone entity that holds related data together. Think of it like a real-world object. A car has a color, a brand, and a top speed. In code, an object allows us to group these related variables into one neat package.

Objects work on a key-value pair system:

• Key → The name/label of the property (e.g., name)

• Value → The data assigned to that label (e.g., "Prakash")

Think of it like filling out a form:

Values can be any data type - strings, numbers, booleans, arrays, or even other objects.

3. Creating an Object

The most common way to create an object is using Object Literals the curly braces {}.

// A real-world example: A Person Object
const person = {
  name: "Prakash",
  age: 20,
  state: "Rajasthan"
};

Each key-value pair is separated by a comma. The key and value are separated by a colon.

You might also see the new Object() syntax in older code:

// The verbose way — avoid this in modern JS
const person = new Object();
person.name = "Prakash";
person.age = 20;
person.state = "Rajasthan";

Best Practice: Always use Object Literals {}. They're shorter, more readable, and the standard in modern JavaScript.

4. Accessing Properties — Two Ways

Once you have an object, you need to read its data. JavaScript gives you two ways to do this.

A. Dot Notation (Most Common)

Use this when you know the property name upfront. Clean and readable.

const person = {
  name: "Prakash",
  age: 20,
  state: "Rajasthan",
  skills: ["JavaScript", "React", "Node.js"]
};

console.log(person.name);      // "Prakash"
console.log(person.age);       // 20
console.log(person.skills);    // ["JavaScript", "React", "Node.js"]

// You can chain it to access items inside an array!
console.log(person.skills[0]); // "JavaScript"

B. Bracket Notation

Use this when the key has a space, starts with a number, or when you're using a variable to look up a key dynamically.

const profile = {
  name: "Prakash",
  age: 20,
  "full name": "Prakash Kumar",  // key with a SPACE
  "2024score": 95                // key starting with a number
};

// CASE 1: Key has a space (dot notation would crash here!)
console.log(profile["full name"]); // "Prakash Kumar"
// profile.full name ← this would be a SYNTAX ERROR ❌

// CASE 2: Dynamic access with a variable
const query = "age";
console.log(profile[query]);       // 20 — reads the variable, not literal "query"

// CASE 3: Looping with bracket notation
const keys = ["name", "age"];
keys.forEach(key => {
  console.log(profile[key]); // "Prakash", then 20
});

Pro Tip: Bracket notation is incredibly useful when building search features or filters — any time the key is determined at runtime (from user input, for example).

5. Updating, Adding & Deleting Properties

Objects are mutable - you can freely change them after creation. Even if you declare the object with const, its properties can still be modified.

Updating a Property

const person = {
  name: "Prakash",
  age: 20,
  state: "Rajasthan"
};

person.age = 21; // Prakash just had a birthday! 🎂
console.log(person.age); // 21

Adding a New Property

person.isStudent = true;
person.college = "IIT Jodhpur";

console.log(person);
// { name: "Prakash", age: 21, state: "Rajasthan", isStudent: true, college: "IIT Jodhpur" }

Deleting a Property

delete person.state;

console.log(person.state); // undefined

Checking if a Property Exists

console.log("isStudent" in person); // true
console.log("state" in person);     // false — we deleted it!

Why const doesn't freeze objects: const prevents you from doing person = {} (reassigning the variable). But it doesn't stop you from modifying what's inside the object. Use Object.freeze(person) if you truly want an immutable object.

6. Array vs Object — What's the Difference?

This trips up a lot of beginners. Here's the definitive breakdown:

// Use ARRAY when all items are the same kind of thing
const students = ["Prakash", "Riya", "Arjun", "Meera"];
const scores   = [85, 92, 78, 96];

// Use OBJECT when describing one specific entity
const student = {
  name: "Prakash",
  score: 85,
  grade: "A",
  passed: true
};

// COMBINE BOTH: Array of Objects — an extremely common pattern!
const classroom = [
  { name: "Prakash", score: 85, grade: "A"  },
  { name: "Riya",    score: 92, grade: "A+" },
  { name: "Arjun",   score: 78, grade: "B+" }
];

// Access: first student's name
console.log(classroom[0].name);  // "Prakash"
console.log(classroom[1].grade); // "A+"

Array of Objects is one of the most common patterns in real-world JavaScript — you'll see this in every API response, database query result, and React component.

7. Looping Through an Object

To walk through every key-value pair in an object, we use the for...in loop.

const person = {
  name: "Prakash",
  age: 21,
  isStudent: true,
  college: "IIT Jodhpur"
};

// for...in gives you each KEY one at a time
for (let key in person) {
  console.log(key + ": " + person[key]);
}

// Output:
// name: Prakash
// age: 21
// isStudent: true
// college: IIT Jodhpur

Object Utility Methods

JavaScript also provides three handy built-in methods to extract parts of an object as arrays:

const person = { name: "Prakash", age: 21, college: "IIT Jodhpur" };

// Object.keys() → array of all keys
console.log(Object.keys(person));
// ["name", "age", "college"]

// Object.values() → array of all values
console.log(Object.values(person));
// ["Prakash", 21, "IIT Jodhpur"]

// Object.entries() → array of [key, value] pairs
console.log(Object.entries(person));
// [["name","Prakash"], ["age",21], ["college","IIT Jodhpur"]]

// Practical use: loop with destructuring
for (const [key, value] of Object.entries(person)) {
  console.log(`\({key} → \){value}`);
}

8. Nested Objects & Methods

Objects can contain other objects inside them — this is called nesting. Objects can also hold functions as values — these are called methods.

Nested Objects

const student = {
  name: "Prakash",
  age: 21,

  // Nested object: address lives inside student
  address: {
    city: "Jodhpur",
    state: "Rajasthan",
    pincode: "342001"
  },

  // Array inside an object
  skills: ["JavaScript", "React", "Node.js"]
};

// Access nested properties: chain the dots
console.log(student.address.city);   // "Jodhpur"
console.log(student.address.state);  // "Rajasthan"
console.log(student.skills[0]);      // "JavaScript"

// Update a nested property
student.address.city = "Jaipur"; // Prakash moved cities!

Methods — Functions Inside Objects

const calculator = {
  brand: "Casio",

  // Functions stored as values are called "methods"
  add: function(a, b) {
    return a + b;
  },

  // Modern shorthand (preferred)
  multiply(a, b) {
    return a * b;
  },

  subtract(a, b) {
    return a - b;
  }
};

console.log(calculator.add(10, 5));      // 15
console.log(calculator.multiply(4, 3));  // 12
console.log(calculator.subtract(9, 4));  // 5

9. Real-World Example - E-Commerce Product

Let's put everything together with the kind of data structure you'd actually use when building an e-commerce site.

const product = {
  id: "MBP-001",
  name: "MacBook Pro 14",
  brand: "Apple",
  price: 199999,       // in rupees ₹
  inStock: true,
  rating: 4.8,
  reviewCount: 2341,

  // Nested object
  specs: {
    chip: "Apple M3 Pro",
    ram: 18,
    storage: 512,
    display: "14.2-inch Liquid Retina XDR",
    battery: "22 hours"
  },

  // Array of strings
  colors: ["Space Black", "Silver"],

  // Array of objects
  reviews: [
    { user: "Riya_Dev",  stars: 5, comment: "Incredible performance!" },
    { user: "TechArjun", stars: 4, comment: "Great but expensive" }
  ],

  // Methods
  getDescription() {
    return `\({this.name} by \){this.brand} — ₹${this.price.toLocaleString()}`;
  },

  isAffordable(budget) {
    return this.price <= budget;
  }
};

// Reading various properties
console.log(product.name);              // "MacBook Pro 14"
console.log(product.specs.ram);         // 18
console.log(product.colors[0]);         // "Space Black"
console.log(product.reviews[0].user);   // "Riya_Dev"
console.log(product.reviews[0].stars);  // 5

// Calling methods
console.log(product.getDescription());
// "MacBook Pro 14 by Apple — ₹1,99,999"

console.log(product.isAffordable(150000)); // false
console.log(product.isAffordable(250000)); // true

// Looping through specs
console.log("=== Tech Specs ===");
for (let spec in product.specs) {
  console.log(`  \({spec}: \){product.specs[spec]}`);
}
// chip: Apple M3 Pro
// ram: 18
// storage: 512
// display: 14.2-inch Liquid Retina XDR
// battery: 22 hours

This is almost exactly the kind of data you'd receive from a backend API. The ability to navigate nested objects, loop through properties, and call methods is a daily reality as a JavaScript developer.

Where You'll Use Objects Every Day

• User Auth & Profiles — { id, name, email, role, avatar }

• Shopping Cart — { productId, qty, price, discount }

• API Responses — Every REST API returns JSON, which is just objects

• Config & Settings — { theme, language, notifications }

• React State & Props — Almost always objects under the hood

Conclusion

Objects are the backbone of JavaScript. They make your data readable, searchable, and organized. By mastering:

• Key-Value pairs

• Dot and Bracket notation

• Updating, Adding, Deleting

• Nested objects and methods

• Looping with for...in and Object.entries()

I write articles on blog.prakashtsx.com and also post development-related content on:

• Twitter / X

• LinkedIn

• Node.js is single-threaded

• Node.js is non-blocking

• Node.js uses an Event Loop

But what actually happens inside Node.js when we run a program?

What happens when we execute:

node index.js

How does Node.js handle:

• File reading

• API calls

• Timers

• Database queries

while still remaining fast and scalable?

To understand this, we must understand three core components of Node.js:

1. V8 Engine – executes JavaScript

2. libuv – handles asynchronous operations

3. Event Loop – coordinates everything

Let’s explore them step by step.

1. What Exactly is Node.js?

Before diving deeper, we must clear one important confusion.

Node.js is NOT a programming language.

Node.js is a JavaScript runtime environment.

This means Node.js provides everything required to run JavaScript outside the browser.

A Node.js runtime contains multiple components:

• JavaScript Engine (V8)

• Event Loop

• libuv threadpool

• OS bindings

• memory management

• networking APIs

In simple terms:

2. Understanding Runtime with a Simple Analogy

Similarly:

Your Code → JavaScript

Player → Node.js Runtime

Node.js provides the environment required to run JavaScript.

3. What is a JavaScript Engine?

A JavaScript engine is a program that executes JavaScript code. Most engines today are built with similar core components:

• Parser: Transforms source code into an Abstract Syntax Tree (AST)

• Interpreter: Executes the code line-by-line initially

• JIT Compiler: Compiles hot code paths into optimized machine code

• Garbage Collector: Reclaims memory no longer in use

❊ Key JavaScript Engines

4. The V8 Engine – The Heart of Node.js

V8 is Google’s open source high-performance JavaScript and WebAssembly engine, written in C++.

At the core of Node.js lies the V8 JavaScript Engine.

V8 was developed by Google and is also used in Chrome.

Its job is simple:

Convert JavaScript code into machine code so the computer can execute it.

❊ What V8 Actually Does

V8 performs several critical tasks:

• Parses JavaScript

• Compiles JavaScript into machine code

• Executes code

• Manages memory

• Runs garbage collection

• Maintains the call stack

Workflow

1. Parsing: JavaScript is parsed into an AST.

2. Ignition (Interpreter): Executes unoptimized bytecode quickly.

3. Turbofan (JIT Compiler): Optimizes frequently executed code into fast machine code.

Example

function square(n) {
  return n * n;
}

console.log(square(5)); // 25

• Initially run by Ignition

• Optimized by Turbofan if called repeatedly

5. Call Stack – Where Code Executes

Inside the V8 engine there is a Call Stack.

The call stack keeps track of which function is currently executing.

Example:

function greet() {
  sayHello();
}

function sayHello() {
  console.log("Hello");
}

greet();

Execution order:

Call Stack

 console.log 
 sayHello()  
 greet()     
 global()    

Functions enter the stack when called and leave after execution.

This is why JavaScript is called single-threaded execution.

Only one function executes at a time in the call stack.

6. The Problem with Synchronous Code

Imagine Node.js handled everything synchronously.

Example:

const fs = require("fs");

const data = fs.readFileSync("bigFile.txt");
console.log(data);

If the file takes 5 seconds to read, the entire program stops.

Nothing else runs.

This is called blocking behavior.

Node.js solves this problem using asynchronous architecture.

And that is where libuv comes in.

7. libuv – The Hidden Power of Node.js

libuv is a C library used internally by Node.js.

Its job is to handle asynchronous operations.

Examples:

• File system operations

• DNS lookups

• compression

• cryptography

• background tasks

❊ libuv Threadpool

libuv provides a threadpool.

By default:

Threadpool Size = 4 threads

These threads run heavy operations in the background.

Example:

Read File
Hash Password
Compress Data
Write File

These tasks are executed without blocking the main thread.

You can even change the threadpool size:

process.env.UV_THREADPOOL_SIZE = 8;

8. Event Loop – The Coordinator

The Event Loop is the central coordinator of Node.js.

It constantly checks:

Is the call stack empty?

If the stack is empty, it pulls tasks from queues and executes them.

❊ Simple Event Loop Flow

This loop runs continuously while the Node.js process is alive.

❊ Example to Understand Event Loop

console.log("Start");

setTimeout(() => {
  console.log("Timer finished");
}, 0);

console.log("End");

Output:

Start
End
Timer finished

❊ Step-by-Step Execution

Step 1

console.log("Start")

Executed immediately.

Step 2

setTimeout(...)

Timer is handled by libuv timers system.

Callback waits in queue.

Step 3

console.log("End")

Runs immediately.

Step 4

Timer finishes → callback enters queue.

Step 5

Event loop pushes callback to stack.

Timer finished

❊ Event Loop Phases (Advanced)

Node.js Event Loop has multiple phases.

Order:

1 Timers
2 Pending Callbacks
3 Idle / Prepare
4 Poll
5 Check
6 Close Callbacks

Examples:

setTimeout → Timers phase
I/O callbacks → Poll phase
setImmediate → Check phase

This is how Node.js schedules asynchronous work efficiently.

❊ Complete Node.js Architecture

Here is the complete flow:

Your JavaScript Code
        ↓
V8 Engine executes synchronous code
        ↓
Async operations detected
        ↓
libuv handles background tasks
        ↓
Callbacks added to queues
        ↓
Event Loop picks them
        ↓
Callback executed by V8

❊ Real-World Analogy (Restaurant System)

Imagine a restaurant.

Actors:

Restaurant → Node.js Runtime
Waiter → Event Loop
Manager → V8 Engine
Chefs → libuv Threadpool
Customers → Users
Food Orders → JavaScript Tasks

Workflow:

1️⃣ Customer places order

2️⃣ Waiter forwards order to chefs

3️⃣ Chefs cook food in kitchen

4️⃣ Waiter serves when ready

The waiter never cooks.

Similarly:

Event Loop does NOT execute code
V8 executes the code

The event loop simply manages tasks.

❊ Conclusion

Whenever you run Node.js, remember this pipeline:

JavaScript Code
       ↓
V8 Engine executes code
       ↓
Async tasks sent to libuv
       ↓
Callbacks stored in queues
       ↓
Event Loop pushes callbacks
       ↓
V8 executes them

This architecture is the reason Node.js can handle thousands of concurrent connections efficiently.

❊ Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

Instead of writing scattered functions and variables, OOP helps us organize code into objects and classes.

JavaScript supports OOP concepts, making code more reusable, modular, and easier to maintain.

❊ What is Object-Oriented Programming?

⤑ Object-Oriented Programming is a way of writing code where we create objects that represent real-world entities.

These objects contain:

• Properties → data about the object
• Methods → actions the object can perform

❊ Example: Car Object

Instead of listing properties and methods separately, we can visualize a Car object that contains both data (properties) and behavior (methods).

In this example, the Car object has:

Properties (data)
• brand
• color
• speed

Methods (behavior)
• start()
• stop()
• accelerate()

Instead of writing separate variables and functions, Object-Oriented Programming groups them together inside a single object.

❊ Real World Analogy: Blueprint → Objects

Think of a class as a blueprint.

Example:

Blueprint → Car Design
Object → Actual Car

One blueprint can create many cars.

❊ What is a Class in JavaScript?

⤑ A class is a template used to create objects.

It defines the properties and methods that objects will have.

Example:

class Car {
  constructor(brand, color) {
    this.brand = brand;
    this.color = color;
  }

  start() {
    console.log(this.brand + " car started");
  }
}

Here:

Car → class
brand, color → properties
start() → method

❊ Creating Objects from a Class

⤑ Once we define a class, we can create objects using the new keyword.

Example:

const car1 = new Car("Toyota", "Red");
const car2 = new Car("BMW", "Black");

car1.start();
car2.start();

Output:

Toyota car started
BMW car started

Each object has its own data but shares the same structure.

❊ Constructor Method

⤑ The constructor() method is a special method used to initialize object properties.

It automatically runs when a new object is created.

Example:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const p1 = new Person("Rahul", 22);
console.log(p1.name);

Output:

Rahul

The constructor helps us assign values when creating objects.

❊ Methods Inside a Class

⤑ Methods define the behavior of objects.

Example:

class Dog {
  constructor(name) {
    this.name = name;
  }

  bark() {
    console.log(this.name + " is barking");
  }
}

const dog1 = new Dog("Rocky");
dog1.bark();

Output:

Rocky is barking

Methods allow objects to perform actions.

❊ Basic Idea of Encapsulation

⤑ Encapsulation means bundling data and methods together inside a class.

It helps protect data and organize code.

Example:

class BankAccount {
  constructor(balance) {
    this.balance = balance;
  }

  deposit(amount) {
    this.balance += amount;
  }

  getBalance() {
    return this.balance;
  }
}

Here:

balance → data
deposit() → modifies data
getBalance() → accesses data

All related functionality is inside the class.

❊ Why Use Object-Oriented Programming?

OOP helps developers:

• Organize code better
• Reuse code easily
• Reduce duplication
• Model real-world systems
• Maintain large applications

Many modern frameworks and applications rely on OOP concepts.

❊ Conclusion

⤑ Object-Oriented Programming is an important concept in JavaScript that helps structure code effectively.

In this blog we learned:

• What Object-Oriented Programming means
• Blueprint → Object analogy
• What classes are in JavaScript
• Creating objects using classes
• Constructor methods
• Methods inside classes
• Basic idea of encapsulation

Understanding OOP will help you write clean, scalable, and maintainable JavaScript applications.

❊ Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

Imagine a normal day in your life.

You wake up and think:

• If it is morning, I will brush my teeth

• If it is Sunday, I will rest

• If it is Monday, I will go to work

Your brain is constantly making decisions.

Programming works the same way.

A computer program also needs to decide:

• Should this code run?

• Or should another code run?

• Or should it skip something?

This process is called Control Flow.

Definition

Control Flow determines the order in which instructions are executed in a program.

Without control flow, a program would execute every line from top to bottom with no decision-making.

❊Example Without Control Flow

console.log("Wake up");
console.log("Go to gym");
console.log("Go to office");
console.log("Sleep");

The program will run every line.

But what if today is Sunday?

You might not want to go to the office.

This is where control flow statements come into play.

❊ Types of Control Flow Statements

The most common ones are:

1. if statement

2. if-else statement

3. else-if ladder

4. switch statement

These help programs make decisions.

2. The if Statement

The if statement executes code only if a condition is true.

Syntax

if (condition) {
    // code runs if condition is true
}

❊ Real Life Example

Imagine a school rule:

If a student’s marks are greater than 40, they pass.

let marks = 50;

if (marks > 40) {
  console.log("You passed the exam");
}

Step-by-Step Execution

1. Program reads the value of marks

2. It checks the condition marks > 40

3. If the condition is true, the code inside {} runs

4. If the condition is false, the program skips it

Example Output

You passed the exam

When the condition is false

let marks = 30;

if (marks > 40) {
  console.log("You passed");
}

Output:

(no output)

Because the condition is false.

3. The if-else Statement

Sometimes we want the program to do something else if the condition is false.

That is where if-else is used.

Syntax

if (condition) {
   // runs if condition is true
} else {
   // runs if condition is false
}

❊ Real Life Example

At a movie theatre:

• If age ≥ 18 → Allowed

• Else → Not allowed

Example

let age = 16;

if (age >= 18) {
  console.log("You can watch the movie");
} else {
  console.log("You are not allowed");
}

❊ Step-by-Step Execution

1. Program checks age >= 18

2. If true → first block runs

3. If false → else block runs

Output

You are not allowed

4. The Else If Ladder

Sometimes there are multiple conditions.

Example: grading system

This is where else-if ladder is useful.

Syntax

if (condition1) {

} else if (condition2) {

} else if (condition3) {

} else {

}

Example

let marks = 82;

if (marks >= 90) {
  console.log("Grade A");
} 
else if (marks >= 75) {
  console.log("Grade B");
}
else if (marks >= 50) {
  console.log("Grade C");
}
else {
  console.log("Fail");
}

⤑ Step-by-Step Execution

Marks = 82

1. Check marks >= 90 → false

2. Check marks >= 75 → true

3. Program prints Grade B

4. Remaining conditions are skipped

Output

Grade B

5. The Switch Statement

The switch statement is used when there are many possible fixed values.

It is commonly used for:

• menus

• days of week

• months

• options

⤑ Syntax

switch(expression) {

  case value1:
    code
    break;

  case value2:
    code
    break;

  default:
    code
}

⤑ Example: Day of Week

let day = 3;

switch(day) {

  case 1:
    console.log("Monday");
    break;

  case 2:
    console.log("Tuesday");
    break;

  case 3:
    console.log("Wednesday");
    break;

  default:
    console.log("Invalid day");
}

⤑ Step-by-Step Execution

1. day = 3

2. Switch checks cases

3. case 3 matches

4. Prints Wednesday

❊ Understanding break in Switch

break stops execution.

Without break, the program continues executing the next cases.

⤑ Example Without break

let day = 2;

switch(day) {

  case 1:
    console.log("Monday");

  case 2:
    console.log("Tuesday");

  case 3:
    console.log("Wednesday");
}

Output

Tuesday
Wednesday

This happens because there is no break.

6. When to Use Switch vs If-Else

⤑ Use if-else when:

• conditions are ranges

Example:

marks > 90
age >= 18
temperature > 30

⤑ Use switch when:

• checking specific values

Example:

day = Monday
role = admin
menu option = 1

⤑ Example

Good for if-else

if (marks > 90)

Good for switch

switch(day)

❊ Comparison Table

❊ Conclusion

Control flow is one of the most fundamental concepts in programming.

It allows programs to:

• make decisions

• run different code paths

• handle real-world logic

The most important control flow statements are:

• if

• if-else

• else-if ladder

• switch

Understanding when to use each of them will make your programs cleaner and easier to understand.

❊ Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

In programming, things often take time like downloading a large image or fetching data from a server. Instead of making the whole program wait and freeze, JavaScript uses "Promises" to manage these tasks.

1. What is a Promise?

⤑ Imagine Jethalal wants to impress Babita Ji by bringing her a special "Chocolate Gunda" from Ahmedabad.

• The Promise: Jethalal tells Babita Ji, "I will bring you the sweets by evening."

• The Wait: Babita Ji doesn't know yet if she will get the sweets or if Jethalal will forget. She just has his "Promise."

⤑ In JavaScript, a Promise is an object representing the eventual completion (or failure) of an asynchronous operation and its resulting value.

2. The Three States of a Promise

⤑ Just like Jethalal’s commitment, every Promise goes through three stages:

1. Pending: Jethalal is currently on his way. The result is unknown.

2. Fulfilled (Resolved): Jethalal arrives with the sweets! Babita Ji is happy.

3. Rejected: Jethalal gets stuck in a traffic jam or Bagha forgets to order them. Babita Ji is disappointed.

3. The Basic Methods: Handling One Promise

⤑ When you have a single promise, you use these three methods to handle the result.

then() – The Success Story

⤑ If Jethalal successfully brings the sweets, what should Babita Ji do? She handles the success using .then().

myPromise.then((message) => {
  console.log("Success: " + message);
});

⤑ This code says, "If the promise is fulfilled, take the result and do something with it."

catch() – The Backup Plan

⤑ If Jethalal fails (the promise is rejected), Babita Ji needs to handle the error. She uses .catch().

myPromise.catch((error) => {
  console.log("Error: " + error);
});

⤑ This code says, "If something goes wrong, tell me what the error is so I can fix it."

finally() – The Final Word

⤑ Whether Jethalal brings the sweets or fails, Bapuji will definitely give him a lecture. This happens no matter what.

myPromise.finally(() => {
  console.log("Process finished. Bapuji starts his lecture.");
});

⤑ This code runs at the very end, regardless of whether the promise succeeded or failed.

4. Handling Multiple Promises (Static Methods)

⤑ Sometimes, we have many promises happening at once. This is where things get interesting in Gokuldham!

Promise.all() – The Team Player

⤑ Scenario: Tapu Sena (Tapu, Sonu, Goli) decides to clean the clubhouse.

• If all of them finish their work, the party starts.

• If even one person fails, the whole plan is cancelled.

Promise.all([promiseTapu, promiseSonu, promiseGoli])
  .then((results) => console.log("Clubhouse is clean!"))
  .catch((err) => console.log("Someone failed, party cancelled!"));

⤑ It waits for all to succeed. If one fails, the whole thing fails immediately.

Promise.allSettled() – The Report Card

⤑ Scenario: Bhide gives different tasks to everyone for Ganpati Festival.

• Bhide wants a report of who finished and who failed.

• He doesn't stop the festival if one person fails; he just wants to know the status of everyone.

Promise.allSettled([task1, task2, task3])
  .then((results) => console.log("Here is the status of every task."));

⤑ Behavior: It waits for all promises to finish (either success or failure) and returns an array of results.

Promise.race() – The Fast and Curious

⤑ Scenario: Jethalal, Bhide, and Iyer are all racing to reach the Soda Shop first to talk to Abdul.

• The person who reaches first wins.

• It doesn't matter if they succeeded or failed; the first one to "cross the finish line" (settle) wins.

Promise.race([jethaRun, bhideRun, iyerRun])
  .then((winner) => console.log("The first person reached!"));

⤑ Behavior: It returns the result of the first promise that finishes, whether it's a success or an error.

Promise.any() – The First Success

⤑ Scenario: Popatlal is looking for a marriage proposal. He sends his profile to three different matchmakers.

• He only cares about the first one who says "Yes!" (success).

• If the first one says "No," he waits for the second one.

• He only gets sad if everyone says "No."

Promise.any([matchMaker1, matchMaker2, matchMaker3])
  .then((firstYes) => console.log("Popatlal is getting married!"))
  .catch((err) => console.log("All rejected. Cancel the umbrella."));

⤑ Behavior: It waits for the first successful promise. It only fails if every single promise fails.

❊ Table :

❊ Conclusion

JavaScript Promises are just like the commitments made in Gokuldham Society. They help us manage time, handle failures gracefully, and coordinate between different tasks. Just remember: keep your promises like Jethalal tries to (mostly) and handle your errors like Bhide handles his "Zamana!"

Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

If you're learning JS, arrow functions will quickly become your favorite feature.

Let’s understand them step by step.

❋ What Are Arrow Functions?

Arrow functions are a shorter way to write functions in JavaScript.

They were introduced in ES6 (2015) to reduce boilerplate code and improve readability.

Instead of writing:

function greet(name) {
  return "Hello " + name;
}

We can write:

const greet = (name) => {
  return "Hello " + name;
};

❋ Basic Arrow Function Syntax

Here is the general syntax:

const functionName = (parameters) => {
  // code
};

• const → storing function in a variable

• (parameters) → input values

• => → arrow symbol

• {} → function body

❋ Arrow Function with One Parameter

If there is only one parameter, you can remove parentheses.

Normal function:

function square(num) {
  return num * num;
}

Arrow function:

const square = num => {
  return num * num;
};

❋ Arrow Function with Multiple Parameters

If there are multiple parameters, parentheses are required.

const add = (a, b) => {
  return a + b;
};

Example:

console.log(add(5, 3)); // 8

❋ Implicit Return vs Explicit Return

This is the most powerful feature.

🔹 Explicit Return (using return keyword)

const multiply = (a, b) => {
  return a * b;
};

🔹 Implicit Return (no return keyword)

If your function has only one expression, you can remove {} and return.

const multiply = (a, b) => a * b;

JavaScript automatically returns the value.

That’s called implicit return.

❋ Basic Difference: Normal Function vs Arrow Function

❋ Why Arrow Functions Matter

• Less boilerplate

• Cleaner callbacks

• Perfect for array methods like:

  • map()

  • filter()

  • reduce()

• Modern JavaScript standard

Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

• API data comes in arrays

• Database results come in arrays

• UI lists are rendered from arrays

If you master array methods, your code becomes:

• Cleaner

• Shorter

• More readable

• More professional

Let’s understand the most important ones.

push()

This method adds new element(s) to the end of the attached JavaScript array, changing the original array, and returns the new length of the array. This method accepts the elements you wish to add at the end of the array as parameters.

myArray.push(element1, element2, ..., elementX);

Let’s now create a new array then add some more fruits using the push() method:

pop()

This method removes the last element of the attached JavaScript array, altering the original array, and returns the removed element.

myArray.pop();

Note : You don’t pass anything as a parameter to the pop() method.

Here’s an example showing how to use the pop() method:

shift()

The shift() method removes the first element of an array. It works similarly to the pop() method, but instead of removing from the end, it removes from the beginning of the attached array. It returns the removed/shifted element.

myArray.shift();

Let’s now create a new array of animal names and then learn how to use the shift() method to remove the first name from the array:

unshift()

The unshift() method works similarly to the push() method as it is used to add new elements to an array, but to the beginning of an array. This method takes the element(s) you wish to add at the beginning of the array as parameters. It also returns the new length of the array.

myArray.unshift(element1, element2, ..., elementX);

Let’s now create a new array of food names and then add more food names to the array using the unshift() method:

❋ Map, reduce, and filter are all array methods in JavaScript. Each one will iterate over an array and perform a transformation or computation. Each will return a new array based on the result of the function.

Let's Understand these concepts :

✤ Map

map() creates a new array by transforming each element.

⤑ It does NOT modify the original array.

Syntax

var new_array = arr.map(function callback(element, index, array) {
    // Return value for new_array
}[, thisArg])

In the callback, only the array element is required. Usually some action is performed on the value and then a new value is returned.

Traditional For Loop vs map()

🔸 Using For Loop

🔸 Using map()

So basically the map function maps each every value in the array and transforms it based on a given condition.

✤ Filter()

The filter() method takes each element in an array and it applies a conditional statement against it. If this conditional returns true, the element gets pushed to the output array. If the condition returns false, the element does not get pushed to the output array.

Syntax

var new_array = arr.filter(function callback(element, index, array) {
    // Return true or false
}[, thisArg])

The syntax for filter is similar to map, except the callback function should return true to keep the element, or false otherwise. In the callback, only the element is required.

Examples

In the following example, odd numbers are "filtered" out, leaving only even numbers.

In the next example, filter() is used to get all the students whose grades are greater than or equal to 90.

✤ Reduce()

The reduce() method reduces an array of values down to just one value. To get the output value, it runs a reducer function on each element of the array.

Syntax

arr.reduce(callback[, initialValue])

The callback argument is a function that will be called once for every item in the array. This function takes four arguments, but often only the first two are used.

• accumulator - the returned value of the previous iteration

• currentValue - the current item in the array

• index - the index of the current item

• array - the original array on which reduce was called

• The initialValue argument is optional. If provided, it will be used as the initial accumulator value in the first call to the callback function.

Examples

The following example adds every number together in an array of numbers.

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function (result, item) {
  return result + item;
}, 0);
console.log(sum); // 10

In the next example, reduce() is used to transform an array of strings into a single object that shows how many times each string appears in the array. Notice this call to reduce passes an empty object {} as the initialValue parameter. This will be used as the initial value of the accumulator (the first argument) passed to the callback function.

var pets = ['dog', 'chicken', 'cat', 'dog', 'chicken', 'chicken', 'rabbit'];

var petCounts = pets.reduce(function(obj, pet){
    if (!obj[pet]) {
        obj[pet] = 1;
    } else {
        obj[pet]++;
    }
    return obj;
}, {});

console.log(petCounts); 

/*
Output:
 { 
    dog: 2, 
    chicken: 3, 
    cat: 1, 
    rabbit: 1 
 }
 */

✤ forEach()

The JavaScript Array forEach() method is a built-in function that executes a provided function once for each array element. It does not return a new array and does not modify the original array. It's commonly used for iteration and performing actions on each array element.

Return value

It does not return a new array. It returns undefined. This method may or may not change the original array provided as it depends upon the functionality of the argument function.

Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

Imagine you have a webpage with:

• headings

• paragraphs

• buttons

• cards

• links

CSS needs a way to answer one simple question:

Which element should I style?

That’s exactly what CSS selectors do.

Selectors are used to choose HTML elements so CSS can apply styles to them.

Without selectors, CSS wouldn’t know where to apply styles.

CSS Selectors = Ways to Choose Elements

Think of CSS selectors like addressing people.

• “All students” → element selector

• “Students wearing red shirts” → class selector

• “That one student with roll no. 12” → ID selector

CSS works the same way.

Element Selector

The element selector selects HTML elements by their tag name.

Example

HTML

<p>This is a paragraph</p>
<p>This is another paragraph</p>

CSS

p {
  color: blue;
}

Result

All <p> elements become blue.

Use element selectors when:

• You want to style all elements of the same type

Class Selector

The class selector targets elements with a specific class.

Syntax

.class-name

Example

HTML

<p class="highlight">Important text</p>
<p>Normal text</p>

CSS

.highlight {
  color: red;
}

Result

Only the paragraph with class highlight is red.

Use class selectors when:

• You want to style multiple specific elements

ID Selector

The ID selector targets a single unique element.

Syntax

#id-name

Example

HTML

<h1 id="main-title">Welcome</h1>

CSS

#main-title {
  color: green;
}

Result

Only that one heading is styled.

Rules:

• IDs must be unique

• Use IDs sparingly

Group Selectors

Group selectors let you apply the same style to multiple selectors.

Example

CSS

h1, h2, p {
  font-family: Arial;
}

Result

h1, h2, and p all use Arial.

Use group selectors to:

• Avoid repeating CSS

• Keep styles clean

Descendant Selectors

Descendant selectors target elements inside other elements.

Syntax

parent child

Example

HTML

<div class="card">
  <p>This text is inside card</p>
</div>

<p>This text is outside card</p>

CSS

.card p {
  color: blue;
}

Result

Only the paragraph inside .card turns blue.

This is very useful for layouts and components.

Basic Selector Priority (High-Level Only)

Sometimes multiple selectors target the same element.

CSS follows a simple priority rule:

ID selector > Class selector > Element selector

Example

p {
  color: black;
}

.text {
  color: blue;
}

#special {
  color: red;
}

If an element has all three:

<p id="special" class="text">Hello</p>

Red wins because ID has higher priority.

Don’t worry about memorizing this now.
Just remember: ID is stronger than class, class is stronger than element.

CSS works like this:

1. Read selector

2. Find matching elements

3. Apply styles

Why CSS Selectors Are So Important

Selectors are the foundation of CSS.

If you understand selectors:

• Styling becomes easy

• Layouts make sense

• Debugging becomes faster

Everything in CSS starts with:

Which element am I targeting?

Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

Type this by hand:

<div class="container">
  <header class="header">
    <h1>Welcome</h1>
  </header>
  <main class="content">
    <p>This is a paragraph.</p>
  </main>
</div>

That's a lot of typing. Opening tags, closing tags, attributes, indentation. Every single character.

Now imagine building a full webpage with dozens or hundreds of elements. It gets tedious fast.

There has to be a better way.

What Is Emmet?

Emmet is a shortcut language that lets you write HTML incredibly fast.

Instead of typing full HTML tags, you type a short abbreviation and press Tab. Emmet expands it into complete HTML.

Example:

Type this:

div.container

Press Tab

Get this:

<div class="container"></div>

Emmet isn't a separate tool you install. It's built into most modern code editors like VS Code, Sublime Text, and Atom. It just works.

Why Beginners Should Use Emmet

1. Write HTML 10x faster Less typing means you focus on structure, not syntax.

2. Fewer mistakes Emmet generates valid HTML. No forgotten closing tags or typos.

3. Learn HTML structure better Emmet forces you to think in terms of hierarchy and nesting.

4. Industry standard Professional developers use Emmet daily. Learning it early gives you good habits.

5. It's optional You can always type HTML manually. Emmet is there when you want speed.

How Emmet Works

Emmet watches what you type in your editor. When it recognizes an abbreviation, it offers to expand it.

Step-by-step:

1. Type an Emmet abbreviation: p

2. Press Tab (or Enter in some editors)

3. Emmet expands it: <p></p>

4. Your cursor is inside the tag, ready to add content

Most editors with Emmet support:

• VS Code (built-in)

• Sublime Text (built-in)

• Atom (built-in)

• WebStorm (built-in)

If you're using VS Code, Emmet works out of the box. Just type and press Tab.

Basic Emmet Syntax

Creating Elements

Type the tag name and press Tab.

h1    →    <h1></h1>
p     →    <p></p>
div   →    <div></div>
span  →    <span></span>

Adding Classes

Use a dot (.) for classes.

div.container    →    <div class="container"></div>
p.intro          →    <p class="intro"></p>

Multiple classes:

div.card.shadow    →    <div class="card shadow"></div>

Adding IDs

Use a hash (#) for IDs.

div#main      →    <div id="main"></div>
header#top    →    <header id="top"></header>

Combining Classes and IDs

div#main.container    →    <div id="main" class="container"></div>

Order doesn't matter:

div.container#main    →    <div class="container" id="main"></div>

Implicit Tag Names

If you don't specify a tag, Emmet assumes div.

.container       →    <div class="container"></div>
#header          →    <div id="header"></div>
.card.shadow     →    <div class="card shadow"></div>

Adding Attributes

Use square brackets [] for custom attributes.

a[href="#"]                →    <a href="#"></a>
img[src="photo.jpg"]       →    <img src="photo.jpg" alt="">
input[type="text"]         →    <input type="text">

Multiple attributes:

img[src="car.jpg" alt="Red car"]    →    <img src="car.jpg" alt="Red car">

Creating Nested Elements

Use the > symbol to create child elements.

div>p    →    <div><p></p></div>

More complex nesting:

header>h1

Expands to:

<header>
  <h1></h1>
</header>

Deeper nesting:

div>header>h1

Expands to:

<div>
  <header>
    <h1></h1>
  </header>
</div>

Sibling Elements

Use the + symbol to create elements at the same level.

header+main

Expands to:

<header></header>
<main></main>

Multiple siblings:

header+main+footer

Expands to:

<header></header>
<main></main>
<footer></footer>

Combining Nesting and Siblings

div>header+main+footer

Expands to:

<div>
  <header></header>
  <main></main>
  <footer></footer>
</div>

More complex:

div.container>header>h1^main>p^footer

The ^ climbs back up one level.

Expands to:

<div class="container">
  <header>
    <h1></h1>
  </header>
  <main>
    <p></p>
  </main>
  <footer></footer>
</div>

Repeating Elements with Multiplication

Use * to create multiple copies.

li*3

Expands to:

<li></li>
<li></li>
<li></li>

Real-world example:

ul>li*5

Expands to:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

With classes:

div.card*3

Expands to:

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

Auto-Numbering with $

Use $ to add auto-incrementing numbers.

div.item$*3

Expands to:

<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

In IDs:

section#section$*3

Expands to:

<section id="section1"></section>
<section id="section2"></section>
<section id="section3"></section>

Adding Text Content

Use curly braces {} for text.

h1{Welcome}

Expands to:

<h1>Welcome</h1>

With nested elements:

div>h1{Title}+p{Description}

Expands to:

<div>
  <h1>Title</h1>
  <p>Description</p>
</div>

Numbered text:

li{Item $}*3

Expands to:

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

Generating HTML Boilerplate

The most powerful Emmet trick: generate a full HTML template instantly.

Type:

!

Press Tab

Get this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

This saves you from typing 10+ lines every time you create a new HTML file.

Alternative syntax (does the same thing):

html:5

Real-World Examples

Navigation Menu

nav>ul>li*4>a

Expands to:

<nav>
  <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</nav>

Card Grid

div.grid>div.card*3>h2+p

Expands to:

<div class="grid">
  <div class="card">
    <h2></h2>
    <p></p>
  </div>
  <div class="card">
    <h2></h2>
    <p></p>
  </div>
  <div class="card">
    <h2></h2>
    <p></p>
  </div>
</div>

Form

form>input[type="text"]+input[type="email"]+button{Submit}

Expands to:

<form action="">
  <input type="text">
  <input type="email">
  <button>Submit</button>
</form>

Table

table>tr*3>td*4

Expands to:

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Emmet Cheat Sheet

For Cheat Sheet You can visit here : Official Documentation

Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

HTML (HyperText Markup Language) is used to create the structure of a webpage.

When you open a website, the browser first reads HTML code to know:

• What text to show

• What is a heading

• What is a paragraph

• Where images and links are placed

Think of HTML as the skeleton of a webpage.

HTML = Skeleton of a Webpage

<h1>My Website</h1>
<p>Welcome to my page</p>

Without HTML, the browser has nothing to display.

What Is an HTML Tag?

An HTML tag is written inside angle brackets < >.

Example:

<p>

This tag tells the browser:

“This is a paragraph.”

Some common tags:

<h1>
<p>
<div>
<span>

Opening Tag, Closing Tag, and Content

Most HTML tags have:

• an opening tag

• content

• a closing tag

Example:

<p>Hello World</p>

Breakdown:

• <p> → opening tag

• Hello World → content

• </p> → closing tag

Think of it like a box:

<p>        ← open
Hello World
</p>       ← close

What Is an HTML Element?

This is very important

HTML element = opening tag + content + closing tag

Example:

<h1>This is a heading</h1>

• <h1> → tag

• </h1> → tag

• Whole line → HTML element

Tag ≠ Element

Self-Closing (Void) Elements

Some elements do not have content.

Example:

<img src="photo.jpg" />
<br />
<input type="text" />

These are called self-closing (void) elements.

They:

• Don’t wrap text

• Don’t need closing tags

Block-Level Elements

Block elements:

• Start on a new line

• Take full width

Example:

<h1>Heading</h1>
<p>This is a paragraph</p>
<div>This is a div</div>

They appear like this:

[ Heading          ]
[ Paragraph        ]
[ Div              ]

Inline Elements

Inline elements:

• Stay in the same line

• Take only required space

Example:

<p>
  This is <span>inline text</span> inside a paragraph.
</p>

Inline elements behave like words in a sentence.

Commonly Used HTML Tags (Beginner-Friendly)

<h1>Main heading</h1>
<h2>Sub heading</h2>

<p>This is a paragraph.</p>

<div>
  <p>Paragraph inside div</p>
</div>

<span>Small inline text</span>

<a href="https://blog.prakashtsx.me">Visit my blog</a>

<img src="image.png" alt="My image" />

These tags are more than enough to start.

Inspect HTML in the Browser (Must Try)

1. Open any website

2. Right-click → Inspect

3. Look at the Elements tab

You’ll see real HTML like:

<div>
  <h1>Title</h1>
  <p>Text</p>
</div>

Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

From URL → code → pixels (explained visually for beginners)

A Simple Question to Start With

You open your browser, type:

blog.prakashtsx.me

…and press Enter.

Within milliseconds, blog appears.

But what actually happened inside the browser during that tiny moment?

Let’s Understand :

What a Browser Actually Is (Beyond “It Opens Websites”)

A browser is not just a website opener.

When you visit blog.prakashtsx.me, your browser becomes:

• A network client (talks to servers)

• A file downloader (HTML, CSS, JS)

• A parser (understands code)

• A layout planner

• A painter (draws pixels)

In simple words:

A browser converts text files into a visual experience.

Main Parts of a Browser (High-Level Overview)

Think of the browser as a team of components working together.

Main components:

• User Interface

• Browser Engine

• Rendering Engine

• Networking

• JavaScript Engine

• Data Storage

User Interface (What You See)

This is the visible part of the browser:

• Address bar (where you type blog.prakashtsx.me)

• Tabs

• Back / Forward buttons

• Refresh button

Important:
The UI does not render the website.
It only sends instructions to the browser engine.

Browser Engine vs Rendering Engine (Simple Difference)

This confuses many beginners, so let’s simplify.

Browser Engine

• Acts like a manager

• Connects UI with the rendering engine

• Controls page loading

Rendering Engine

• Converts HTML + CSS into pixels

• Builds DOM, CSSOM, Render Tree

Examples (name-level only):

• Chrome → Blink

• Firefox → Gecko

One manages. One draws.

Networking: How blog.prakashtsx.me Is Fetched

After pressing Enter:

1. Browser reads the URL

2. DNS converts domain → IP address

3. Browser sends an HTTP/HTTPS request

4. Server responds with:

   • HTML

   • CSS

   • JavaScript

   • Images, fonts

At this stage, the browser has raw files, not a page.

HTML Parsing → DOM Creation

Let’s say blog sends HTML like:

<html>
  <body>
    <div>Hello from blog.prakashtsx.me</div>
  </body>
</html>

The browser:

• Reads HTML line by line

• Breaks it into tokens

• Builds a tree structure

This tree is called the DOM (Document Object Model).

DOM Analogy

Think of DOM as a family tree:

• html → parent

• body → child

• div → grandchild

  

  CSS Parsing → CSSOM Creation

  CSS is processed separately.

  Example:

    body { font-size: 16px; }
    div { color: blue; }
  

  The browser:

  • Tokenizes CSS

  • Applies rules

  • Handles inheritance

This creates the CSSOM (CSS Object Model).

How DOM and CSSOM Come Together

Now the browser combines:

• DOM (structure)

• CSSOM (styles)

To form the Render Tree.

Render Tree:

• Contains only visible elements

• Includes layout + style info

Elements like display: none are excluded.

Layout (Reflow): Deciding Positions

Now the browser calculates:

• Width

• Height

• Position (x, y)

This step is called Layout or Reflow*.*

Reflow happens again if:

• Window resizes

• Content changes

• Font size changes

Painting and Display

Painting

The browser paints:

• Text

• Colors

• Borders

• Images

Compositing & Display

• Layers are combined

• Pixels are pushed to the screen

🎉 You now see blog.prakashtsx.me

What Does “Parsing” Mean?

Parsing means:

Breaking something into meaningful structure

Example:

    2 + 3 * 4

Parser understands:

• * has higher priority

• Builds a tree

• Evaluates correctly

Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

Imagine you want to send a message to your friend.

You shout the message.
Your friend may or may not hear it.
Even if they hear, they might hear it in the wrong order.
Some words may be lost.
Some words may be repeated.

That’s exactly what would happen on the internet if there were no rules.

The internet is just millions of computers sending data to each other.
To make sure this data reaches the correct destination, in the correct order, and without loss, we need proper rules.

These rules are called protocols.

One of the most important protocols is TCP.

What is TCP and Why Is It Needed?

TCP stands for Transmission Control Protocol.

TCP is a communication protocol that makes sure:

• Data reaches the correct destination

• Data is not lost

• Data arrives in the correct order

• Data is not duplicated

• Sender and receiver both agree before talking

In simple words:

TCP makes the internet reliable.

Whenever you:

• Open a website

• Log in to an app

• Submit a form

• Send an email

TCP is working silently in the background.

Problems TCP Is Designed to Solve

Before understanding how TCP works, let’s understand what problems exist without TCP.

1. Data Loss

Packets can get lost due to:

• Network congestion

• Weak connections

• Hardware failures

2. Wrong Order of Data

Data is broken into small packets.
Packets can arrive out of order.

Example:

Sent: Hello World
Received: World Hello

3. Duplicate Data

Sometimes the same packet can arrive multiple times.

4. No Confirmation

Sender doesn’t know:

• Did the receiver get the data?

• Should I resend?

TCP solves all these problems.

Introducing TCP as a Reliable Protocol

TCP works like a formal conversation.

Before sending data:

• TCP checks if the other side is ready

• Both sides agree to talk

• Rules are decided

Only then does actual data transfer begin.

This agreement process is called the TCP 3-Way Handshake.

What Is the TCP 3-Way Handshake?

The 3-Way Handshake is the process by which:

• A TCP connection is established

• Both client and server confirm:

  • “I am ready”

  • “I can hear you”

  • “Let’s start communication”

It has three steps:

1. SYN

2. SYN-ACK

3. ACK

Think of it as a polite conversation.

Working of TCP 3-Way Handshake (Clear Explanation)

Before two computers can send data to each other on the internet, they must first establish a connection.
They cannot start sending data randomly. Both sides need to confirm that the other is ready.

TCP does this using a process called the 3-Way Handshake.

Step 1: Hey, Are You There? - SYN

Imagine you want to talk to your friend using a walkie-talkie.

Before you start speaking, you press the button and say:

Hey, are you there?

This is exactly what happens in the first step of TCP.

• The client sends a message to the server

• This message is called SYN (Synchronize)

• It means:
  I want to start a connection with you.

Along with SYN, the client also sends a sequence number, usually starting from SEQ = 0.

You can think of this sequence number as:

• A starting page number of a notebook

• Or a reference point for future messages

At this stage:

• No real data is sent

• Only a connection request is made

Step 2: Yes, I’m Here! - SYN + ACK

Now imagine your friend hears your message and replies:

Yes, I’m here. I heard you. Can you hear me too?

This is the second step of the TCP handshake.

• The server replies to the client

• It sends a message with SYN + ACK

This means two things:

• ACK: I received your SYN

• SYN: I also want to start communication with you

The server also sends:

• Its own sequence number (for example, SEQ = 0)

• An acknowledgment number ACK = 1, meaning:

  I received your sequence number 0, now I expect 1 next

Now both sides know:

• The other system exists

• The connection path works

• Sequence numbers are exchanged

Step 3: Yes, Let’s Start Talking - ACK

Finally, you reply to your friend:

Yes, I can hear you too. Let’s talk.

This is the last step of the TCP handshake.

• The client sends an ACK message to the server

• It confirms:

  I received your SYN and your sequence number

The client now sends:

• ACK = 1

• SEQ = 1

At this point:

• Both client and server fully trust the connection

• Both know the starting sequence numbers

• The connection is officially established

TCP 3-Way Handshake Completed

After these three steps:

1. SYN

2. SYN-ACK

3. ACK

The TCP connection is successfully established, and now:

• Actual data transfer can begin

• Data can be sent reliably

• Packets can be tracked using sequence numbers

Why This Handshake Is Important

The TCP 3-Way Handshake ensures that:

• Both computers are ready

• Data won’t be sent into the void

• Sequence numbers are synchronized

• Communication starts in a controlled and reliable way

Without this handshake:

• Data could be lost

• Messages could arrive out of order

• Communication would be unreliable

How Data Transfer Works in TCP

Once the connection is established:

• Data is broken into small packets

• Each packet has:

  • Sequence number

  • Data

• Receiver sends ACK for received packets

Example:

Packet 1 → ACK 1
Packet 2 → ACK 2
Packet 3 → ACK 3

If ACK is missing → sender knows something went wrong.

What Are Sequence Numbers ?

Sequence numbers help TCP:

• Keep data in correct order

• Detect missing packets

Example:

Sent packets: 1, 2, 3, 4
Received: 1, 2, 4
Missing: 3

TCP notices packet 3 is missing and asks for it again.

How TCP Ensures Reliability

TCP is reliable because it uses:

1. Acknowledgements (ACKs)

Receiver confirms each packet.

2. Retransmission

If ACK is not received, packet is sent again.

3. Ordered Delivery

Sequence numbers ensure correct order.

4. Error Checking

Corrupted packets are discarded and resent.

Handling Packet Loss

Let’s say:

• Packet 5 is lost

• Receiver keeps sending ACK for packet 4

Sender understands:

Packet 5 did not reach

Sender resends packet 5.

This is called retransmission.

As a web developer, TCP matters because:

• HTTP runs on top of TCP

• Login systems depend on TCP reliability

• APIs require ordered, correct data

• Databases depend on TCP connections

Without TCP:

• Forms would submit incorrectly

• Pages would load half-broken

• APIs would fail randomly

Want More…?

I write articles on blog.prakashtsx.com and also post development-related content on the following platforms:

• Twitter/X

• LinkedIn

Imagine the internet as a huge city.

• Millions of people (devices)

• Sending messages every second

• Across different roads (networks)

If everyone just shouted messages randomly, nothing would work.

So the internet needs rules
These rules are called protocols.

At a very high level:

• TCP and UDP decide how data travels

• HTTP decides what the data means

What Are TCP and UDP ?

TCP and UDP are transport protocols.

Their job is simple:

Move data from one computer to another.

But they do it very differently.

TCP (Transmission Control Protocol)

• Safe

• Reliable

• Slower

• Makes sure nothing is lost

UDP (User Datagram Protocol)

• Fast

• No guarantees

• Risky

• Sends data and moves on

Easy Example to understand with real :

TCP = Courier Service

• Package is tracked

• Signature required

• If lost → resend

• Delivery guaranteed

UDP = Public Announcement

• Message is broadcast

• No confirmation

• If someone misses it → too bad

• Very fast

Key Differences Between TCP and UDP

When to Use TCP

Use TCP when accuracy matters more than speed.

Examples:

• Loading a website

• Sending emails

• File downloads

• Online banking

• APIs and backend services

If losing data is unacceptable → use TCP

When to Use UDP

Use UDP when speed matters more than perfection.

Examples:

• Live video streaming

• Online gaming

• Voice calls (Zoom, WhatsApp)

• DNS queries

If small data loss is okay → use UDP

Examples (Easy to Remember)

What is HTTP ?

HTTP = HyperText Transfer Protocol

HTTP is NOT responsible for sending data across the network.

Instead, HTTP defines:

• Requests (GET, POST, etc.)

• Responses (status codes, headers, body)

• How browsers talk to servers

HTTP lives at the application level

Where HTTP Fits ?

Think in layers:

HTTP  → What to say
TCP   → How to send safely
IP    → Where to send

So:

• HTTP decides what the message looks like

• TCP decides how it reaches safely

Relationship Between TCP and HTTP

• HTTP runs on top of TCP

• HTTP depends on TCP

• TCP handles reliability

• HTTP focuses on content and rules

Example Flow:

1. Browser creates HTTP request

2. TCP creates a connection

3. Data is sent safely

4. Server replies via TCP

5. Browser reads HTTP response

Why HTTP Does NOT Replace TCP ?

HTTP sends data, so why do we need TCP?

Because:

• HTTP doesn’t handle delivery

• HTTP doesn’t handle retries

• HTTP doesn’t handle packet loss

HTTP assumes TCP is already doing that job.

Simplified Layering (TCP/IP Model)

Application Layer → HTTP
Transport Layer   → TCP / UDP
Internet Layer    → IP
Network Layer     → Physical network

This blog is written to remove that fear.

No overload. Just clear thinking.

❀ Before cURL: What is a Server?

⤷ A server is simply a computer that is always connected to the internet and waits for requests.

Examples of what servers do:

• Send a webpage (HTML, CSS, JS)

• Return user data from a database

• Accept form submissions

• Provide APIs for mobile apps

Whenever you:

• Open a website

• Submit a login form

• Scroll Instagram

You are talking to a server.

❀ How Do We Talk to a Server?

⤑ To talk to a server, we send a request.

That request contains:

• What we want (data, page, action)

• Where we want it from (URL)

• Sometimes extra data (login info, form data)

⤑ The server then sends back a response.

That response contains:

• Status (success or failure)

• Data (HTML, JSON, text, etc.)

❀ Where Does cURL Come In?

⤷ Normally, browsers send requests for us.

But programmers often want to:

• Test APIs

• Debug backend issues

• Call a server without a browser

• Automate requests

This is where cURL is used.

⤑ cURL is a tool that lets you send requests to a server from the terminal.

Think of it as:

Terminal → Server → Response

❀ What is cURL ?

⤑ cURL = Command Line URL tool

⤑ cURL is a way to send messages to a server using text commands.

No UI. No buttons. Just pure communication.

❀ Why Programmers Need cURL ?

⤷ Programmers use cURL because:

• It works everywhere (Linux, Mac, Windows)

• No browser required

• Perfect for backend and API testing

• Helps understand how HTTP really works

❀ Understanding Request and Response

⤑ Request (What You Send)

A basic HTTP request includes:

• Method (GET / POST)

• URL

• Headers (optional for now)

• Body (only for POST)

Example :

GET / HTTP/1.1

Host: prakashtsx.me

⤑ Response (What You Get Back)

A response includes:

• Status code (200, 404, 500)

• Headers

• Data (HTML, JSON, text)

Example :

HTTP/1.1 200 OK

Content-Type: text/html

<html>...</html>

❀ Status Codes :

• 200 → Success

• 404 → Not Found

• 500 → Server Error

❀ Using cURL to Talk to APIs

APIs usually return JSON, not HTML.

Example:

curl https://api.github.com

We will see JSON data in response.

This is how:

• Frontend talks to backend

• Mobile apps talk to servers

• Services talk to other services

❀ GET vs POST (Only What We Need)

⤷ GET

• Used to fetch data

• Default method in cURL

curl https://api.example.com/users

⤷ POST

• Used to send data

curl -X POST https://api.example.com/login

❀ Browser Request vs cURL Request (Conceptual)

Browser:

• UI + request + rendering

cURL:

• Only request + response

Same protocol. Same server. Different interface.

❀ Where cURL Fits in Backend Development

cURL helps you:

• Test APIs before frontend exists

• Debug server issues

• Understand HTTP deeply

• Think like a backend engineer

⤷ Every time you type google.com in your browser, something important happens in the background.
Your computer does not understand website names. It only understands IP addresses.

⤑ DNS (Domain Name System) helps convert:

google.com → IP address

⤑ That is why DNS is called the internet’s phonebook.

⤑ In this blog, we will understand how DNS works step by step using a tool called dig.

❋ What is DNS and Why Do We Need It?

⤑ Humans like easy names:

• google.com

• amazon.com

• github.com

⤑ Computers like numbers:

• 142.250.185.46

⤑ Without DNS:

• You would need to remember IP addresses

• Websites changing servers would break bookmarks

⤑ DNS solves this by:

• Mapping domain names to IP addresses

• Working in a distributed way, not from one single server

• Making the internet fast, scalable, and reliable

❋ What is dig and Why Is It Used?

⤑ dig stands for Domain Information Groper.

⤑ It is a command-line tool used to:

• Check DNS records

• Understand how DNS resolution works

• Debug DNS problems

• Learn DNS deeply

Basic command:

dig google.com

Unlike browsers (which hide DNS details), dig shows exactly what is happening.

❋ DNS Works in Layers (Hierarchy)

DNS is not one server.
It works in three main layers:

Each layer only knows the next layer, not everything.

❋ Layer 1 : Root Name Servers (dig . NS)

Command:

dig . NS

This asks:

Who manages the root of DNS?

What root servers do:

• They are the top of DNS

• They do NOT know website IPs

• They only know where TLD servers are

Example response idea:

I don’t know google.com, but I know who manages .com

Important points:

• There are 13 root server names

• They are spread across the world

• Very reliable and fast

❋ Layer 2 : TLD Name Servers (dig com NS)

Command:

dig com NS

This asks:

Who manages the .com domain?

What TLD servers do:

• They manage domains like .com, .org, .net

• They do NOT know IP addresses

• They point to authoritative servers

Example response idea:

I don’t know google’s IP, but I know Google’s name servers

❋ Layer 3 : Authoritative Name Servers (dig google.com NS)

Command:

dig google.com NS

This asks:

Who is responsible for google.com?

Authoritative servers:

• Are owned by the domain owner (Google)

• Store real DNS records

• Are the source of truth

They contain:

• A records (IP address)

• MX records (email)

• TXT records (verification)

Example:

ns1.google.com
ns2.google.com

These servers finally know:

Yes, this is the IP address of google.com

❋ Full DNS Resolution (dig google.com)

Command:

dig google.com

This gives:

• IP address

• TTL (how long it can be cached)

• Which DNS server answered

⤑ What happens behind the scenes:

1. Check cache

2. Ask root server

3. Root points to .com

4. .com points to Google servers

5. Google server returns IP

6. Result is cached

TTL example:

300 seconds

Means the result can be reused for 5 minutes.

❋ What Are NS Records and Why Are They Important?

⤷ NS (Name Server) records tell:

• Who controls a domain

• Where DNS queries should go next

⤑ They are important because:

• DNS is distributed

• No single server controls everything

• Multiple servers give backup (redundancy)

If one server fails, another works.

❋ What is a Recursive Resolver?

⤷ Your computer does not talk to root servers directly.

⤑ Instead, it uses a recursive resolver, such as:

• 8.8.8.8 (Google DNS)

• 1.1.1.1 (Cloudflare DNS)

• ISP DNS

Flow:

Your PC → Recursive Resolver → Root → TLD → Authoritative

⤑ The resolver:

• Does all DNS work for you

• Caches results

• Returns final IP

❋ DNS and Real Browser Requests

⤷ When you open a website:

1. Browser checks cache

2. OS checks cache

3. Recursive resolver is asked

4. DNS resolution happens

5. IP address is returned

6. Browser connects using HTTP/HTTPS

⤑ DNS usually takes:

• 20–120 ms if not cached

• <10 ms if cached

That’s why DNS feels instant.

❋ DNS from a System Design View

⤑ DNS is designed to be:

• Distributed

• Fast

• Fault-tolerant

• Scalable

⤑ Important ideas:

• Caching improves speed

• Multiple name servers improve reliability

• DNS helps CDNs route users to nearby servers

You can watch for System Design View of DNS :

Probably you will say it lives at domain address like .com .in or any other domain .

But that not the case .

⤑ You know A domain name is only a name , not an address.

⤑ Your browser needs the real server address (as IP address) to load a website.

⤑ This is where DNS (Domain Name System) comes in .

✢ DNS is the phonebook of the Internet.
⤑ It translates human-friendly names into machine-friendly addresses, so browsers can find the correct server.

✢ In this article, we will learn exactly how DNS works and what each DNS record does using real examples from my website :

• prakashtsx.me

• blog.prakashtsx.me

1. What DNS Is ?

⤷ Imagine you want to visit a friend’s house.

You know their name, but not their address.

So you check your phone contacts → the contact shows the address → you travel there.

✢ DNS works the same way.

• You type prakashtsx.me

• Your browser doesn’t know the IP

• DNS tells the browser the correct server address

• Browser loads the website

2. Why DNS Records Are Needed ?

⤷ A domain is not just a website.
It can have:

• Subdomains (blog.prakashtsx.me)

• Email servers

• Verification settings

• Aliases

• IPv4 and IPv6 addresses

• Name servers (authoritative DNS)

⤑ To manage all of this, DNS uses different record types, each with a specific purpose.

⤑ Think of DNS as a file with different sections:

• One section says : This domain belongs to this server.

• Another says : This is the mail server.

• Another says : This subdomain points here.

These sections are called DNS Records.

3. NS Record (Name Server Record)

Who is responsible for this domain?

⤷ NS records tell the world which DNS servers contain the real (authoritative) information for a domain.

You used the command:

nslookup -type=ns prakashtsx.me

The DNS resolver replied with:

prakashtsx.me  nameserver = dns1.registrar-servers.com
prakashtsx.me  nameserver = dns2.registrar-servers.com

✢ What this means:

⤷ These two servers are the “authoritative DNS servers” for your domain.

In simple words:

They are the official place where the REAL DNS records of prakashtsx.me live.

⤑ If the entire internet wants to know:

• What is the A record of prakashtsx.me?

• What is the MX record?

• What is the CNAME for blog.prakashtsx.me?

• What are the TXT verification records?

They will ask these two servers, because these servers are responsible for your domain.

4. A Record (Address Record IPv4)

⤷ Which IPv4 server does this domain point to ?

The most common DNS record.

It maps a domain → IPv4 address.

Output from nslookup prakashtsx.me :

prakashtsx.me → A → 216.198.79.1

Meaning:

When someone types prakashtsx.me, DNS tells the browser to go to 216.198.79.1.

5. AAAA Record (IPv6 Address Record)

⤷ Which IPv6 server does this domain point to ?

Same as A record, but for IPv6.

Example:

prakashtsx.me → AAAA → 2606:4700::abcd

(Your domain may or may not have AAAA many small sites skip IPv6.)

♦ Some of you ask me what is IPv4 and IPv6 . So please refer to below i have write it properly which can help you to understand the main difference between both .

✢ IPv4 (Internet Protocol Version 4)

⤑ This is the older and most common type of IP address.

Example:

216.198.79.1

Structure

• 4 numbers

• Each between 0–255

• Separated by dots

• Total ≈ 4.3 billion possible addresses

✢ Why IPv4 is not enough?

⤑ The world ran out of IPv4 addresses because every device needs one:

• Phones

• Laptops

• Smart TVs

• Servers

• Cameras

• IoT devices

We needed a newer, bigger system.

✢ IPv6 (Internet Protocol Version 6)

⤑ This is the newer version with almost unlimited addresses.

Example:

2606:4700:3033::ac43:bdff

Structure

• Hexadecimal (0-9, a-f)

• Separated by colons

• Extremely large address space

• Total = 340 undecillion (3.4 × 10³⁸) addresses
  → Enough for every grain of sand on Earth to have millions of IPs

✢ Why IPv6 exists?

To handle:

• Billions of new devices

• Faster routing

• More efficient networks

• Better security (built-in features)

✢ How It Relates to DNS

DNS records are simply:

• A Record → Domain → IPv4
  Example:
  prakashtsx.me → 216.198.79.1

• AAAA Record → Domain → IPv6
  Example:
  example.com → 2606:4700:3033::1

Both point your domain to a server just using two different formats.

6. CNAME Record (Canonical Name / Alias)

This domain is actually another name.

CNAME is used when :

⤑ One domain should point to another domain.

Output from nslookup:

blog.prakashtsx.me → CNAME → hashnode.network
hashnode.network → A → 76.76.21.21

Meaning :

• Your blog subdomain is an alias

• It points to Hashnode’s domain

• Hashnode automatically provides the final IP

CNAME is perfect for:

• www.example.com

• blog.example.com

• api.example.com

7. MX Record (Mail Exchange Record)

Where should email for this domain be delivered ?

If someone sends email to :

mail@prakashtsx.me

⤑ The sending email server checks the domain’s MX records to find the correct mail server.

Example:

prakashtsx.me → MX → mailhost.someprovider.com

Without MX records, a domain cannot receive email.

8. TXT Record (Text / Verification / Security)

⤑ TXT records store extra information.

⤑ Originally created for notes, now heavily used for security.

Common uses:

✢ SPF (Email authentication)

⤑ Specifies which servers are allowed to send mail for your domain.

Example:

v=spf1 include:_spf.google.com ~all

✢ DKIM (Email signature keys)

✢ DMARC (Email protection rule)

Domain Verification

• Google Search Console

• Cloudflare

• AWS

• GitHub Pages

• Hashnode

• etc.

Example:

google-site-verification=abc123xyz

⤑ TXT is extremely flexible and widely used.

9. Simple Diagram: DNS Flow

⤷ Network Devices are the physical things that are required for communication & interaction between computers on a computer network.

These devices can be physical, like routers or switches, or virtual, like cloud-based firewalls and software-defined routers.

❊ Common Types Of Networks Devices Are :

• Routers

• Switches

• Hubs

• Modems

• Firewalls

• Access points

❀ Basic Overview How Internet reaches to our home

This is the basic flow almost everywhere homes, offices, schools, startups.

Each device plays a very specific role.
If even one of them is missing, nothing works.

❀ Explanation of different Network Devices

Now let’s go device by device and understand what they actually do.

1. Modem : The Gateway From ISP to Your Network

   ⤷ A modem is the first device that brings the internet into your home.
   Your Internet Service Provider (ISP) sends internet signals through fiber or cable in analog form, but your devices (phones, laptops, PCs) understand digital signals.

   ⤑ MODem → MODulation + DEModulation.

   • Modulation: Converts your digital data into analog signals so it can travel through ISP cables.

   • Demodulation: Converts incoming analog signals from your ISP back into digital form so your devices can understand them.

2. What is a Router and How It Directs Traffic ?

   ⤷ A router is the device that manages and directs all the internet traffic inside your home network.
   Once the modem brings internet into your house, the router takes that connection and distributes it to all your devices.

⤑ What the router actually do ?

• Assigns IP addresses to every device

• Decides which device gets which packet

• Sends traffic out to the internet

• Receives incoming traffic and forwards it correctly

• Creates Wi-Fi for wireless devices

⤳ You know why this is called router : Because it routes (finds the path for) data packets between networks.

❊ In real world we can say A router is like traffic police officer at a busy junction : It looks at every packet and sends it to the right direction like laptop, phone, Tv, or out to the internet.

3. Switch vs Hub : How local networks actually works ?

   ⤷ Local networks (LANs) connect multiple devices inside your home or office.
   To understand how they communicate, you must know the difference between Hub and Switch because they look similar but work completely differently.

✢ What is Hub ?

⤑ A hub sends every incoming packet to all connected devices—
whether they are the intended receiver or not.

Problems with Hub

• No security

• Slow performance

• Collisions

• Wastes bandwidth

Analogy

A hub is like shouting in a classroom.
Everyone hears everything even if the message is for one person.

✢ What is Switch ?

A switch reads the MAC address and sends the packet only to the correct device.

Benefits

• Faster

• Secure

• No collisions

• Efficient use of bandwidth

Analogy

A switch is like whispering directly to the right person instead of shouting.

✢ How Local Networks Actually Work ?

Today, almost all homes and offices use switches, not hubs.

The router connects to a switch and the switch connects multiple wired devices:

This creates a fast, stable, collision-free local network.

4. What is a Firewall and Why Security Lives Here ?

   ⤷ A firewall is the security gate of your network.
   It decides what traffic is allowed to enter or leave and what should be blocked.

✢ What a Firewall Actually Does

• Checks every incoming and outgoing packet

• Blocks dangerous or suspicious traffic

• Allows only safe, approved connections

• Protects devices from malware, attackers, and unauthorized access

✢ Why security “lives” here

⤑ Because the firewall is the first layer that faces the outside world.
It stands between the public internet and your private network,
so all security decisions happen at this point.

Real-World Analogy

A firewall is like the security guard at a building gate:

• Checks who you are

• Decides if you can enter or not

• Stops suspicious people

• Allows safe visitors

⤑ Sometimes the firewall is built inside the router.
In companies, it’s a separate dedicated device.

5. What is a Load Balancer and Why Scalable Systems Need It ?

   ⤷ A load balancer is a device (or software service) that distributes incoming traffic across multiple servers. Instead of sending all users to a single server, it spreads the load so the system stays fast, stable, and available.

   ✢ What a Load Balancer Actually Does

   • Distributes user requests across multiple servers

   • Prevents any single server from getting overloaded

   • Sends traffic to healthy servers only

   • Automatically reroutes if one server fails

   • Keeps applications fast even during peak traffic

✢ Why scalable systems need it

⤑ When one server can't handle heavy traffic, the system becomes slow or crashes.
A load balancer allows you to add multiple servers and scale horizontally.

This is how big apps like Amazon, Instagram, Flipkart, and Netflix stay online even with millions of users.

Real-World Analogy

⤑ A load balancer is like a manager at a busy store:
Customers come in → manager sends them to different counters
so no single counter is overloaded.

6. How All These Devices Work Together in a Real-World Setup ?

   ⤷ In a real home or office network, all these devices—modem, firewall, router, switch, and load balancer work together like parts of one system. Each device handles a specific step in the journey of your data.

   ⤑ Below is the exact flow:

What is Git ?

Think of Git as a time machine for your code. It's a distributed version control system that tracks every change you make to your files. Created by Linus Torvalds in 2005 (yes, the same person who created Linux), Git has become the backbone of modern software development.

But what does "distributed" actually mean? Unlike older systems where everything lived on one central server, Git gives every developer a complete copy of the project history on their own computer. You can work offline, experiment freely, and sync up with your team whenever you're ready.

Why Git is Used ?

1. Never Lose Your Work

Git keeps a complete history of every change. Accidentally broke something? Just roll back to a working version. It's like having infinite "undo" for your entire project.

2. Collaboration Made Simple

Multiple people can work on the same project simultaneously without stepping on each other's toes. Git intelligently merges everyone's changes and helps resolve conflicts when they occur.

3. Experimentation Without Fear

Want to try a crazy new feature but worried it might break everything? Create a branch, experiment all you want, and if it doesn't work out, just delete it. Your main code stays safe.

4. Professional Standard

Whether you're applying for jobs or contributing to open source, Git knowledge is expected. GitHub, GitLab, and Bitbucket—all the major platforms are built around Git.

5. Track Who Changed What and Why

Every change includes a message explaining what was done and who did it. This creates an invaluable audit trail for understanding how your project evolved.

Git Basics and Core Terminologies

Let's break down the essential concepts you need to understand:

Repository (Repo)

A repository is your project folder that Git is tracking. It contains all your files plus a hidden .git folder where Git stores its magic—the complete history of every change.

Working Directory

This is your normal project folder where you edit files. It's what you see in your file explorer or code editor.

Staging Area (Index)

Think of this as a preparation zone. Before Git permanently saves your changes, you add them to the staging area. This lets you carefully choose exactly what to include in your next save point.

Commit

A commit is a snapshot of your project at a specific moment in time. Each commit has a unique ID and includes a message describing what changed. It's like taking a photograph of your code that you can return to later.

Branch

A branch is an independent line of development. The default branch is usually called main or master. When you create a new branch, you're creating a parallel universe where you can make changes without affecting the main timeline.

HEAD

HEAD is simply a pointer showing you which commit you're currently looking at—usually the latest commit on your current branch.

Remote

A remote is a version of your repository hosted somewhere else, typically on GitHub or GitLab. It's how you share your work and collaborate with others.

Clone

Cloning creates a complete copy of a remote repository on your local machine, including all its history.

Merge

Merging combines changes from different branches. When you finish a feature on a separate branch, you merge it back into your main branch.

Common Git Commands

Here are the commands you'll use constantly, explained with real-world context:

Setting Up Git

bash

# Tell Git who you are (do this once)
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

# Start tracking a new project
git init

# Copy an existing project from GitHub/GitLab
git clone https://github.com/username/project.git

Daily Workflow Commands

bash

# Check what's changed
git status

# Add specific files to staging
git add filename.txt

# Add all changed files to staging
git add .

# Save your staged changes permanently
git commit -m "Add user login feature"

# See your commit history
git log

# See a simplified commit history
git log --oneline

Working with Branches

bash

# Create a new branch
git branch feature-name

# Switch to a branch
git checkout feature-name

# Create and switch to a new branch in one command
git checkout -b feature-name

# List all branches
git branch

# Merge another branch into your current branch
git merge feature-name

# Delete a branch you no longer need
git branch -d feature-name

Collaborating with Others

bash

# Upload your commits to GitHub/GitLab
git push origin main

# Download new changes from GitHub/GitLab
git pull origin main

# See all remote connections
git remote -v

Fixing Mistakes

bash

# Undo changes in a file (before staging)
git checkout -- filename.txt

# Remove a file from staging (but keep your changes)
git reset filename.txt

# Go back to a previous commit (careful with this!)
git reset --hard commit-id

# Create a new commit that undoes a previous commit
git revert commit-id

Useful Information Commands

bash

# See what changed in your files
git diff

# See what changed in staged files
git diff --staged

# Show details about a specific commit
git show commit-id

A Basic Developer Workflow

Let me show you how a typical day of coding with Git looks:

Morning: Starting a New Feature

bash

# Make sure you have the latest code
git pull origin main

# Create a new branch for your work
git checkout -b add-dark-mode

# Make your changes in your editor...

Afternoon: Saving Your Progress

bash

# Check what you've changed
git status

# Stage your changes
git add styles.css
git add theme-switcher.js

# Commit with a descriptive message
git commit -m "Implement dark mode toggle with user preference saving"

End of Day: Sharing Your Work

bash

# Push your branch to the remote repository
git push origin add-dark-mode

# Open a pull request on GitHub/GitLab for review

Next Day: After Approval

bash

# Switch back to main branch
git checkout main

# Get the latest changes (including your merged feature)
git pull origin main

# Delete your old feature branch
git branch -d add-dark-mode

Visual Understanding

The Three States of Git

When you modify a file, it's in your working directory. Using git add moves it to the staging area. Finally, git commit permanently saves it to your repository.

Repository Structure

my-project/
├── .git/                    (Git's database - don't touch!)
│   ├── objects/             (All your commits and files)
│   ├── refs/                (Branch pointers)
│   └── HEAD                 (Current branch pointer)
├── src/
│   └── main.js
├── README.md
└── .gitignore               (Files to ignore)

Commit History Flow

main branch:  A ← B ← C ← D ← E (HEAD)
                    ↖
feature branch:      F ← G

Each letter represents a commit. The main branch has commits A through E. A feature branch split off at commit B and has its own commits F and G.

Git feels overwhelming at first I won't lie to you. But here's the secret: you don't need to memorize everything. Start with the basics: init, add, commit, push, and pull. These five commands will cover 80% of your daily work.

Let me be honest when I first started using Git, I was just blindly following commands:

git init  
git add .  
git commit -m "First commit"

In this blog, I’ll break down what happens under the hood how Git stores your files, what lives inside the .git folder, and how Git tracks your changes using blobs, trees, and commits.

📁 What is the .git Folder?

The .git folder is created the moment you run:

git init

This hidden directory is where Git stores all version control data. Think of it as the brain of Git.

Without this folder, Git has no memory of your commits, branches, or file history.

.git Folder Structure

Key Parts:

• HEAD: Points to your current branch

• objects/: Contains all actual content, hashed and compressed

• refs/heads/: Contains your branch references

Git Objects: Blob, Tree, and Commit

Git stores data as objects. There are 3 main types:

1. Blob (Binary Large Object)

• Stores the content of a file.

• Doesn’t care about filename, just the content.

Example:
If you write Hello World in file.txt, Git saves that content as a blob and gives it a unique hash.

2. Tree

• Represents folders or directory structures.

• Stores filenames and links them to blob hashes.

Example:
A tree might say:

• file.txt → points to blob abc123

• about/ → points to another tree

3. Commit

• A snapshot of the entire project at a specific point in time.

• Stores:

  • A pointer to the tree

  • A commit message

  • Author info

  • A pointer to the previous commit

Commit → Tree → Blob Structure

Visualize this like a linked chain:

How Git Tracks Changes

Unlike some version control systems that store diffs, Git stores complete snapshots.

When you commit, Git doesn’t say “this line changed” - it says:

“Here’s the full state of the project right now, and here’s what changed compared to the previous commit.”

This is made possible by the content-addressed system using SHA-1 hashes.

What Happens When You Run git add?

Let’s say you run:

git add index.html

Here’s what Git does internally:

1. Takes the content of index.html

2. Creates a blob object for it

3. Adds an entry to the staging area (aka index) to mark it for commit

Note: Git doesn’t care about file names at this point only content!

What Happens When You Run git commit?

Let’s say you run:

git commit -m "Add homepage"

Git performs 3 actions:

1. Takes the files in the staging area

2. Creates a tree object

3. Creates a commit object, linking to:

   • the tree

   • the previous commit

   • the message and author

4. Updates the branch (like main) to point to this new commit

Git Workflow (Add → Commit)

Here’s how the process flows:

Git Hashes: The Backbone of Git

Everything Git stores is hashed using SHA-1.

For example, this:

git hash-object index.html

…might return:

e69de29bb2d1d6434b8b29ae775ad8c2e48c5391

This means Git is saving content by its hash not file name.

Why is this awesome?

• Ensures data integrity

• Detects even the tiniest changes

• Prevents duplication

A real-life example to understand Git and version control

Description

Before version control systems existed, developers had no proper way to manage code changes.
They shared projects using pendrives, emails, and local folders, which worked only for very small tasks.

As projects and teams grew, this approach started failing badly.
This blog explains why version control exists, using a simple real-life analogy and then connects it to how modern Version Control Systems (VCS) work today.

Life Before Version Control System :

Before version control systems existed, developers managed code manually.

A developer would write code on their computer and share it with others using:

• Pendrives

• Email attachments

• ZIP files

After getting feedback, the code was changed and shared again in the same way.

At first, this looked simple.
But when changes increased, problems started.

To avoid losing work, developers created folders like:

• final

• final_v2

• latest_final

Soon, even the developer could not answer:

• Which version is the latest?

• What changed last time?

• Who made those changes?

When multiple people worked on the same code:

• Files overwrote each other

• Changes were lost

• There was no history of edits

Pendrives also had risks:

• They could be lost

• They could get corrupted

• They worked only for one person at a time

This made collaboration slow, confusing, and unsafe.

This entire situation is known as the Pendrive Problem.
It clearly showed that manual code sharing does not work, especially for teams.

This is why developers needed a better solution - Version Control Systems.

Introduction to Version Control Systems :

A Version Control System (VCS) is a tool that helps developers track and manage changes to code.

A VCS allows developers to:

• Record every update to the codebase

• Collaborate without overwriting each other’s work

• Go back to earlier versions if needed

• Maintain a clear history of changes

Instead of pendrives, developers work using a repository.

How Version Control Works (Simple View) :

Instead of sharing code using pendrives or WhatsApp, developers use a repository to work together.

• The repository is a central place where the main project code is stored.

• Every developer has their own working copy on their computer.

• Developers make changes in their working copy without affecting others.

• When a change is ready, they commit it to the repository.

• Other developers update their working copy to get the latest changes.

• This way, everyone stays in sync and works on the same project safely.

In short :
\> Repository = main storage
\> Working copy = personal workspace
\> Commit = send changes
\> Update = receive changes

This system makes teamwork organized, safe, and efficient.

Why Version Control Became Mandatory in Modern Development

As software projects became bigger and more complex, developers needed a better solution.

Version Control Systems were created to:

• Track every change made to the code

• Prevent data loss

• Maintain complete history

• Allow multiple developers to work together safely

Instead of sharing files manually, developers started working on a shared repository.

This made collaboration faster, safer, and more reliable.

Today, version control is not optional.
It is a mandatory part of modern software development.

Popular Version Control Systems :

Git is the most widely used Distributed Version Control System, developed by Linus Torvalds in 2005 for managing the Linux kernel. It is highly efficient, supports branching and merging, and has a fast, decentralized workflow. Git is the backbone of services like GitHub, GitLab and Bitbucket, making it a popular choice for developers worldwide.