DEV Community: Debashis Das

Arrow Functions in JavaScript: A Simpler Way to Write Functions

Debashis Das — Tue, 03 Mar 2026 20:29:37 +0000

JavaScript has evolved a lot.

if you compare old-school JS with modern JS, one thing becomes very clear:

We write less code today to achieve the same result.

And one of the bioggest reasons behind that is arrow functions.

Let's break this down in a clean, simple, and practicle way.

1️⃣ What Are Arrow Functions?

Arrow functions were introduced in ES6 (ECMAScript 2015).

Before ES6, we used the traditional function keyword to create functions. It worked fine — but it was often verbose.

Arrow functions give us a shorter and cleaner way to write functions.

Think of them as a more modern, minimal version of regular functions.

2️⃣ How Arrow Functions Reduce Boilerplate

Let’s start with something very basic.

Traditional Function

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

now the same thing an arrow function:

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

This is less typing , Cleaner look, and modern style.

now lets go even further (you will understand how in a moment ⤵ ).

const greet = (name) => "Hello " + name;

That it One line. fully readable.This is why arrow function becomes so popular.

3️⃣ Basic Arrow Function Syntax

The general structure looks like this:

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

Breakdown:

(parameters)  =>  { body }
     ↑             ↑
  input        what it does

The => symbol is what makes it an arrow function.

4️⃣ Arrow Function with One Parameter

If there is only one parameter, parentheses are optional.

Normal Function

function square(num) {
    return num * num
}

Arrow Function

const square = num => {
    num * num
}

cleaner already, right?

5️⃣ Arrow Function with Multiple Parameters

If there are multiple parameters, then parentheses are required.

Normal Function

function add(a, b) {
    return a + b
}

Arrow Function

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

simple rule:

One parameter -> parentheses optional
Multiple parameters -> parentheses required

6️⃣ Implicit Return vs Explicit Return

This is where arrow functions become powerful.

Explicit Return

When you use curly braces {} , you must use return keyword.

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

Implicit Return

If the function has only one expression, you can remove:

Curly braces
return keyword

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

That's called an Implicit return.

▶ If you see no {} --- the value is return automatically.

lets see Another example:

const sayHi = name => "Hi " + name;

No return

Still works perfectly and this is what makes small functions extremely readable.

7️⃣ Basic Difference: Arrow Function vs Normal Function

We won’t go deep into advanced concepts. Just the practical differences:

Normal Function Arrow Function Uses function keyword Uses => More verbose Short and clean Traditional style Modern JS style Has its own this Doesn’t have its own this

For now, focus on readability and simplicity.

Arrow functions are mostly used for:

Small helper functions
Callbacks
Functional programming patterns

✨ Assignment Practice

Let’s apply what we learned.

✅ 1. Normal Function: Square of a Number

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

✅ 2. Rewrite Using Arrow Function

const square = num => num * num;

✅ 3. Arrow Function: Even or Odd

const checkEvenOdd = num => 
    num % 2 === 0 ? "Even" : "Odd";

Short. Clean. Powerful.

✅ 4. Use Arrow Function Inside map()

Let’s say we have an array:

const numbers = [1, 2, 3, 4, 5]

using a normal function:

const doubled = numbers.map(function (num) {
    return num * 2
})

Now using arrow function:

const doubled = numbers.map(num => num * 2)

This is where arrow functions shine.

Less clutter. More focus on logic.

🔄 Diagram: Normal Function → Arrow Function

function add(a, b) {
    return a + b;
}

            ↓

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

            ↓

const add = (a, b) => a + b;

Step-by-step simplification.

🧠 Arrow Function Syntax Breakdown

const greet = name => "Hello " + name;

const      → variable
greet      → function name
name       → parameter
=>         → arrow operator
"Hello..." → returned value (implicit)

💡 Final Thoughts

Arrow functions are not just about writing less code.

They are about:

Clarity
Readability
Expressing intent quickly
Writing modern JavaScript

when your function is small and simple, arrow function make your code feel elegant.

And once you start using them regularly, going back to the old style will feel... too heavy. Modern JavaScript is not about writing more code.

It's about writing smarter.

🌾 JavaScript Promises Explained Through Panchayat: A Cinematic Guide to Async Programming

Debashis Das — Mon, 02 Mar 2026 22:07:11 +0000

Let me tell you a story.

Not about code.

About a A Cinematic Guide to JavaScript Asynchronous World, How Phulera Accidentally Explained Asynchronous JavaScript

And trust me — by the end of this story, you’ll understand JavaScript Promises so clearly that even a non-technical person could explain them.

🎬 Episode 1 — The One Computer of Phulera

Phulera Panchayat office has:

One old desktop computer
One slow internet connection
One secretary: Abhishek Tripathi
And unlimited villagers with problems

Morning 10 AM.
Villagers line up.

Rinki:
“Sachiv ji, certificate chahiye.”

Prahlad ji:
“Pension status check karna hai.”

Vikas:
“Sir, internet nahi chal raha.”

Abhishek sits at the computer.
Important fact: The compuetr can do only one task at a time.If it starts printing then it cannnot upload, If it uploads, it cannot verify Aadhaar.

This computer is JavaScript.
JavaScript is single-threaded. so onely one task runs at a time.That
single running place is called:👉 The call stack.
Now imagine something dangerous.
Abhishek clicks “Verify Aadhaar”.
Government website takes 10 seconds to respond.
If the computer just waits…

Entire office freezes.
No one moves.
No work happens.
Everyone angry.
That would destroy Phulera.
But that’s not what happens.
Because Abhishek learned delegation.

🎬 Episode 2 — Delegation (Asynchronous Behavior)

When the website is slow, abhisekh does something smart.
He submits the requiest, then he moves to next villager.
He does not stare at loading screen.
This is asynchronous behavior.

In javascript:

long tasks go outside the call stack.
Browser or Node handles them.
When finished, they come back.

But now question is:
How does Abhisekh know when work is done?
How does he react?
How does he handle failure?
That coordination system is called:
👉 A promise

🎬 Episode 3 — What Is a Promise?

Block office officer says:

“Abhishek ji, file le li hai. Ya toh kaam ho jayega, ya error aa jayega.”

He did not give result.
He gave commitment.
That is a Promise

A Promise means:
👉 "I will give you result later."

Either:

it could be Success ( fulfilled )
it could be Failed ( rejected )

Until then...
It is pending.

🎬 Episode 4 — Three States of Promise (Village Version)

Every promise has 3 states.

1️⃣ Pending — “File Gayi Hai”

Work started.
But no result yet.

Example:


const fileWork = new Promise((resolve, reject) => {
  console.log("File sent to Block Office...");
});

console.log(fileWork)

Output:


File sent to Block Office...
Promise { <pending> }

At this moment promise is pending.

2️⃣ Fulfilled — “Kaam Ho Gaya”


const fileWork = new Promise((resolve, reject) => {
  resolve("Certificate Approved");
});

fileWork.then(result => console.log(result));

Output:


Certificate Approved

Now the Promise moved:
Pending -> Fulfilled

3️⃣ Rejected — “Server Down Hai”


const fileWork = new Promise((resolve, reject) => {
  reject("Server Down");
});

fileWork.catch(error => console.log(error));

Output:


Server down

Pending -> Rejected

🔒 Important Rule — It Cannot Change

Once fullfilled, it can not becaome rejected.
One rejected, it can not become fullfilled.
This is immutability, like government stamp.
Once stamped, it consider as final .

🎬 Episode 5 — Callback Hell (Old Panchayat System)

Before modern system, Abhishek workflow was like this:
First verify Aadhaar.
Then check land.
Then approve scheme.
Then send SMS.

All inside each other.
Let's see in code:


verifyAadhaar(function() {
  checkLand(function() {
    approveScheme(function() {
      sendSMS(function() {
        console.log("Work Done");
      });
    });
  });
});

Look at indentation.
Now imagine the error handling:


verifyAadhaar(function(err) {
  if (!err) {
    checkLand(function(err) {
      if (!err) {
        approveScheme(function(err) {
          if (!err) {
            sendSMS(function(err) {
              if (!err) {
                console.log("Done");
              }
            });
          }
        });
      }
    });
  }
});

Problems:
Too much nesting
Hard to read
Manual error checking
Mental headache
This is what we called Callback Hell.
Not just indentation.
It is architechtureal weakness.
Phulera needed structure.
JavaScript got Promises.

🎬 Episode 6 — Promise Handling (.then, .catch, .finally)

now the system becomes clean.


