Forem: Aditya Pratap

TCP

Aditya Pratap — Fri, 30 Jan 2026 13:11:15 +0000

There's a norm while asking for your crush's number, it starts with a "Hi", you don't usually go up to them and ask "Can i get your number", they might not know you, you will be rejected and who wants that.

Transmission Control Protocol (TCP)

TCP is a network protocol that is used for reliable transportation of data. When you send a web request, that request might be coming through a ton of hurdles, facing crazy monsters or even die in the path.
What really happens is the data packets you receive and send can face numerous problems,

Some packets get lost in the way.
Data packets get unordered/mixed.
Can receive duplicate packets.
Data could have been corrupted.

TCP helps with this, it's like a postal office for data you share and ensures that, data arrives reliably, in same order and fixes corrupted data.

TCP 3-Way Handshake

A TCP Connection is initialized by a procedure referred as 3-Way Handshake.

SYN (Synchronize) – The client says: “Hey, I’m here and want to talk. My sequence number is 121.”
SYN-ACK (Synchronize + Acknowledge) – The server replies: “Heyo my mate! My sequence number is 404 and I got your 121.”
ACK (Acknowledge) – The client responds: “Great! I got your 404 as well. Let’s deal now:>”

The connection is open now and the data can be transferred securely.

How Data Transfer Works in TCP

After the handshake,

TCP splits data into smaller segments (like sending letters in envelopes).
Each segment has a sequence number so that it can be ordered later.
The receiver replies ACKs for each segment received.
If a segment is lost, TCP automatically resends it. > Think of it like sending numbered letters in the mail. If receiver says “I didn’t get number 3,” you resend it again.

TCP Connection Closing

Just like you don’t hang up your crush mid-call, TCP also says bye politely when the chat is done.

- FIN – The client says: “I’m done sending data.”
- ACK – The server replies: “Gotcha, will talk later.”
- FIN – The server says: “Byeeee”
- ACK – The client confirms: “GooodByeee”

And that's time to disconnect the call.

cURL

Aditya Pratap — Fri, 30 Jan 2026 12:18:54 +0000

Client URL (cURL) is an open source command line tool for transferring data using URLs. It supports multiple protocols including HTTP, HTTPS, FTP, and more.

Why it's extensively used

Testing Purposes
Check if a server is up or debug it.
API Development
Send GET or POST requests directly to APIs.

API can be thought of a carrier that takes in request and responds with a response.
Automating requests
Several developers use cURL to automate HTTP requests.
Learning purposes
Understand HTTP requests and responses within the terminal.

Initializing cURL Request

Let's hit this

curl -v https://example.com

v is a flag for 'verbose' output so that our curl command won't hide headers.

The response will be something like

> GET / HTTP/2
> Host: example.com
> User-Agent: curl/8.5.0
> Accept: */*
> 
< HTTP/2 200 
< content-type: text/html

Here these ">" and "<" symbols mark something,

> Request headers (sent by curl)
< Response headers (sent by server)

Request Headers

> GET / HTTP/2

This tells, We are using the GET HTTP method and HTTP/2 is the protocol's version.

> Host: example.com

Informs the server which domain is requested.

> User-Agent: curl/8.5.0

Identifies who is making the request, here it's done by curl.

> Accept: */*

Says “I’ll accept any content type”

Response Headers

< HTTP/2 200

Again, HTTP/2 is the protocol we used.
200 is a HTTP status code, which means the request was successful.

Other frequently appearing status codes are:

< content-type: text/html

Describes the content returned by server, here it is a HTML document.

GET Method (read only)

The GET method is an HTTP request method used to retrieve data from a server without modifying it.
BY default, curl uses GET method.

~$ curl https://api.freeapi.app/api/v1/public/randomjokes/joke/random
{"statusCode":200,"data":{"categories":["dev"],"id":75,"content":"Chuck Norris is the ultimate mutex, all threads fear him."},"message":"Random joke fetched successfully","success":true}

Here, we requested the API for a random joke and it responded with a JSON object.

POST Method (read or write)

The POST request method is used to create or update data on the server.
We have to use '-X' flag to command curl to use POST.