applyForScheme()
  .then(result => {
    console.log("Approved:", result);
  })
  .catch(error => {
    console.log("Rejected:", error);
  })
  .finally(() => {
    console.log("Register Updated");
  });

What happens?
If success:

Approved: PM Awas Yojana
Register Updated

If failure:

Rejected: Document Missing
Register Updated

Notice:
.finally() runs always.

Used for:

Cleanup
Closing
Hiding loadeer

Architecture thinking:
Creation ≠ Reaction
We separate them.

🎬 Episode 7 — Promise Chaining (Sequential Work)

Real Panchayat flow:

Verify Aadhaar
Fetch Land
Approave Scheme
Send SMS


verifyAadhaar()
  .then(aadhaar => fetchLand(aadhaar))
  .then(land => approveScheme(land))
  .then(result => sendSMS(result))
  .then(() => console.log("Process Complete"))
  .catch(err => console.log("Error:", err));

Output if success:

Process Complete

If land check fails:

Error: Land Record Not Found

Important:

Error jumps directly to catch.

No need to check at every step.

This is error propagation.

Clean.

🎬 Episode 8 — Promise.all() (Emergency Meeting)

Government demands 3 reports:

Population
Road status
Pension list

All required. JavaScript launches all promises together. No waiting. No sequence. No hierarchy. It expect all three method to be fulfilled.
If even one of promise has failed or reject then whole promises has failed, and it directly goes into the catch block.


Promise.all([ getPopulation(), getRoadStatus(), getPensionList() ])
.then(results => console.log(results))
.catch(err => console.log("Report Failed:", err));

If all succeed:


["5000 people", "Road OK", "120 pensions"]

If one fails:


Report Failed: Road Data Missing

Fail-fast behavior.
All or nothing.

🎬 Episode 9 — Promise.allSettled() (Full Audit)

Now suppose:

Abhishek wants to know what happened,
even if some failed.


function getPopulation() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Population Done");
    }, 1000);
  });
}

function getRoadStatus() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("Road Error");
    }, 1500);
  });
}

function getPensionList() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Pension Done");
    }, 500);
  });
}





Promise.allSettled([getPopulation(), getRoadStatus(), getPensionList()])
    .then(results => {
        console.log(results)
    });

Ouput:


[
  { status: 'fulfilled', value: 'Population Done' },
  { status: 'rejected', reason: 'Road Error' },
  { status: 'fulfilled', value: 'Pension Done' }
]

Here notice something powerful Promise.allSettled() always resolves. It never rejects.
Instead of failing fast, it gives you structured objects describing what happened:

status: "fulfilled" with a value
status: "rejected" with a reason

Think about that for a second. While Promise.all() will crash the moment anything goes wrong, allSettled() patiently waits for every single promise to finish, no matter what. Good or bad, success or failure, it collects the results and hands them back to you in a neat little package.

And the package is beautifully structured. Every result comes back as one of two shapes:

// When things go right
{ status: "fulfilled", value: "✅ Email sent to user 1" }

// When things go wrong  
{ status: "rejected", reason: "❌ Invalid email address" }

No guessing. No try-catch gymnastics. Just clean, predictable data you can loop through and analyze.
This is absolutely perfect when your operations don't depend on each other:

📧 Sending 1000 marketing emails — One invalid address shouldn't stop the other 999 from going out
📊 Running parallel analytics jobs — Let each data source report its own success or failure
🖼️ Uploading a batch of photos — A corrupted image shouldn't cancel the whole album upload

With allSettled(), you get the complete picture. You can see exactly what worked, what didn't, and why. Then you make decisions based on real data instead of just watching everything collapse at the first sign of trouble.

Because here's the truth not every mission requires perfection. Sometimes you don't need everything to succeed. Sometimes you just need visibility.

You want to know what happened, learn from the failures, and keep moving forward. That's exactly what Promise.allSettled() gives you.

🎬 Episode 10 — Promise.race() (The "First One Wins" Showdown)


const contractorA = new Promise(resolve =>
  setTimeout(() => resolve("👷 Contractor A finished the drywall"), 3000)
);

const contractorB = new Promise(resolve =>
  setTimeout(() => resolve("👩 Contractor B finished the drywall"), 1000)
);

Promise.race([contractorA, contractorB])
  .then(result => console.log(result));

// Output: 👩 Contractor B finished the drywall

What just happened? We hired two contractors to do the same job. We don't care who does it—we just need it done fast. Contractor B finished in 1 second, Contractor A took 3 seconds. We pay B, send A home, and move on.
The Rule: Promise.race() settles with the result (or error) of the very first promise that finishes. Winners take all. Losers get ignored.

🚨 But What If the Fastest One Fails?

Here's where it gets tricky. Remember—race() only cares about who finishes first. It doesn't care if that finish is a success or a failure.

let's analyze the code:


const speedyContractor = new Promise((_, reject) =>
  setTimeout(() => reject("💥 Speedy guy showed up drunk"), 500)
);

const reliableContractor = new Promise(resolve =>
  setTimeout(() => resolve("✅ Reliable guy finished perfectly"), 3000)
);

Promise.race([speedyContractor, reliableContractor])
  .then(result => console.log("Winner:", result))
  .catch(error => console.log("Race abandoned:", error));

// Output: Race abandoned: 💥 Speedy guy showed up drunk

The speedy guy crashed first. Game over. The reliable one finished beautifully—but three seconds too late. Nobody's waiting around to hear that good news.

🏢 Real-World Analogy: The Uber Eats Timer

You're hungry. You order food. The app says "Delivery by 7:30 PM."

But here's the thing—you're not actually waiting forever. Your phone starts a silent race:


const foodDelivery = getFoodFromRestaurant(); // Might take 5 mins, might take 30
const timeout = new Promise((_, reject) =>
  setTimeout(() => reject("⏰ Delivery timeout - here's your money back"), 1800000) // 30 min
);

Promise.race([foodDelivery, timeout])
  .then(food => console.log("🍔 Food arrived!", food))
  .catch(error => console.log("😠", error));

Two promises racing:

The Food Promise — The driver actually bringing your meal
The Timeout Promise — A timer that rejects after 30 minutes

If the food wins → 🎉 You eat
If the timer wins → 💸 You get refunded, order cancelled

This is exactly how timeout logic works in real apps. You're not waiting forever for a slow server or a lost delivery driver. You set a deadline, and the first one to cross the finish line decides your fate.

🎬 Episode 11 — Promise.any() (At Least One Helper)

Promise.any() is the optimist of the group. It waits for the first successful promise and ignores any failures along the way. Think of it like calling three friends to help you move—you don't care who cancels, you just need someone to show up with a truck. The moment one friend arrives, you're good to go. If every single friend bails? That's when any() finally gives up and throws an AggregateError saying "everyone failed." It's perfect for fallback scenarios where you have multiple options and just need one to work.


Promise.any([
  Promise.reject("Vikas Busy"),
  Promise.reject("Prahlad Ji Busy"),
  Promise.resolve("Pradhan Ji Arrived")
])
.then(result => console.log(result))
.catch(err => console.log(err));

Step-by-step, here's what JavaScript does:

1. The Setup — You Need Help Moving Furniture

You have a truck, but you can't lift heavy furniture alone. You call three friends:

Vikas → "Sorry man, I'm busy" (reject)
Prahlad Ji → "Can't make it today" (reject)
Pradhan Ji → "On my way!" (resolve)

2. The Race Begins

Promise.any() starts watching all three promises simultaneously:

Friend	Status	Message
Vikas	❌ Rejected immediately	"Vikas Busy"
Prahlad Ji	❌ Rejected immediately	"Prahlad Ji Busy"
Pradhan Ji	✅ Resolved immediately	"Pradhan Ji Arrived"

3. The "Aha!" Moment

Here's the magic of Promise.any() — it ignores the rejections and keeps waiting for a success. The moment Pradhan Ji's promise resolves, any() grabs that success and runs the .then() block.


.then(result => console.log(result))
// Output: "Pradhan Ji Arrived"

4. What Gets Printed?

You'll see in your console:

Pradhan Ji Arrived

The two rejections? Completely ignored. They're like those friends who cancel—annoying, but not stopping your day.

🔄 What If EVERYONE Failed?

Try this version:

Promise.any([
  Promise.reject("Vikas Busy"),
  Promise.reject("Prahlad Ji Busy"),
  Promise.reject("Pradhan Ji Also Busy") // Now everyone rejects
])
.then(result => console.log(result))
.catch(err => console.log(err));

now you will get something diffrenet in th console:

[AggregateError: All promises were rejected]

AggregateError is JavaScript's way of saying "I tried everyone. Literally everyone said no.😂

🎯 The One-Liner Summary

Promise.any() keeps knocking on doors until one opens. If every door is locked, it comes back with a giant ring of keys saying "none of these worked."

🎬 Episode 12 — async/await (Calm Abhishek)


async function process() {
  try {
    const aadhaar = await verifyAadhaar();
    const land = await fetchLand(aadhaar);
    const approval = await approveScheme(land);

    console.log("Approved:", approval);
  } catch (error) {
    console.log("Rejected:", error);
  }
}

process();

Looks simple.
Like synchronous code.
But internally uses Promises.

🧘 What's Actually Happening Here?

Abhishek needs to process a government scheme application. It's a three-step nightmare:

Verify Aadhaar — Takes 10 seconds
Fetch Land Records — Takes 8 seconds
Get Final Approval — Takes 5 seconds

In the old days, Abhishek would stand at his desk, doing nothing, waiting for each step to finish. His coworkers would bring him coffee. He'd stare at the screen. Nothing else got done.

Now? Watch the magic:

const aadhaar = await verifyAadhaar();

When Abhishek hits this line, here's what happens:

👉 He puts down his pen and walks away from this task
👉 The office keeps running — phones ring, other files move, coffee gets made
👉 10 seconds later, the Aadhaar result comes back
👉 Abhishek walks back to this exact spot and picks up where he left off
It's like magic. But it's just async/await.

🔍 Peeking Behind the Curtain

Here's the truth: async/await is just fancy syntax for Promises. That whole function? It's secretly doing this:

function process() {
  return verifyAadhaar()
    .then(aadhaar => fetchLand(aadhaar))
    .then(land => approveScheme(land))
    .then(approval => console.log("Approved:", approval))
    .catch(error => console.log("Rejected:", error));
}

but look at how much cleaner the async/await version is:

With`.then()`	With `async/await`
Nested chains	Linear like a recipe
Callbacks everywhere	Looks like regular code
Easy to mess up indentation	Hard to mess up
catch() at the end	try/catch you already know

await pauses only this function.
Office continues working.

🚗 The Car Analogy

Promises with .then() are like driving a manual transmission:

You're in control
You understand every gear shift
But it takes more mental effort

async/await is like driving an automatic:

Same engine underneath
Same destination
You just press gas and go

Both get you there. One just lets you enjoy the ride more.

🧠 The "It Only Pauses THIS Function" Trick

This is the part everyone gets wrong. Look closely:

async function process() {
  const aadhaar = await verifyAadhaar(); // ⏸️ Pauses HERE
  console.log("Still in process function");
}

console.log("Start");
process();
console.log("End");

What order do these print?

"Start" — obviously
"End" — wait, what?
"Still in process function" — last!

Because await only pauses the process function. The rest of your JavaScript? Running happily. The office never stops working—only Abhishek's specific task takes a coffee break.

🎯 The Bottom Line

async/await took Promises—which were already pretty good—and made them beautiful.

🎯 The Bottom Line

async/await took Promises—which were already pretty good—and made them beautiful.

Before	After
`fetchUser().then(user => fetchPosts(user.id)).then(posts => display(posts))`	`const user = await fetchUser(); const posts = await fetchPosts(user.id); display(posts);`

See the difference? Same power. Same performance. Just... calm.
Like Abhishek.

🎬 Episode 13 — Event Loop (The Hidden Panchayat Mechanism)


console.log("Office Open");

setTimeout(() => console.log("Tea Arrived"), 0);

Promise.resolve().then(() => console.log("Block Reply"));

console.log("Villagers Waiting");

Actual Output:


Office Open
Villagers Waiting
Block Reply
Tea Arrived

Wait... what?

If setTimeout is set to 0 milliseconds, shouldn't "Tea Arrived" print immediately? Why does "Block Reply" jump ahead?

Here's what's really happening inside Abhishek's computer:

🪑 The Three Waiting Rooms

Behind the scenes, JavaScript has three rooms where tasks wait their turn:

Room	What goes There	Example
call stack	Things happening Right now	`console.log`
Microtask Queue	Promises callbacks (VIP pass)	`.then()`, `.catch`
Microtask Queue	Timers, DOM events	`setTimeout`, `setInterval`

⏱️ The 0-Second Myth

When you write setTimeout(..., 0), you're not saying "run this now." You're saying:

"Take this task, put it in the macrotask queue, and run it after everything else is done."

Even with zero milliseconds, it waits.

🧠 The Order of Power

Here's the pecking order JavaScript follows:

1️⃣ Call Stack First — Run everything currently in hand

"Office Open" prints
"Villagers Waiting" prints

2️⃣ Microtask Queue Next — Promise callbacks jump the line

"Block Reply" prints

3️⃣ Macrotask Queue Last — Timers finally get their turn

"Tea Arrived" prints

🏢 The Panchayat Analogy

JavaScript	Phulera Panchayat
Call Stack	Abhishek actively working right now
Microtask Queue	Block officer's file (priority)
Macrotask Queue	Tea order (can wait)

Abhishek finishes his current work (call stack). Before making tea, he checks if any block officer files arrived (microtasks). Only after clearing those does he finally make tea (macrotask).

🎯 The One Rule to Remember

Promise jump the queue. Timerss wait their turn.

That's why "Block reply" always beats "Tea Arrived"--even when tea was "ordered" first. Microtask are the VIPs pof javaScript.Time are general admisssion. and the Event Loop is the bouncer making sure everyone enters in the right order.

🌾 Final Scene

Phulera is small.

But system is structured.

Work is delegated.
Responses are coordinated.
Errors are handled.
Flow is controlled.

JavaScript Promises do same thing.

They do not make JavaScript multi-threaded.

They make it organized.

They bring governance to chaos.

Just like Abhishek didn’t control time…

He controlled flow.

And that…

Is what mastering Promises truly means.

Emmet for HTML: A Beginner’s Guide to Writing Faster Markup

Debashis Das — Wed, 28 Jan 2026 21:48:34 +0000

When you start learning HTML, writing tags feels slow and repetitive.
You type <div>, then </div>, again and again.
This is where Emmet makes life easier.

Let’s understand Emmet step by step, in a very simple way.

1. What is Emmet? (In very simple terms)

Emmet is a shortcut system for writing HTML faster.

Instead of writing full HTML tags, you write short abbreviations, and Emmet automatically expands them into proper HTML.

Think of Emmet as:

“Short code → Full HTML”

2. Why Emmet is useful for HTML beginners

As a beginner:

HTML feels slow to type
Too many opening and closing tags
Easy to make small mistakes

Emmet helps you:

Write HTML faster
Avoid typing errors
Focus on structure, not typing

You still learn HTML properly—Emmet just saves time.

3. How Emmet works inside code editors

Emmet works inside code editors, not in the browser.

Most modern editors support Emmet:

VS Code (recommended)
Sublime Text
Atom

In VS Code, Emmet works by default.

You type an abbreviation → press Tab → HTML appears.

4. Basic Emmet syntax and abbreviations

Emmet uses symbols to describe HTML structure.

Some basics:

tag → creates an element

.→ class
#→ id
>→ child (nested)
*→ repeat elements

Don’t worry—examples will make this clear.

5. Creating HTML elements using Emmet

Emmet

After pressing Tab:

<p></p>

Another example:

h1

Output:

<h1></h1>

One word → full HTML tag.

6. Adding classes, IDs, and attributes

Class example

Emmet:


p.text

Output:


<p class="text"></p>

ID Example

Emmet:


div#container

Output:


<div id="container"></div>

Class + ID together

Emmet:


div.box#main

Output:


<div class="box" id="main"></div>

7. Creating nested elements

Nesting means elements inside elements.
Emmet:


div>p

output:


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

Another example:
Emmet:


div>h1+p

Output:


<div>
  <h1></h1>
  <p></p>
</div>

>means inside.

8. Repeating elements using multiplication

You often need multiple similar elements.

Emmet:


li*3

Output:


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

With nesting:
Emmet:


ul>li*3

Output:


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

This is very common in real projects.

9. Generating full HTML boilerplate with Emmet

Instead of writing full HTML structure manually…

Emmet:

(orhtml:5)
Output:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>

One shortcut → complete HTML page

Final Thoughts

Emmet is a shortcut language for HTML
It saves time but doesn’t replace learning HTML
You can use it daily, even as a beginner
Completely optional, but very powerful