~$ curl -X POST https://api.freeapi.app/api/v1/users/login \
  -H "Content-Type: application/json" \
  -d '{"username":"doejohn","password":"test@123"}'
{
  "statusCode": 200,
  "success": true,
  "message": "User logged in successfully",
  "data": {
    "user": {
      "_id": "697c9e5caf1517d02a2fb058",
      "username": "doejohn",
      "email": "user.email@domain.com",
      "role": "ADMIN",
      "loginType": "EMAIL_PASSWORD",
      "isEmailVerified": false
    },
    "accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
    "refreshToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
  }
}

Here, we requested the API to login with out user and password and it responded with login info.

Common Beginner Mistakes

Missing https:// in URL
Forgetting Content-Type for JSON
Not knowing useful flags like "-A"
Expecting browser-like output
Ignoring status codes and headers

Emmet for HTML

Aditya Pratap — Fri, 30 Jan 2026 10:25:46 +0000

Writing HTML for web pages is a repetitive and boring task, you got to open the tags, then close them, there's a boilerplate that has to be there everytime but you write it again, overall a lot of hassle.

Emmet

Emmet is a tool for text editors for quick code editing. We will be utilizing it to write HTML with it's shortcut syntax.

How Emmet Works Inside Code Editors

You type in a shortcut and Press Tab.
The editor expands it into full HTML markup.

Normal Emmet Syntax

1) Creating Elements

div

→ expands to:

<div></div>

2) Adding Classes and IDs

# . for classes and # for IDs
div.container
h1#main-title

→ expands to:

<div class="container"></div>
<h1 id="main-title"></h1>

3) Muliplying Elements

# * followed by number to repeat elements
li.item*5

→ expands to:

<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>

4) Nesting Elements

# > to nest elements inside each other
div.container>ul>li*3

→ expands to:

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

5) Adding Attributes

# [] for attributes and {} for value
a[href="https://example.com"]{Click here}

→ expands to:

<a href="https://example.com">Click here</a>

6) HTML Boilerplate

→ expands to:

<!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>

CSS Selectors

Aditya Pratap — Fri, 30 Jan 2026 10:03:58 +0000

Selectors in CSS are a way to style specific parts of your web page that could be either whole document, a single element or multiple.

THE NEED

Suppose a pool of people, you only wanna email people of age group 21-24, how will you move on. You can not just bombard some mails randomly or share them to everyone, there is a specific case. First, you will filter out the data and then proceed with the emails after filtering the correct ones out. That's just how CSS Selectors help.

Let's checkout some CSS Selectors:

Element Selector

It targets all elements of a specific type.

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

p {
  color: blue;
}

# All <p> elements turn blue.

Class Selector

Classes let you couple multiple elements as per convenience and style them.

<p class="highlight">Important text!</p>
<span class="highlight">Notice me too!</span>

.highlight {
  background-color: yellow;
}

# Both the paragraph and span get a yellow background.

ID Selector

ID selector allows targeting single element with their HTML id.

<h2 id="main-title">Welcome!</h2>
<h2> Platform Features </h2>

#main-title {
  font-size: 36px;
  color: darkgreen;
}

# H2 element with id="main-title" is styled.

Group Selectors

It's possible to target multiple HTML elements by grouping them.

h1, h2, h3 {
  font-family: 'Arial', sans-serif;
  color: navy;
}

# All headings from <h1> to <h3> get the same font and color.

Descendant Selectors Descendant selectors allow you target elements nested inside other elements.

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

<p>This is outside the card.</p>

.card p {
  color: red;
}

# Only the paragraph inside .card turns red.

Universal Selector Allows targeting complete web page.

* {
  font-family: 'Arial', sans-serif;
  color: navy;
}

# Complete page's font is styled.

Selectors Specificity

At time multiple selectors can target the same element.

p {
  color: blue;
}

.highlight {
  color: green;
}

#main-text {
  color: red;
}

In this case, CSS cascades over and over with the utmost priority given on how specific this selector is.

ID selector (#id) → highest priority
Class selector (.class) → medium priority
Element selector (element) → low priority