Best way to learn Emmet: Try each example yourself in VS Code and once you get used to it, writing HTML without Emmet will feel… slow.

CSS Selectors 101: Targeting Elements with Precision

Debashis Das — Tue, 27 Jan 2026 17:05:07 +0000

When you start learning CSS, one question comes up very early is that, “How does CSS know what to style?”
That’s where CSS selectors come in.

Selectors are the foundation of CSS. If HTML is the skeleton of a webpage, then CSS selectors are the eyes—they help CSS find the exact elements to style.

Let’s understand this step by step, without overcomplicating things.

1. Why CSS Selectors Are Needed

Imagine a webpage with:

headings
paragraphs
buttons
images

CSS needs a way to say:

“Style this paragraph, but not that one.”

Selectors are simply ways to choose HTML elements.

Without selectors, CSS would have no idea where to apply styles.

2. Think of Selectors Like Addressing People

Real-world analogy time

Element selector → calling everyone with the same role

“All students, stand up.”
Class selector → calling a group

“Students in Section A, stand up.”
ID selector → calling one specific person

“Rahul, stand up.”

CSS works the same way.

3. Element Selector

The element selector targets all elements of a specific type.
Example:


p {
  color: blue;
}

This means:

"Styles all <p> elements on the page."

Before:

<p>Hello World</p>
<p>Learning CSS</p>

After:

Both paragraphs turn blue

Simple
Useful for global styling
Not very specific

4. Class Selector

A class selector targets elements with a specific class.

syntax:

.box {
  border: 1px solid black;
}

html:

<div class="box">Learning  css</div>
<div class="box">Hello world</div>

result:

This means:

“Style only elements with class box.”

✅ Reusable
✅ Most commonly used
✅ Can be applied to multiple elements

5. ID Selector

An ID selector targets one unique element.

syntax:


#main-title {
  font-size: 32px;
}

HTML:

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

result:

Important rules:

IDs should be unique
One ID = one element only

Use IDs when something is special and one-of-a-kind.

6. Group Selectors

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

example:


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

This means:

“Apply this style to h1, h2, and p together.”

This helps reduce repetition and keeps CSS clean.

7. Descendant Selectors

A descendant selector targets elements inside another element.

example:


div p {
  color: green;
}

HTML:


<div>
  <p>This will be green</p>
</div>

<p>This will NOT be green</p>

result:

Meaning:

“Select all <p> elements inside a <div>.”

This is very useful for structured layouts.

8. Basic Selector Priority (High-Level)

Sometimes multiple selectors target the same element.
CSS then follows a simple priority rule:

ID  >  Class  >  Element

example:

p { color: blue; }
.text { color: green; }
#special { color: red; }

HTML:

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

Result:

Final color: red (that mean - ID wins)

don’t stress too much now—just remember this order.

Diagram 1: Selector Targeting Flow


HTML Element
     ↓
Element Selector
     ↓
Class Selector
     ↓
ID Selector (most specific)

Diagram 2: Class vs ID Usage


Class (.card) → Many elements
ID (#header) → One element only

Final Thoughts

CSS selectors may look small, but they are extremely powerful.

If you understand:

element selectors
class selectors
id selectors
how targeting works

You already understand the core of CSS.

Everything else—layouts, animations, responsiveness—builds on this, and take it slow, practice a lot, and inspect real websites.
That’s how CSS really clicks.

Understanding HTML Tags and Elements

Debashis Das — Tue, 27 Jan 2026 11:58:47 +0000

Understanding HTML Tags and Elements

When you open any website, what you see—text, buttons, images, headings—doesn’t just magically appear. Behind the scenes, HTML is doing most of the structural work.
Think of HTML as the skeleton of a webpage. Just like our body needs bones to hold everything together, a website needs HTML to give it shape.

Let’s break it down step by step, in the simplest way possible.

1. What is HTML and Why Do We Use It?

HTML (HyperText Markup Language) is the standard language used to create webpages.

We use HTML to:

Structure content on the web
Tell the browser what is a heading, what is a paragraph, what is an image
Organize text, links, images, forms, and more

Without HTML, a webpage would just be plain text with no structure or meaning.

2. What Is an HTML Tag?

An HTML tag is like a label that tells the browser how to treat a piece of content.

You can think of a tag like a box label 📦
It says:

“Hey browser, the content inside me is special—handle it this way.”

Example:


<p>This is a paragraph</p>

Here, <p> tells the browser that the text inside is a paragraph.

3. Opening Tag, Closing Tag, and Content

Most HTML tags come in pairs:

<tagname> content </tagname>

Let’s break it down:


<h1>Hello World</h1>

<h1> → Opening tag
</h1> → Closing tag
Hello World → Content

Together, they form a complete structure.

4. What Is an HTML Element?

An HTML element = opening tag + content + closing tag

<p>Hello chai aur code</p>

<p> → tag
Hello chai aur code → content
</p> → tag

All of this combined is called an HTML element.

Simple difference:

Tag → Just the markup (<p>)
Element → The full thing (<p>content</p>)

5. Self-Closing (Void) Elements

Some elements don’t need closing tags because they don’t wrap content.
They are called self-closing or void elements.

Examples:


<img src="image.jpg">
<br>
<hr>
<input>

They perform a task instead of holding content:

<img> displays an image
<br> creates a line break

No closing tag needed

6. Block-Level vs Inline Elements

This concept is very important for layout.

Block-Level Elements

Take the full width of the page
Always start on a new line

Examples:

<h1>Heading</h1>
<p>Paragraph</p>
<div>Container</div>

Inline Elements

They take only the space they need
Stay on the same line

Examples:

<span>Text</span>
<a href="#">Link</a>
<strong>Bold</strong>

Visual idea:

[ Block Element ]
[ Another Block ]

Inline inline inline

7. Commonly Used HTML Tags (Beginner-Friendly)

Here are some tags you’ll use all the time:

<h1> to <h6> → Headings
<p> → Paragraph
<div> → Container (block-level)
<span> → Inline container
<a> → Link
<img> → Image
<ul>, <ol>, <li> → Lists

No need to jump into advanced tags yet—master the basics first.

Diagram: HTML Tag vs Element

How a Browser Works: A Beginner-Friendly Guide to Browser Internals

Debashis Das — Mon, 26 Jan 2026 15:45:18 +0000

What Really Happens When You Press Enter?

We all do this every day.

You open a browser, type a website address, and press Enter.
Within seconds, a page appears — text, images, buttons, colors, animations.

It feels instant.

But behind the scenes, your browser performs many coordinated steps, almost like a factory assembly line, to turn a URL into pixels on your screen.

This article explains that journey in simple English, without heavy technical words, so even a beginner can understand how a browser really works.

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

A browser is not just a website opener.
A browser is a software system whose job is to:

talk to servers on the internet
understand HTML, CSS, and JavaScript
decide how things should look
and finally draw pixels on your screen Think of a browser as a translator + painter + coordinator all in one.

Main Parts of a Browser (High-Level View)

At a high level, a browser is made of several parts working together:

User Interface – what you see and click
Networking – fetching data from the internet
Browser / Rendering Engine – understanding and displaying pages
JavaScript Engine – running JS code
Storage & Security layers – cookies, cache, sandboxing

Diagram: High-level browser architecture

User Interface: What You Actually Interact With

This is the visible part of the browser:

address bar
back / forward buttons
tabs
bookmarks

Important point:
👉 The UI does NOT decide how a webpage looks
It only helps you control the browser.

Browser Engine vs Rendering Engine (Simple Difference)

This is a common confusion, so let’s simplify it.

Browser Engine

→ Acts like a manager
→ Connects UI with the rendering engine

Rendering Engine

→ Does the real work of turning code into visuals
→ Understands HTML and CSS

Examples (just names, no deep dive):

Chrome → Blink
Firefox → Gecko

Networking: How the Browser Gets Website Files

When you press Enter:

Browser asks DNS for the server address
Browser sends a request to that server
Server sends back:
- html
- css
- javaScipt
- images

Diagram: Browser -> internet -> Server -> Response

HTML Parsing and DOM Creation

Once HTML arrives, the browser does not display it immediately.
First, it parses the HTML.
Parsing means breaking something big into smaller meaningful pieces.
The browser reads HTML line by line and builds a DOM (Document Object Model). DOM is a tree structure that representing the page.

Diagram: HTML -> DOM Tree

Analogy:
You can think like HTML is a recipe text, and DOM is the structured ingredient list.

CSS Parsing and CSSOM Creation

CSS goes through a similar process.
The browser reads the CSS rules, understands styles and then builds a CSSSOM (CSS Object Model).

CSSOM is how the browser understands your CSS.
When the browser reads a CSS file, it doesn’t apply styles directly—it first converts them into a structured format called the CSS Object Model (CSSOM).
This CSSOM tells the browser things like colors, font styles, sizes, and layout rules.
Later, the browser combines CSSOM with the DOM to decide how the page should actually look on the screen.

Diagram: CSS → CSSOM Tree

How DOM and CSSOM Work Together

Now the browser has two things.
One is the DOM, which tells what elements exist on the page.
The other is the CSSOM, which tells how those elements should look.

The browser joins these two to create the Render Tree.
This Render Tree contains only the visible parts of the page and knows exactly how each part should be shown on the screen.

Diagram: DOM + CSSOM -> Render Tree

Layout, Painting, and Display

After the browser knows what to show and how it should look, it starts building the page for real.

First comes Layout. Here, the browser decides where everything should go on the screen and how much space each element needs.

Next is Painting. The browser adds colors, text, borders, and images—basically giving life to the page.

Finally, comes Display. All of this is turned into pixels, and the webpage appears on your screen. This is the exact moment you actually see the website.

Diagram: Render Tree → Layout → Paint → Display

A Very Simple Idea of Parsing

Parsing is just the way a computer tries to understand something written by humans.
When you write code, it looks like plain text, but the browser cannot use it directly. So it reads the text slowly, breaks it into small meaningful parts, and figures out what each part means.

It’s similar to how we read a sentence word by word to understand its meaning.
In the same way, the browser parses HTML, CSS, or JavaScript so it knows what to build, how to style it, and how it should behave on the screen.

Once parsing is done, the browser finally has a clear structure to work with.

example:


2 + 3 x 4

Your brain:

breaks it into parts
understands order
builds meaning

Browsers do the same — but with HTML and CSS.

Full Browser Flow: From URL to Pixels

Let’s put everything together and see what really happens when you open a website.
First, you type a website address (URL) in the browser and press Enter.
The browser goes to the internet and downloads the files needed for that page, like HTML and CSS.

Next, the browser reads the HTML and turns it into a structure called the DOM, which represents the content of the page.
At the same time, it reads the CSS and turns it into CSSOM, which describes how the page should look.

Then, the browser combines DOM and CSSOM to create the Render Tree. This tells the browser what parts are visible and how they should be shown.

Finally, the browser decides where everything should go (layout), adds colors and text (painting), and shows it all on your screen as pixels.
This is the moment when the webpage actually appears in front of you.

Diagram: Full browser flow from URL → Pixels

Note: Browser look complex at starting because many things happens quickly. But conceptually, it is just about fetch the data, understand the data,
style it and finally render the page on screen. You don’t need to memorize everything at once. Understanding the flow is far more important than remembering names. Once the flow starts makes sense, everything else becomes easier to you.

Getting Started with cURL

Debashis Das — Sun, 25 Jan 2026 21:02:15 +0000

Understanding cURL: A Beginner-Friendly Guide

Whenever we open a website, check the weather on an app, or fetch data from an API, one thing is always happening behind the scenes: our system is talking to a server. For developers, understanding how this communication works is very important. This is where cURL comes in.

cURL is a small but powerful tool that helps developers communicate with servers directly, without using a browser. If you are learning backend development, APIs, or system design, cURL is one of the first tools you should understand.

What is cURL?

cURL stands for Client URL. In very simple terms, cURL is a command-line tool that allows you to send requests to a server and see the response.

You can think of cURL as a browser without a user interface. A browser sends requests when you click links or submit forms. cURL does the same thing, but instead of clicks, you use simple commands in the terminal.

Why Do Programmers Use cURL?

Programmers use cURL because it gives them full control over how a request is sent to a server. With cURL, developers can test APIs, check if a server is responding correctly, and understand what data is being sent and received.

It is especially useful for backend developers because it allows them to interact with APIs directly, without depending on frontend code or third-party tools. Many developers use cURL to debug issues, verify responses, and learn how HTTP communication really works.

Making Your First Request Using cURL

The simplest thing you can do with cURL is fetch a webpage. When you run a basic cURL command, it sends a request to a server and prints the response in the terminal.

For example, requesting a website using cURL will return the raw content sent by the server. This shows that cURL is directly communicating with the server, just like a browser does, but without rendering the page visually.

This small step helps beginners understand a very important idea: clients ask, servers respond.

Browser request:

cURL request:

Understanding Requests and Responses

Every communication using cURL follows a simple pattern. First, a request is sent to the server. This request includes information such as where the request should go and what action is being requested. Then, the server processes the request and sends back a response.

The response usually contains a status code and some data. The status code tells whether the request was successful or not, and the data contains the actual content returned by the server. This could be HTML, JSON, or plain text.

Understanding this request-response cycle is the foundation of backend and API development.

Using cURL to Talk to APIs

Most modern applications use APIs to exchange data. APIs usually return structured data, commonly in JSON format. cURL allows developers to send requests to these APIs and instantly see the response.

This makes cURL extremely helpful for testing APIs during development. Instead of writing frontend code or using complex tools, developers can quickly verify if an API endpoint is working correctly and returning the expected data.

Common Mistakes Beginners Make

Many beginners think cURL is too complex or only meant for advanced users. In reality, cURL is simple at its core and becomes powerful as you learn more features.

Another common mistake is expecting cURL to behave like a browser visually. cURL is designed to show raw responses, not styled pages. Understanding this difference helps beginners avoid confusion.

Where cURL Fits in Backend Development

In backend development, cURL is often the first tool used to test and debug APIs. It helps developers understand how requests are structured, how servers respond, and how data flows between systems.

Learning cURL builds confidence and gives a strong foundation for understanding tools like Postman, browser developer tools, and production-level API monitoring.

Whenever our client application wants to communicate to the server, it sends out a message to the server using HTTP Protocols, which is also termed as the HTTP Request. Based on that message, the server performs certain operations as demanded by the message and then replies to the client through a message, also knows as HTTP Response.

Below is an image depicting the Request-Response Cycle:

Structure of HTTP Response: As discussed above, the HTTP Response has a special structure that is followed so that the client can easily understand it. There exists a Universal Language that everybody follows so that there is no communication gap between people. HTTP Response broadly has 3 main components:

Status Line
Headers
Body (Optional)

An HTTP Response as a whole looks like the below picture:

Let us go through each of them one by one:

Status Line: An example of a Status-Line is given below:

HTTP/1.1 200 OK

The Status Line contains three important components - HTTP Version, HTTP Response Code, and a Reason-Phrase.

HTTP Version: The HTTP version number shows the HTTP specification to which the server has tried to make the response message comply. In the above example, 1.1 is the HTTP Version.
HTTP Response Code: It is a 3 digit number that shows the conclusion of the Request. In the above example, the response code 200 denotes that the content requested was OK. A very popular Status Code that we frequently encounter is 404 which represents the requested resource was not found.
Reason-Phrase: Also known as Status Text as it summarizes the Status Code in human-readable form.

Response Header: The Response Header contains the information about the content that is being returned in response together with data about the Server that sent it. This information helps the Client/Browser in deciding in what way the response data would be used. In other words, headers can be said as metadata that is sent together with a response to provide more info about it.

The Server can send as many headers as needed. The headers are sent as a key-value pair separated by a colon ( : ). Although the server can send as many headers as required, the most popular response headers are Content-Length, Content-Type, Date, Server, Set-Cookie, etc.

Date: Thu, 16 Jan 2016 08:16:18 GMT
Server: IBM_CICS_Transaction_Server/3.1.0(zOS)
Content-type: image/jpg

In the above example, the response header shows the date and time when the response was sent, the server that sent the response, and the type of content that was sent, which here is a jpg image file.

Body: In case of a successful response, the body of the Response Message is used to serve the Client/User with the resource asked for in the request. Although the body is optional, it is one of the most fundamental parts of the communication between the Client and Server and is sent most of the time. The body carries the data and can be in one of the many formats such as json, html, image, etc. which is accordingly specified in the headers.

In case of some errors, the body might provide the reason for the errors or the actions needed to complete the request successfully. Sometimes, it may have a link to guide the user to some other page.

Final Thoughts

cURL may look simple, but it plays a very important role in modern software development. It teaches developers how servers and clients communicate at a fundamental level. Once you are comfortable with cURL, understanding APIs, HTTP, and backend systems becomes much easier.

If you are serious about backend development, learning cURL is not optional — it is essential.

Understanding Network Devices

Debashis Das — Sun, 25 Jan 2026 12:55:26 +0000

What is Modem?

A modem and router are two of the most frequent components in a home network acfiguration. A router extablishes a local area netwrod(LAN), whereas a modem connects to an internet service provider (ISP). For a home nertork to work, both devices are necessary.

What is Modem?

Modem stands for Modulator/Demodulator. The mdoem is defined as a networking device that is used to connect devices connected in the network to the internet. The main function of a modem is to convert the ananlog signals that comed froma telephone wire into a digital form. In digital
form, these convertd signals are stored in the form of 0s
and 1s. The modem can perform both the task of modulation and demodulation simuntaneously. Modems are majorly used to transfer digital data in personal systems.The modem is also known as a signal translator as it translates one signal into another signal by modulating the digital signal into an analog signal for transmission and then demodulates receiving analog signal into digital signals.

Features of Modem

Modems can modulate as well as demodulates the siganls simuntenously.
Modem allows to connect only a specific of devices to the internet.
According to the features of modems, its price ranges.
Modems can be upgraded with the help of a specific sotware patch.
To use the devices over the internet with a modem devices need to be configured with an Internet Service Provider (ISP).
When the modem is connected to Hub its slow down it's process.

Working of Modem

The two main components of a modem are modulation and demodulation. Where the modem can perform both tasks simultaneously. The step-by-step working of the modem is given below:

Step 1: Data Generation: When data needs to be transmitted it is first generated. Therefore computer system generated the data which is in digital form of 0s and 1s.

Step 2: Modulation: Modulation is defined as a process of converting digital data signals of the computer into analog data signals so that these signals can travel on the internet. The digital data is encoded onto a carrier wave.

Step 3: Transmission: The resultant of modulation that is modulated data is transmitted over the communication line to the modem that is receiving it.

Step 4: Demodulation: Demodulation is defined as a process in which analog data signals from the internet are converted into digital data signals so they can be understood by computer systems. In the process of demodulation the digital data from the carrier wave is decoded.

Step 5: Decoding: The resultant of demodulation that is demodulated data is being sent to the computer systems for their further use.

What is a Router and how it directs traffic

A router is a networking device that connects multiple computer network (such as home LAN and the Internet) and directs data packets between them. It acts as a traffic manager by analyzing the destination IP address of incoming data, using routing tables to determine trhe most efficient path for transmission.

How a Router Directs Traffic

Packet Switching & Examination: When data is sent (e.g., loading a webpage), it is broken into smaller packets. The router receives these packets and examines their destination IP address.
Routing Tables: The router consults a internal routing table, which is a database of network paths, to determine where to send the data next.
Path Determination: It identifies the best path for the packet to take to reach its destination, reducing congestion.
Forwarding: The router sends the packet to the next network point (next hop) or directly to the target device within the local network.
NAT (Network Address Translation): Routers often use NAT to allow multiple devices in a home or office to share a single public IP address provided by the ISP.

Key Functions and Components

Connectivity: Connects Local Area Networks (LANs) to Wide Area Networks (WANs) or the internet.
Security: Many routers feature firewalls to block unauthorized traffic.
Wireless Capability: Wi-Fi routers include antennas to convert data into radio waves for wireless devices.
Modem Link: In home setups, the router connects to a modem to establish internet access.

Switch vs Hub: how local networks actually work?

In simple terms, both hubs and switches are central boxes used to connect multiple computers, printers, and devices together in a local area network (LAN). The difference is that a hub is "dumb" (broadcasts everything to everyone), while a switch is "smart" (delivers data only to the specific device it is meant for).

Here is how they work, using simple analogies.

1. The Hub: The "Loudspeaker" (Outdated)

Imagine a room with five people. If one person has a message for another, they must yell it through a loudspeaker so everyone in the room hears it.

How it works: When a hub receives data, it replicates that data and sends it out to every single port.
Result: Every device receives the data, but only the intended recipient keeps it; others discard it.
Why it's bad: It causes high traffic congestion (too much yelling). If two people speak at once, the data "collides" and gets ruined, forcing them to re-send.
Used for: Very small, old, or temporary networks.

HUB

2. The Switch: The "Private Letter" (Modern)

Imagine the same room, but now there is a postman. If one person has a message, they give it to the postman, who delivers it directly to the specific person it is meant for.

How it works: A switch learns the unique address (MAC address) of every device connected to it and stores this in a table.
How it works: A switch learns the unique address (MAC address) of every device connected to it and stores this in a table.
Why it's good: It reduces traffic (no unnecessary yelling). It prevents data collisions, allowing everyone to send/receive at the same time.
Used for: All modern home, office, and enterprise networks.

Switch

What is a Firewall?

A firewall operates as a "gatekeeper," inspecting data packets—units of communication sent over networks—to decide whether to allow or block them. It can be implemented as hardware (a physical device), software (a program installed on a device), or a cloud-based service.

Core Functions of a Firewall:

Packet Filtering: Examines the "header" of data packets (source/destination IP, port, protocol) and compares them against security rules.
Stateful Inspection: Tracks the state of active connections, ensuring incoming traffic is actually a response to a valid internal request.
Proxy Service: Acts as an intermediary, preventing a direct connection between an outside source and your internal device.
Next-Generation Firewall (NGFW): Modern firewalls that include deep packet inspection (DPI), intrusion prevention systems (IPS), and application-level awareness to block sophisticated threats.

Why Security "Lives" Here (Why it is Crucial)

Security lives at the firewall because it serves as the first line of defense against cyber threats. Without it, networks are directly exposed to the internet, allowing almost anyone to try to access private devices.

Blocks Unauthorized Access: It keeps hackers and unauthorized users out of private networks or devices.
Prevents Malware/Virus Infiltration: By inspecting traffic, firewalls can block malicious software, ransomware, and trojans from entering.
Monitors Outbound Traffic (Data Leakage): It prevents malicious software inside a network from sending data to external hackers.
Network Segmentation: It can separate sensitive internal network zones from general traffic, preventing lateral movement of threats.
Enforces Security Policies: Organizations use them to restrict access to unsafe or non-compliant websites.

What is a Load Balancer and why scalable systems need it?

A load balancer is a dedicated hardware device or software application that acts as a traffic cop, distributing incoming network or application traffic across multiple backend servers. It enhances performance, prevents server overloads, ensures high availability by routing around failed servers, and enables seamless scalability by allowing resources to be added or removed.

Why Scalable Systems Need Load Balancers:

Horizontal Scalability: They allow adding more servers to handle increased load, preventing any single server from becoming a bottleneck.
High Availability & Reliability: By continuously performing health checks, they detect server failures and automatically redirect traffic to healthy servers, preventing downtime.
Improved Performance & Reduced Latency: They distribute requests efficiently, resulting in faster response times for users.
Flexible Maintenance: Servers can be taken offline for maintenance without impacting the overall service, as traffic is redirected elsewhere.
Traffic Management: They can manage incoming traffic using algorithms like round-robin or least connections to optimize resource usage.

Load balancers can operate at the Transport Layer (Layer 4) or the Application Layer (Layer 7).

How all these devices work together in a real-world setup?

Let’s walk through a real-world setup, step by step, in simple, practical terms, the way it actually works in homes, offices, and production systems.

1️⃣ Big Picture: How the Internet Reaches You

Imagine a user opening a website on their laptop or phone.

The request doesn’t jump directly to Google or your backend server.
It passes through multiple network devices, each with a clear responsibility.

2️⃣ Real-World Flow (End-to-End)

🌍 Step 1: Internet → Modem
Role: Translator

The internet signal comes from your ISP (fiber, cable, DSL).
The modem converts that signal into digital data your network understands.

📌 Think of the modem as:

A language translator between your ISP and your home/office network.

Without a modem → no internet access at all.

Step 2: Modem → Router
Role: Traffic Controller

The router receives internet from the modem.
It Assigns local IP addresses (via DHCP)
It Decides which device gets which data
It Routes outgoing requests to the internet

📌 Analogy:

A traffic police officer deciding where each car should go.

Without a router → only one device could use the internet.

🔀 Step 3: Router → Switch (Local Network Expansion)

Role: Smart Connector

In offices or data centers, one router is not enough.
A switch connects many devices efficiently.
It sends data only to the intended device (not everyone).

📌 Analogy:

A smart courier delivering parcels to exact apartments.

❌ Hub (Why It’s Rare Now)

A hub sends data to every device, even if they didn’t ask.
Causes collisions and noise.
Mostly obsolete.

📌 Analogy:

Shouting everyone’s mail in a crowded room.

🔐 Step 4: Firewall (Security Gate)

Role: Protection & Filtering

The firewall sits between:
- Internet ↔ Internal Network
It:
- Blocks unauthorized access
- Allows only trusted traffic
- Protects servers and devices

📌 Analogy:

A security guard at a building entrance checking IDs.

In production systems, this is critical.

⚖️ Step 5: Load Balancer (For Scalable Systems)

Role: Traffic Distributor

When thousands/millions of users hit a service:
A load balancer distributes requests across multiple servers.

📌 Analogy:

A toll booth manager directing cars to less crowded lanes.

Without it:

Servers overload
Downtime happens

🖥️ Step 6: Backend Servers

Requests finally reach:
- Web servers
- Application servers
- Databases
Responses go back through the same path to the user

3️⃣ Complete Flow (One Line)

Internet
   ↓
Modem
   ↓
Router
   ↓
Firewall
   ↓
Load Balancer
   ↓
Switch
   ↓
Backend Servers / User Devices

4️⃣ How This Connects to Backend & Dev Life 💻

As a backend developer, this means:

Your API runs behind routers, firewalls, and load balancers
Client IPs may come from load balancers
Security rules live in firewalls
Scaling happens via load balancers + multiple servers
Network failures ≠ always code bugs

📌 This is why:

Headers like X-Forwarded-For exist
Rate limiting, SSL termination, and routing matter

5️⃣ One-Line Summary (Exam / Interview Ready)

In a real-world setup, the modem connects the ISP to the network, the router directs traffic, switches efficiently connect devices, firewalls secure the network, and load balancers distribute traffic across servers to ensure scalability and reliability.

TCP Working: 3-Way Handshake & Reliable Communication

Debashis Das — Sun, 25 Jan 2026 11:12:29 +0000

When data is sent over the internet , it doesn't magically reach the other side safely.
Packets can get lost, arrive could be out of order, or never arrive at all.

That's why TCP (Transmission Control Protocol) exists.

TCP makes sure that two computers:

agree before they start talking
send data in the correct order
and confirm that everythign is received properly

Before any real data is sent, TCP first creates a connection using a process called the 3 way handshake.
After that it carefully manages data transfer to ensure reliablity, correctness, and completeness.

In this article, we'll understand how TCP works - steps by steps - using simple language, real-life example, and clear diagrams, without diving into complex internals.

1. What is TCP and Why it is needed

TCP (Transmission Control Protocol) is a set of rules that helps computers communicate reliability.

It's job is simple:

Make sure data reaches the other side correctly, completely, and in order.

Without TCP the internet would feel unreliable and messy.

2. Problem TCP Is Designed to solve

If data is send without rules, many problems can heppen:

Data packets can get lost
Data can arrive out of order
Data can be duplicate
Sender may not know if the receiver got the data

TCP solves all of these problems by checking, comfirming and retrying.

3. What Is the TCP 3-Way Handshake

Before sending real data , TCP first creates a connection.
This setup process is called 3-way handshake

Think of it like starting a phone call. In phone call you don't start talking immediately - first, both sides
confirm they are ready.

4. Step-by-Step: SYN, SYN-ACK, ACK

Let's walk through it slowly.

step 1: SYN (client-server)

Client says:

"Hey server, I want to talk , Are you there?"

This message is called SYN (Synchronize).

Step 2: SYN-ACK (Server → Client)

Server replies:

"Yes, I am here and ready."

This reply is called SYN-ACK.

Step 3: ACK (Client- Server)

Client confirms:

"Great, let's start."

This final message is Ack.
Now the connection is established

Diagram 1: TCP 3-Way Handshake

flowchart LR
    A[Client] -->|SYN| B[Server]
    B -->|SYN-ACK| A
    A -->|ACK| B

5. How Data Transfer Works in TCP

Once the connection is open, data starts flowing.

TCP does not send data as one big piece.
It breaks data into small packets.
Each packet has:

a sequence number
so the receiver know the correct order

After receiving packets, the receiver sends back ACKs (acknowledgements).

6. How TCP Ensures Reliability, Order, and Correctness

TCP is smart, and it constantly checks:
Reliabilty

If packet is missing -> re-send
If ACK is not received -> retry

Correct order

Uses sequesnce number
Rearranges packets if needed

Correct data

Detects corrupted packets
Requests retranmission

Diagram 2: Data Transfer With ACKs

flowchart LR
    A[Client sends data seq 1] --> B[Server]
    B -->|ACK 1| A
    A -->|seq 2| B
    B -->|ACK 2| A

7. Packet Loss and Retransmission

Sometimes packets get lost due to:

network congetion
weak signals
router issues

TCP handles this automitically.
If ACK is not receives:

i did not got the confirmation - i'll send it again."

Diagram 3: Packet Loss Handling

flowchart LR
    A[Client sends packet] --> B[Packet lost]
    A -->|Timeout| C[Resend packet]
    C --> D[Server receives]
    D -->|ACK| A

8. How a TCP Connection Is Closed

When communication is done, TCP close the connection properly.

It uses:

FIN-> "I am done sending"
ACK-> "I got it"

Both side confirm before closing.

Diagram 4: TCP Connection Lifecycle

flowchart LR
    A[Connection setup] --> B[Data transfer]
    B --> C[FIN sent]
    C --> D[ACK received]
    D --> E[Connection closed]

Final Mental Model (Easy to Remember)

TCP works like a careful connection:
Say hello (3-way handshake)
Talk clearly (data + ACKs)
Repeat if needed (retransmission)
Say goodbye properly (Fin + ACK)

One-line Takeaway

TCP makes sure data is delivered safely, in order and completely

DNS Explained in very simple words(For Everyone)

Debashis Das — Mon, 19 Jan 2026 21:24:13 +0000

If you heard about DNS or Domain Name System and want to know the basic overview of how exactly DNS works, then dont worry, i will explain it to you in a very simple term, not with handy word.

So Now Let's start with the simple question.

How does your browser know where a website lives?

When you type:


👉 google.com

Your browser is actually confused 🤔🙄😵
Because computers do not understand names like "google", "facebook", "instagram" etc.

Computers only understnad numbers.

So someone has to tell the browser:

"Hey, google.com live at this number"

That "someone" is DNS.

What DNS Really Is (No Tech Meaning):

DNS is like the phonebook of the internet.

In your phone:

You save names like (Mom, Dad, Brother, Friends, Ofiice)
But calling happens using a phone number

On the internet:

You type a website name
DNS finds the number
Browser goes there for lookup

Without DNS, the internet would look like this:


Type 142.250.182.14 to open 'Google'

And nobody wants that to remember the whole number.
What if we have some tool that remember those large number for us,it's kind of a middleware.And that's the reason why DNS plays a important role for us to find website actual location.

Why DNS Record Exist

DNS record are just small pieces of information that answer different questions.

Like:

Where is this Websites?
Who is in charge of this domain?
Where should email go?
Is this domain trusted?

Instead of putting everything in one place, DNS uses different record, each with one clear job.

NS Record-Who is Responsible for This Website?

Imagine an apartment building 🏢
You don't ask any random people about a flat-you go to the main office.

NS record is that main office.

It tells the internet:

"Ask this company for all information about this domain."

So NS record answers:

Who manages this website?
Who has the authority?

Without NS:

Internet would not know where to ask questions and to whome.

A Record- Where Is the Website?

This is the most important record.
A Record tells the exact address of the website.
Think of it like:

House name -> House number

Example:


example.com -> 93.128.332.34

Your browser:

Find this number
Goes direct to the server with the help of that number
And finally load the website for us in the browser

Simple and direct.

AAAA Record - Same Job, Newer System

AAAA record does the same thing as A record.
The only differece:

A record -> Old type address
AAAA record -> new type address

You don't need to worry much about it.
Just remember:

A and AAAA both tell where the website lives.

CNAME Record - Another Name for the Same Place

Something a place has two names.

Example:

"Main street shop"
"MS Shop"

Both go to the CNAME does.

Example:


www.example.com -> example.com

This means:

www.example.com is just another name
Real website is example.com

Easy difference to remember:

A Record -> name to number [google.com -> 123.652.88.90]
CNAME -> name to name [it's like giving someone to a nickname]

MX Record - How Emails Know Where to Go

Now let's talk about email📧
When someone sends:

hello.example.com

The internet asks:

"Where should i deliver this email?"

The answer comes from the MX record.The MX is like a post office address.
It btells:

Which mail server recieves emails
For that domain

No MX record = No email delivery.

TXT Record - Extra Notes and Proof

TXT records are like stricky notes attached to a domain.
They arev used to:

Prove ownership
Keeps email safe
Verify services

Example:

Google asks: "Is this your domain?"
You add a TXT record
Google checks it
Done ✅

TXT records don't affect websites directly -- they help in the background.

How Everything Works Together (One simple Story)
Let's say someone opens your website.

Step-by-step:

Browser looks for NS
-> Who controls this domain?
DNS server gives A / AAAA
-> Here is the website address
If www is used, CNAME helps
-> Redirects to main name
If someone sends email, MX helps
-> delivers email properly
TXT keeps things verified and safe

All Records work together like a team.

One Complete DNS Setup (Easy View)

NS    -> Who manage the domain
A     -> WEbsite address
AAAA  -> Newer website address
CNAME -> Another name
MX    -> Email delivery
TXT   -> Proof and Security

Final Words (Very important)

DNS sounds scary only because of it's name.

But in reality, its just:

A system that helps names find the right place.

If you understand Phonebook, House address and Post office, then you already understand DNS.

Inside Git: How its works and the role of the .git folder

Debashis Das — Sat, 10 Jan 2026 18:26:09 +0000

Inside Git: How its works and the role of the `.git` folder

When most beginners learn Git, they focus on the commands like:

git add
git commit
git push

But Git is not magic
Behind the scene Git is just files, folders and hashes working together in a very smart way.

To truly understand Git, you need to understand what happens inside the .git folder.

This article will help you to build a mental model of Git, not just memorize commands.

1. How Git works internally (Big picture)

At a high level, Git does only three main things:

It stores snapshot of your project
It track changes using hashes
It connects snapshots together

Important thing to remember:

Git does not track changes line by line
Git tracks snapshots of files

Every time you commit, Git saves a snapshot of your project's state

2. Understanding the `.git` Folder

When you run:

git init

Git creates a hidden folder called .git/:

.git/

This folder is the heart of Git.

🔑 Key idea

If .git folder is deleted, your project is no longer a Git repository and Git cannot track your code.

What is inside the `.git` folder?

Conceptually it contains:

Git configuration
Commit history
Branch information
All version of your files

You usually don't open this folder -- but understanding it makes Git click.

🗂 Diagram: Structure of the `.git` Directory

Typical important folders inside .git:

.git/
├── objects/
├── refs/
├── HEAD
├── index
└── config

Let’s understand only what matters for beginners 👇

3. Git Objects: Blob, Tree, Commit

Git stores everything as objects.
There are three main object types.

1️⃣ Blob (File Content)

A blob store the content of a file.
File name is not store here
Same content = same hash

Example:

hello.txt → "Hello World"

Git store "Hello World" as a blob object.

2️⃣ Tree (Folder Structure)

A tree represents a directory
Its maps:
- file names → blob hashes
- folder names → other tree hashes

Think of a tree as:

"This folder contains these files and subfolders"

3️⃣ Commit (Snapshot + History)

A commit object contains:
Reference to tree
Reference to the parent commit
Author information
Commit message
Timestamp

A commit answers:

"What did the project look like at this moment?"

🧩 Diagram: Relationship Between Commit, Tree, and Blob

This diagram helps readers visualize:

Commit
  ↓
 Tree
  ↓
Blob (file content)

4. How Git Tracks Changes

Git does not modify files directly when you commit.

Instead of it:

Store file content as blob
Connects them using tree
Saves a commit pointing to the tree

If a file does not change:

Git reuses the old blob
No duplicate storage

That's why Git is:

Fast
Efficient
Reliable

5. What happen during `git add`

Let's say you edit a file:

app.py

Now run:

git add app.py

Internally Git does this:

Reads the file content
Create a blob object
Store it in:
```
.git/objects/
```
Updates the index (staging area)
Important mental model:

git add does not create commit
It prepares data not the next commit

6. What Happens During `git commit`

Now you run:

git commit -m "Add login feature"

Git now:

Reads the staging area
Creates a tree object
Link to the previous commit
Moves HEAD to the new commit

🔄 Diagram: Internal Flow of git add and git commit

Working Directory
      ↓ git add
Staging Area (index)
      ↓ git commit
Commit (snapshot)

7.How Git Uses Hashes for Integrity

Git uses SHA-1 hashes (40 character string).

Example:

e83c5163316f89bfbde7d9ab23ca2e25604af290

Git uses hashes to:

Identify uniquely
Detect file corruption
Ensure data integrity

Why this is powerful?

If:

File content changes → hash changes
Commit data changes → hash changes

So Git can detect tampering or corruption instantly.

This makes Git extremely trustworthy.

8. Building the Right Mental Model of Git

Instead of thinking:
❌ "Git is a set of commands"

Think this way:
✅ "Git is a content-addressable database of snapshots"

Commands like init, add, commit, log, status, branch and checkout are just ways to interact with that database.

Final Thoughts

Understand Git internally gives you confidence.

Now you know:

Why the .git folder exists
How Git stores files
What commits actually are
Why Git never loses history

Once this mental model is clear:

Git errors feel less scary
Commands make more sense
You stop memorizing and start understanding

Git is not magic, it's just a very well designed.🚀

Why Version Control Exists: The Pendrive Problem

Debashis Das — Thu, 08 Jan 2026 19:46:29 +0000

Before Git, GitHub, and modern tools became popular, software development looked very different.
Developers still wrote code, but managing that code was painful.

To understand why version control exist, let's go back in time and talk about a very common problem -- the Pendrive Problem

1. Why Version Control Exists
Software development is not just about writing code.
It is also about:

Saving changes safely
Working with other developers
Tracking what changed and why
Going back to the previous version when something breaks

Today Version Control System like Git solve all these problem easily.
But this was not always the case.

Before version control system, developers relied on prendrives, emails, folders to manage their code.That approach worked for small projects--but completely failed as projects and terms grew.

2. The Pendrive Analogy in Software Development
Imagine this situation 👇

You are working on a project with two or three developers.

One developer writes code on theirs laptop
The code is copied into a pendrive
The pendrive is passed to the another developer
The developer edits the same files and copied them back Sounds simple, right? But this is where the real problems start.

The "final" folder problem

To avoid losing work developers started creating folder like:

project_final
project_final_v2
project_latest
project_latest_final
project_latest_final_fixed

After some time, no one knows which file is real latest version.
If someone asks:

“Which version should I run?”
The answer is usually:
“Use the 'latest_final' one… I think.”

This is exactly how many teams worked before version control.

3. Problems Faced Before Version Control Systems
Let's break down the real issues developers faced.

1. Overwriting Each Other’s Code
Two developer edits the same file

Developer A change login logic
Developer B fix a bug in the same file
Both save their work

When the pendrive is copied again, One person's work get overwritten.

Result:

Feature disappear
Bugs came back
Arguments Begin

2. Losing Code Changes Forever
There was no history.
If the code worked yesterday, but is broken today.

You cannot see what changed
You cannot undo mistakes
You can not go back safely Once a file was overwritten, that version was gone forever.

3. No collaboration history

Before version control
No records of who changed the code
No idea why the changed was made
No way of review code

In a team, these caused confusion and blame instead of teamwork.

4. Sharing Code Was Slow and Risky

Code was shared using:

Pendrive
Emails
Zip files

problems:

Someone forget to send the latest version
Someone edits an old file
Someone work on the wrong copy This wasted time and created errors.

5. Impossible to work in Parallel
Only one person could safely work at a time.

If two people work together:
Conflicts happens
Files broke
One person has to wait

As teams grew, this approach completely failed

From Pendrives to Version Control (The Big Shift)

These problems made one thing very clear:

Software development needed a better system.

That system became Version Control.

Version control systems solved the pendrive problem by:

Keeping complete history of changes
Allowing multiple developers to work together
Preventing accidental overwrites
Making collaboration safe and fast

Instead of copying files manually, developers could now:

Commit changes
Track versions
Merge work properly This is why version control became mandatory in modern software development.

Today, tools like Git and GitHub are not optional — they are essential.

Final Thoughts

The pendrive problem was not about technology —
it was about control, safety, and collaboration.

Version control exists because:

Developers needed history
Teams needed collaboration
Projects needed reliability

Once you understand this problem, Git makes perfect sense.

Before version control:

“Hope nothing breaks.”

After version control:

“Don’t worry, we can roll back.”

And that is why version control exists.🚀