The Golden Rule: Who is the Caller?

In JavaScript, this is determined by how a function is called, not where it is defined.

• Inside a normal function: In a standalone function, this usually refers to the global object (the window in a browser).

• Inside an object method: When a function is part of an object, this refers to the object itself.

// Example 1: Normal Function
function showThis() {
  console.log(this); 
}
showThis(); // Output: Window object

// Example 2: Object Method
const user = {
  name: "InsideTech",
  greet: function() {
    console.log("Hi, I am " + this.name);
  }
};

user.greet(); // Output: Hi, I am InsideTech (The 'user' called greet)

The Manual Overrides: Call, Apply, and Bind

Sometimes, you want to tell a function exactly what this should be, regardless of who called it. We use three power-tools for this: call(), apply(), and bind().

call() — Borrowing Methods

call() invokes a function immediately and lets you pass arguments one by one. It’s perfect for "borrowing" a method from one object to use on another.

const runner = { name: "Flash" };
user.greet.call(runner); // Output: Hi, I am Flash

apply() — The Array Specialist

apply() is exactly like call(), but instead of passing arguments one by one, you pass them as an array.

bind() — The Long-Term Commitment

Unlike the others, bind() does not run the function immediately. Instead, it creates a new copy of the function with thispermanently "locked" to a specific object. You can save this function and use it later.

const greetFlash = user.greet.bind(runner);
greetFlash(); // Output: Hi, I am Flash (even 10 minutes later!)

Conclusion

The this keyword is JavaScript's way of keeping code flexible. Instead of hardcoding names, we use this so our functions can work across different objects. Once you master call, apply, and bind, you have full control over the "context" of your code—giving you the power to borrow logic and reuse functions like a pro.

Object-Oriented Programming (OOP) is a style of programming that allows us to create a "blueprint" once and use it to build as many objects as we need.

Topics that we are going to cover in this blog are as follows

• What Object-Oriented Programming (OOP) means

• Real-world analogy (blueprint → objects)

• What is a class in JavaScript

• Creating objects using classes

• Constructor method

• Methods inside a class

• Basic idea of encapsulation

The Real-World Analogy: Blueprint vs. Object

Think of an architect’s blueprint for a house. The blueprint itself isn't a house—you can’t live in it. However, you can use that one blueprint to build 50 identical houses.

• The Class: This is the blueprint. It defines what properties (color, speed) and actions (drive, brake) a car should have.

• The Object (Instance): This is the actual car built from the blueprint.

What is a Class in JavaScript?

A Class is a reserved keyword in JavaScript used to create this blueprint. It groups data (properties) and behavior (methods) together.

The constructor Method

Inside every class, there is a special function called the constructor. It’s the "setup" phase of your object. It runs automatically the moment you create a new object from the class.

class Car {
  constructor(brand, color) {
    this.brand = brand; // "this" refers to the specific car being built
    this.color = color;
  }
}

Creating Objects (Instantiations)

To build an object from our class, we use the new keyword.

const myCar = new Car("Tesla", "Red");
const friendsCar = new Car("BMW", "Blue");

console.log(myCar.brand); // Output: Tesla
console.log(friendsCar.brand); // Output: BMW

Adding Methods

A blueprint doesn't just describe how a car looks; it describes what it does. We add functions inside a class (without the function keyword) called methods.

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

  // This is a method
  drive() {
    console.log(this.brand + " is now driving!");
  }
}

const myCar = new Car("Tesla", "Red");
myCar.drive(); // Output: Tesla is now driving!

A Basic Idea of Encapsulation

Encapsulation sounds fancy, but the idea is simple: it’s about bundling data and the methods that use that data into one single unit (the class).

By keeping everything inside the class "capsule," we make our code more organized and prevent other parts of our program from accidentally messing with our car's data.

Why Use OOP?

• Reusability: Build the logic once, create infinite objects.

• Organization: It keeps related data and behavior in one place.

• Scalability: It's much easier to manage 100 "Students" or "Products" when they all follow the same blueprint.

Conclusion

• The Blueprint: A class is just the plan; it doesn't "exist" until you use the new keyword to create an instance.

• The Constructor: This is your setup shop. It’s where you take raw data (arguments) and assign them to the object using this.

• Encapsulation: By keeping data (properties) and actions (methods) inside one class, your code becomes cleaner, safer, and much easier to scale.

Objects solve this by using a Key-Value Pair structure. Instead of just storing data, we give every piece of data a label (a key).

Topics we are going to cover in this blog are as follows

• Creating objects

• Accessing properties (dot notation and bracket notation)

• Updating object properties

• Adding and deleting properties

• Looping through object keys

What is an Object?

An object is a collection of related data and/or functionality. It is the closest thing in code to a real-world entity.

Creating an Object

We use curly braces {} to define an object literal.

const user = {
  name: "InsideTech",
  age: 21,
  city: "Ahmedabad",
  isStudent: true
};

Accessing Properties

There are two ways to get data out of an object:

• Dot Notation (.): This is the most common and readable method.

  • console.log(user.name); // "InsideTech"

• Bracket Notation ([]): Essential if your key name is stored in a variable or has spaces.

  • console.log(user["city"]); // "Ahmedabad"

Updating, Adding, and Deleting

Objects are dynamic. You can modify them even after they are created.

// 1. Updating
user.age = 20;

// 2. Adding a new property
user.hobby = "3D Modeling";

// 3. Deleting a property
delete user.isStudent;

Understand through the below Table diagram

Looping Through Objects

Unlike arrays, you can't use a standard for loop with an index. Instead, we use the for...in loop to iterate through the keys.

for (let key in user) {
  console.log(key + ": " + user[key]);
}
// Output: name: InsideTech, age: 20, city: Ahmedabad, hobby: 3D Modeling

Conclusion

Objects are the "containers" of the JavaScript world. By mastering them, you can now structure complex data efficiently. This is a massive step you've moved from writing simple scripts to managing data structures that modern apps are built on.

Topics which we are going to cover in this blog are as follows

• What arrow functions are

• Basic arrow function syntax

• Arrow functions with one parameter

• Arrow functions with multiple parameters

• Implicit return vs explicit return

• Basic difference between arrow function and normal function

From Normal to Arrow: The Transformation

Let’s see how a standard function expression evolves into an arrow function.

The Traditional Way:

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

The Arrow Way:

const square = (n) => {
  return n * n;
};

Breaking Down the Syntax

The name comes from the => symbol (the "fat arrow"). Here is how it works depending on your parameters:

• Zero Parameters: You must use empty parentheses.

  • const sayHi = () => console.log("Hi!");

• One Parameter: You can actually skip the parentheses!

  • const double = n => n * 2;

• Multiple Parameters: Parentheses are required.

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

Implicit vs. Explicit Return

This is the "magic" of arrow functions.

• Explicit Return: If you use curly braces { }, you must use the return keyword.

• Implicit Return: If your function is only one line, you can remove the braces and the return keyword. JavaScript simply "knows" to return that value.

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

// Implicit (clean and short!)
const addSimple = (a, b) => a + b;

Arrow vs. Normal Functions: What’s the Catch?

While arrow functions are great, they aren't a 100% replacement for normal functions.

• No this binding: Arrow functions don't have their own this. They inherit it from the code around them. (This is great for some things, but bad for others like object methods).

• No arguments object: You can't use the arguments keyword inside an arrow function.

• Not for Constructors: You cannot use new with an arrow function to create an object.

Conclusion

Arrow functions are about readability. By removing the function and return keywords, your code starts to look more like a mathematical formula and less like a wall of text. They are especially powerful when used inside other methods like mapand filter.

Topics that we are going to discuss in this blog are as follows.

• Why Do We Need Functions?

• Function Declaration

• Function Expression

• Key differences between declaration and expression

• Basic idea of hoisting (very high level)

• When to use each type

Why Do We Need Functions?

Imagine you need to multiply two numbers in ten different places in your code. Instead of writing a * b ten times, you write a function once. If you ever need to change how that calculation works (e.g., adding tax), you only change it in one-place.

Function Declaration (The Standard Way)

A Function Declaration is the most common way to define a function. You use the function keyword, give it a name, and define its logic.

// Function Declaration
function multiply(a, b) {
  return a * b;
}

console.log(multiply(5, 4)); // Output: 20

Function Expression (The Variable Way)

A Function Expression is when you create a function and assign it to a variable. In this case, the function is often "anonymous" (it doesn't have its own name) because the variable name is used to call it.

// Function Expression
const multiplyExpr = function(a, b) {
  return a * b;
};

console.log(multiplyExpr(5, 4)); // Output: 20

The "Hoisting" Difference (High Level)

This is where things get interesting. In JavaScript, Hoisting is a behavior where the engine moves declarations to the top of the code before running it.

• Declarations are hoisted: You can call a function before you even define it in your code.

• Expressions are NOT hoisted: If you try to call a function expression before it’s defined, your code will crash.

// This works! (Hoisted)
sayHello(); 
function sayHello() {
  console.log("Hello from the declaration!");
}

// This crashes! (Not hoisted)
sayHi(); 
const sayHi = function() {
  console.log("Hi from the expression!");
};

When to Use Which?

• Use Declarations when you want a function to be available everywhere in your script or for general utility functions.

• Use Expressions when you want to keep your code organized, limit where a function can be accessed, or when you’re passing functions into other methods (like map or filter).

Conclusion

Whether you prefer the traditional declaration or the modern expression, the goal is the same: reusability. By moving your logic into functions, you make your code more organized and much easier to debug. Checkout the cover image to brush up this blog.

Following are the topics that we are going to cover in this blog...

• push() and pop()

• shift() and unshift()

• map()

• filter()

• reduce() (basic explanation only)

• forEach()

Adding & Removing (The Fast Track)

These methods allow you to quickly change the contents of your array.

• push() / pop(): Work at the end of the array.

• unshift() / shift(): Work at the beginning of the array.

let stack = ["Book1", "Book2"];

stack.push("Book3"); // ["Book1", "Book2", "Book3"] - Add to end
stack.pop();         // ["Book1", "Book2"] - Remove from end

stack.unshift("Newspaper"); // ["Newspaper", "Book1", "Book2"] - Add to start
stack.shift();              // ["Book1", "Book2"] - Remove from start

Transformation Methods: map(), filter(), & forEach(), reduce()

These are the heavy hitters. They allow you to process every item in an array in one go.

forEach() — The Elegant Loop

Instead of writing a complex for loop, forEach simply performs an action for every item. it will return the output on same array that was earlier.

let users = ["Alice", "Bob", "Charlie"];
users.forEach(name => console.log("User: " + name));

map() — The Transformer

map() creates a new array by performing an operation on every element. It doesn’t change the original; it gives you a modified copy.

let prices = [10, 20, 30];
let discountedPrices = prices.map(p => p * 0.9); 

console.log(discountedPrices); // [9, 18, 27]

filter() — The Security Guard

filter() creates a new array containing only the items that pass a specific "test."

let ages = [12, 25, 17, 30];
let adults = ages.filter(age => age >= 18);

console.log(adults); // [25, 30]

reduce() — The Accumulator

reduce() is used when you want to take an entire array and "squash" it into a single value (like a total sum).

Think of it like a snowball rolling down a hill it keeps gathering more until it reaches the bottom.

let bills = [50, 100, 25];
let total = bills.reduce((accumulator, current) => accumulator + current, 0);

console.log(total); // 175

Conclusion

Using methods like map() and filter() is a milestone in your journey. It marks the transition from writing code that simply "works" to writing code that is functional, clean, and professional.

• let item1 = "Milk";

• let item2 = "Eggs";

• let item3 = "Bread";

That works for three items, but what if you have 50? This is where Arrays come to the rescue. An array is a single variable that can hold a collection of values, stored in a specific order.

Topics we are going to cover in this particular blogs are...

• How to create an array

• Accessing elements using index

• Updating elements

• Array length property

• Basic looping over arrays

How to Create an Array?

Creating an array is as simple as using square brackets [] and separating your items with commas.

// An array of strings
let fruits = ["Apple", "Banana", "Mango", "Orange"];

// An array of numbers
let testMarks = [85, 92, 78, 95];

Accessing Elements (The "Index" Rule)

To get an item out of an array, you use its index (its position number).

Crucial Note: JavaScript uses Zero-based Indexing. This means the computer starts counting from 0, not 1.

• The 1st item is at index 0.

• The 2nd item is at index 1.

let fruits = ["Apple", "Banana", "Mango"];

console.log(fruits[0]); // Output: Apple
console.log(fruits[1]); // Output: Banana

Updating Elements

Arrays are not set in stone. You can change any value inside them just by referencing its index.

let tasks = ["Clean Room", "Exercise", "Study"];

// Change "Exercise" to "Go for a Run"
tasks[1] = "Go for a Run";

console.log(tasks); // ["Clean Room", "Go for a Run", "Study"]

The .length Property

How do you know how many items are in your list? You use the .length property. This is incredibly useful when you don't know the size of your data beforehand.

let students = ["Alice", "Bob", "Charlie", "David"];
console.log(students.length); // Output: 4

Looping Over Arrays

The real power of arrays comes when you combine them with the loops we learned in the last blog. You can use a for loop to go through every item in an array automatically.

let colors = ["Red", "Green", "Blue", "Yellow"];

for (let i = 0; i < colors.length; i++) {
  console.log("Color " + i + " is " + colors[i]);
}

Conclusion

Arrays are the first real step toward building data-driven applications. Instead of managing a messy room full of individual variables, you’ve now learned how to organize everything into a clean, indexed shelf.

• If it is raining, then take an umbrella.

• Else, leave it at home.

In programming, this is called Control Flow. By default, code runs in a straight line from top to bottom. Control flow allows us to create "forks in the road," where the computer chooses which path to take based on the conditions we set.

The if Statement (The Basic Choice)

The if statement is the simplest form of control. If a condition is true, the code inside the curly braces runs. If it's false, the computer simply skips it.

let marks = 45;

if (marks >= 33) {
  console.log("You passed!");
}

The if-else Statement (The Fork in the Road)

What if you want something else to happen when the condition is false? That’s where else comes in.

let age = 16;

if (age >= 18) {
  console.log("You can vote.");
} else {
  console.log("Too young to vote.");
}

The else if Ladder (Multiple Options)

Life isn't always "Yes" or "No." Sometimes there are several possibilities. The else if ladder lets you check multiple conditions in order. The computer stops at the first true condition it finds.

let time = 14; // 2:00 PM

if (time < 12) {
  console.log("Good Morning");
} else if (time < 17) {
  console.log("Good Afternoon");
} else {
  console.log("Good Evening");
}

The switch Statement (The Organized List)

When you have one variable and you want to check it against many specific values (like days of the week or menu items), an else if ladder can get messy. The switch statement is a cleaner way to handle this.

Why do we need break?

Think of break as your exit strategy. Without it, the code will "fall through" and execute every single case below the one that matched, even if they aren't true!

let fruit = "Apple";

switch (fruit) {
  case "Banana":
    console.log("Yellow and curved.");
    break;
  case "Apple":
    console.log("Red and crunchy.");
    break;
  default:
    console.log("Unknown fruit.");
}

When to use switch vs if-else?

Conclusion

Control flow is the brain of your application. By mastering if-else and switch, you’ve moved from just writing "scripts" to building "logic." Whether you're validating a login form or determining the path of a player in a game, these structures are the foundation of every decision your program will ever make.

• What operators are?

• Arithmetic operators (+, -, *, /, %)

• Comparison operators (==, ===, !=, >, <)

• Logical operators (&&, ||, !)

• Assignment operators (=, +=, -=)

What operators are...

Operators are the symbols which exhibit a specific meaning in programming that represent specific mathematical, logical, or assignment actions performed on data, known as operands.

Arithmetic Operators (The Math Stuff)

These are used to perform basic mathematical calculations.

let a = 10;
let b = 3;

console.log(a + b); // Addition: 13
console.log(a - b); // Subtraction: 7
console.log(a * b); // Multiplication: 30
console.log(a / b); // Division: 3.333...
console.log(a % b); // Modulo (Remainder): 1 (because 3 goes into 10 thrice, with 1 left over)

Comparison Operators (The Decision Makers)

Comparison operators check the relationship between two values and return true or false

The Big Difference: == vs ===

• == (Loose Equality): Checks only the value, ignoring the type. (e.g., 5 == "5" is true).

• === (Strict Equality): Checks both the value AND the type. This is the one you should use most often to avoid bugs.

let x = 5;
let y = "5";

console.log(x == y);  // true (Value is the same)
console.log(x === y); // false (Number vs String)
console.log(x != y);  // false (Loose "not equal")
console.log(10 > 5);  // true (Greater than)
console.log(3 < 1);   // false (Less than)

Logical Operators (The "And/Or" Logic)

These allow you to combine multiple conditions together.

• && (AND): Returns true only if both sides are true.

• || (OR): Returns true if at least one side is true.

• ! (NOT): Reverses the value (true becomes false).

let isAdult = true;
let hasTicket = false;

console.log(isAdult && hasTicket); // false (needs both)
console.log(isAdult || hasTicket); // true (needs at least one)
console.log(!isAdult);             // false (reverses true)

Assignment Operators (The Shorthands)

Assignment operators are used to assign values to variables. You can also combine them with math to write shorter code.

let score = 10; // Simple assignment

score += 5; // Same as: score = score + 5 (Result: 15)
score -= 2; // Same as: score = score - 2 (Result: 13)

console.log(score); // 13

Conclusion

Mastering these basics might feel small, but they are the constant "moving parts" in every complex app, from a simple calculator to a massive supply chain dashboard.

• What variables are and why they are needed?

• How to declare variables using var, let, and const ?

• Primitive data types (string, number, boolean, null, undefined)

• Basic difference between var, let, and const

• What is scope (very beginner-friendly explanation)?

What variables are and why they are needed?

Variables are like a box or you can say an area to store values which can be replaced or override with new values depending on use case or future dependancy. For example: Take the example of your home ( Reference Indian Mom managing the box to store various daily use products ) , Someone bring a product in your home ie Bourn-vita, when you or your younger siblings consume all the Bourn-vita after some days then your mom use that box of Bourn-vita to store spices , sugar, salts etc🥲.

So, what is a Variable here? Yes, you guessed right Bourn-vita Box is the variable here, but what do we mean by overwrite or replaced value? Yes , you again guessed the right the product or material which is inside the Bourn-vita Box over the time passed.

Now, you can think of why variables are needed? It's because sometimes you need to modify or change something depending on the requirements at that moment.So, we need to have something which can modify themselves depending on situations to execute or fulfil the needs.

Let's see how we declare the variable?

• var ---> This is used for defining a Variable.

• var Bourn_vita = "protein";    // A variable name Bourn_vita having protein as value.
  

• let ---> This is also used for defining a Variable.

• let name = "InsideTech"; 
  let age = 21;
  

• const ---> This is used for defining a Constant (the value which can't be modified in any case scenario after assigning once)

• const hrsInDay = 24;
  

What are primitive data-types? and what is data-types?

Data-types are basically the different ways of representing a data such as boolean (true and false) , number(Integers), string (group of characters) etc.

Now what do we mean by primitive data-types? It is basically pre-defined data-types provided by a programming language to represent a simple single values like integers, boolean, strings etc.

Important thing to focus on some data-types like NaN and undefined. Let's understand these two in more detail.

• NaN : It is something which is not a Number. This will be your output in various different cases like converting a string into number which is not a valid or meaningful.

• let myName = "InsideTech";
  console.log(Number(myName)); // Output: NaN
  

• undefined : It is completely understandable if you know the meaning of undefined which means "not defined".

• null : This is little bit confusing to them who have't ever heard of this earlier. Because it means empty in Javascript. Keep in mind that empty doesn't mean '0'. Because 0 is itself a value. Empty isn't mean value is just mean empty!!!!!! nothing there !!!!

Basic difference between 'var' , 'let' and 'const'

• var (Hoisting)

• ## CASE 1
  
  var age = 21;
  console.log(age);  // Output : 21
  
  age = 42;
  console.log(age);  // Output : 42
  
  
  ## CASE 2 (Hoisting)
  
  console.log(nickname); // Output: undefined
  var nickname = "Flash";
  console.log(nickname); // Output: "Flash"
  

• let (Hoisting + Explanation )

• ## CASE 1
  
  let name = "Javascript";
  console.log(name);  // Output: Javascript
  
  name = "Blog";
  console.log(name);  // Output: Blog
  
  
  ## CASE 2 (Hoisting + Explanation)
  
  // --- Start of Temporal Dead Zone (TDZ) for 'price' ---
  console.log(price); // ❌ ReferenceError: Cannot access 'price' before initialization
  
  let price = 100;    // --- End of TDZ ---
  console.log(price); // ✅ Output: 100
  

• const

• ## CASE 1
  
  const monthInYear = 12;
  console.log(monthInYear);  // Output : 12
  
  
  ## CASE 2
  
  // --- Start of TDZ for 'API_KEY' ---
  console.log(API_KEY); // ❌ ReferenceError: Cannot access 'API_KEY' before initialization
  
  const API_KEY = "SECRET_123"; // --- End of TDZ ---
  console.log(API_KEY);         // ✅ Output: "SECRET_123"
  

Understand the TDZ with the help of Diagram

TDZ stands for Temporal Dead Zone, which is basically an area of no interest or no access of any variables before initialisation of it. It is most commonly occurs in let and const .

What is scope (very beginner-friendly explanation)?

Scope is more understandable if you think about your house building and your society's other buildings. Let's suppose you talked about something in your house, Will the people of other building be able to hear it? answer is NO! this is the simplest meaning of SCOPE.

Scope is a defined area within which a variable can be declared and used without disturbing any outer or global variables. Often enclosed in " { } " called as braces.

let request = 24;                  // Global variable
function myFunction(){
    let response = "Hello From InsideTech";    // Local variable

    console.log(response);     // Output : Hello From InsideTech
    console.log(request);      // Output : 24
}

console.log(response)     // Error: Initialise the "response" variable

In the above code you can see that there are two types of variables mentioned Global and Local

• Local : It can't be used or accessed from the outside of defined scope area. As you can see console.log(response) is throwing the error.

• Global : It can be used or accessed inside the local scope and also outside because it's globally declared. As you can see we are able to access the request variable inside the scope of response variable and console.log(request) is outputting the value as 24.

Conclusion

We now know about the variable and constant and how the hosting affects in different variables. Also got to know about the data-types (NaN , undefined and NULL) then we understand the meaning of scope (Global and Local).

• What Emmet is (in very simple terms)?

• Why Emmet is useful for HTML beginners?

• How Emmet works inside code editors?

• Basic Emmet syntax and abbreviations

• Creating HTML elements using Emmet

• Adding classes, IDs, and attributes

• Creating nested elements

• Repeating elements using multiplication

• Generating full HTML boilerplate with Emmet

What Emmet is?

Emmet is a shortcut language for HTML. Instead of writing full HTML code, you write a short abbreviation, press Tab, and your editor expands it into proper HTML.

Where can you use Emmet and how emment works inside code editors?

Emmet works inside most modern code editors:

• VS Code

• Sublime Text

• Atom

You don’t need a specific editor to learn Emmet. The concepts stay the same everywhere.How it works:

1. You type an Emmet abbreviation

2. Press Tab

3. The editor converts it into proper HTML code

That’s it. No magic setup needed.

Basic Emmet syntax and abbreviations

Emmet uses symbols that represent HTML structure

 Symbol  Meaning         

 `>`     Child element   
 `+`     Sibling element 
 `*`     Repeat element  
 `.`     Class           
 `#`     ID              
 `[]`    Attributes

Creating HTML elements using Emmet

To create an HTML element, just type the tag name.

p

Enter Tab, if become

<p> </p>

Adding classes, IDs, and attributes

Adding a class

div.container

Output:

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

Adding an ID

section#about

Output:

<section id="about"></section>

Creating nested elements

To create elements inside another element, use >

div>p

Output:

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

Repeating elements using multiplication

If you want multiple same elements, use *

li*3

Output:

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

With nesting:

ul>li*3

Output:

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

Generating full HTML boilerplate with Emmet

Just type:

!

Press Tab

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

Conclusion

If you are learning HTML, Emmet is not optional it’s a superpower. Start small, practice basic abbreviations, and slowly you’ll write HTML faster than you ever imagined.

• Why CSS selectors are needed?

• Element selector

• Class selector

• ID selector

• Group selectors

• Descendant selectors

• Basic selector priority (very high level)

Why CSS selectors are needed?

While you write your HTML code it comes with default user agent stylesheet( default browser styling) which is different in every browser so to make them looks same in every browser we need to cascade them. So, we need selectors to target the HTML elements and change there property.

There is a difference between Overwrite and Cascading, if you change one property and it results in change in all properties than its called Overwrite whereas if we change one property and it results in change in only the selected properties than its called Cascading Stylesheet. So, this is how CSS named , you will definitely never forgot that.

Element Selector

Its like selecting the HTML tags by there names. For example

h1 {
    background-color: #414141;                    // hexcode of a colour
}

Class Selector

This is helpfull when your HTML tags belongs to various different class or groups. Target such class is done by .className ,they are having priority higher than Element selector.

.group-one{
    color: #213121;
    font-size: 20px;
}

ID Selector

Its like calling your friend on his/her number. And id should be unique for everyone. They are having more priority than the class selector and you can access the id by using #idName.

#id-name {
    color: #313131;
    font-family: TImes-new-Roman;
}

Group Selector

Its like targeting group of HTML element at once by there comman id,class or just name selector.

.group-one , h1{

    display: flex;
    margin: 20px auto;

}

Descendant selectors

Its like accessing the child or grandchild form the parent elements or tags. It is done similar to group selector but here we don’t use the comma ( , ). We use space ( ) and we go from outside to inside to access everything in order. for example we have a <section> and inside it there is a <div> and inside div a <h1> tag is present. How you access the h1 now?

section div h1{

    color : #66ff1e;
    background-color: #414141;

}

Basic Selector Priority

Every selector has its priority. As we know, CSS executes its code from top to bottom. So, it is possible if you write the same name selector twice with the same property but different values, the last value is taken as the current value. Whereas if we talk about Class selectors and Element selectors, the Class selector always has a higher priority to override the Element selector properties. If we talk about the ID selector, then it has the highest priority among all. But once you use inline CSS, which is basically just going into your HTML file and mentioning any CSS property directly to your target tag, then no other CSS selector (ID, Class, normal, or any) can change or override it. Because it’s like picking the caller of the opponent in the fight.

We also have a !important which is used to directly mention that its having the highest priority whether its element selector , ID selector or class selector nothing effects it.

Conclusion

CSS is something interesting to learn, now you have to seach about what is difference between Tailwind vs CSS and second ShadCn vs Tailwind. Also Search about the Atomic CSS what are those and what are the difference it posses with normal CSS that we just discussed in this blog.

• What HTML is and why we use it?

• What an HTML tag is?

• Opening tag, closing tag, and content?

• What an HTML element means?

• Self-closing (void) elements

• Block-level vs inline elements

• Commonly used HTML tags

What is HTML and why we use it?

Before jumping to HTML directly first understand from where it comes. We know server response to the request sent by the users. But is that possible to give access of server to everyone? Answer is no, so how to handle the access, WWW(world wide web a standard for HTML,HTTP, URL structure) come up with the protocol of http(hyper text transfer protocol) which consists of http:// IP address or port / <file_name> format URL which helps the server to find the <file_name> and transfer it to client’s brower through application layer (OSI Model) by doing this we stop giving access to the server.

But the problem is not yet solved. Earlier the response that is sent by the server is not in readable format. Because server don’t know what is heading, what is paragraph etc. So, Tim Berners-Lee come up with the idea of Hyper Text, which is basically how a server treat the text in more readable and good format so language is called HTML now. You can understand the name of Hyper Text Markup Language(HTML).So, this language consists of tags which has a opening and closing representation <tag> and </tag> respectively, and name hyper text transfer protocol is for transfering those hyper texts over a transfer protocol.

After making the HTML, other developer also acknowlege this and later recognised by various browser.

You can see now how server was earlier and how it is now. we are going to see the tags of HTML and understand how a heading , paragraph , img tags etc are being interrupt.

What an HTML tags and what is opening and closing tags?

Tags define the format, structure, and meaning of content on a webpage. Opening tags are something enclosed in an angle brackets <name_of_tag> also know as chevrons, for example <h1> This is heading. Okay but the problem is to how much extent it is a heading? So, to overcome that Closing tags comes into the picture to define where a tag ends. For exampe : <h1> This is heading </h1>. Because if we don’t specify the closing of a tag than it will take everything inside that tag which is not preferable.

<h1> InsideTech </h1> : opening tag - content - closing tag

So, server didn’t render or show the tags they just show the content inside the tag in predefine or customised scaling and painting.

Now question is how a browser understand that the text coming from the response of the server is an HTML? its is done by server itself by adding a header to the file. The server who sends the HTML as a response are know as WebServers.

Header{
    Content-Type: txt/html
}

//now browser starts to parse the incoming text as HTML parser.
// because server is still sending the text but in HTML format.

Why most of the website uses www in the start of the URL?

This is a classic thing to learn about a WebServer, which basically indicates the landing page of a website or where you can access public information. So, wwwbasically means it points to a WebServer of that particular organization that they have running for their domains. But some people just search by domain name or just the name, so in that case, it automatically redirects to the webserver of that particular domain, and this has now become the standard. But it's just a standard, not a rule; you can directly point to your webserver without needing to mention www. However, www is now the standard, so it particularly indicates that it will return the HTML.

What an HTML Element mean?

These are for making the structure and meaning of the content on a webpage. it consists of 3 components ,opening tag, content and closing tag. <tag> content </tag>. if somebody ask about what is the difference between tags and element then you can say that tag are the delimiter(<p> and </p>) used in source code while element including content and the attributes.

Self-closing (void) elements

Some elements are "empty" or "self-closing" and do not have any content or a closing tag example <br> is known as break tag which is used to enter a line break inside a <p> tag without using another <p> tag. Similarly <hr> tag know as horizontal line tag used to add a horizontal line in you content. <img> is also another void element. There are many more tags like them.

Block level vs inline elements

Characteristic                         Block Elements                                   Inline Elements ---------- | --------
New Line                Always start on a new line.                                                    Do not start on a new line.
Width                    Take up the full width available of their parent container by default.        Only take up as much width as their content requires.
Height/Width            CSS height and width properties are respected.                                height and width properties have no effect.
Margins/Padding            Top and bottom margins and padding are applied.                                Top and bottom margins and padding are not applied (only horizontal).
Content                    Can contain other block-level or inline elements.                            Can typically only contain data or other inline elements.

Here you introduced with new terms like margin padding we will see that in css blog what they actually mean.

Let’s see Block Level and Inline Elements through diagram.

Commonly used HTML tags

Heading tag(<h1></h1>), paragraph tag(<p></p>), anchor tag(<a></a>), image tag (<img>), break line tag (<br>), horizontal line tag (<hr>), div tag(<div></div>) and many more.

Conclusion

We got to know the use and Existence of HTML and HTTP, and how things changed time to time. Interesting to know about a WebServer what they actually mean in real.

• Structure making

• HTML file making

• Upload to Server

• HTTP server running

• Response from server to client in form of HTML

• What a browser actually is (beyond “it opens websites”)

• Main parts of a browser (high-level overview)

• User Interface: address bar, tabs, buttons

• Browser Engine vs Rendering Engine (simple distinction)

• Networking: how a browser fetches HTML, CSS, JS

• HTML parsing and DOM creation

• CSS parsing and CSSOM creation

• How DOM and CSSOM come together

• Layout (reflow), painting, and display

• Very basic idea of parsing (using a simple math example)

What is a Browser and how it fetch the HTML,CSS and JS?

Browser is a powerful element of machine which helps in displaying many visuals that are coming or going into the machine/computer. Browser consists of various components within them to execute a particular task let’s see how a webpage is displayed over a browser after hitting the URL or we can say how HTML, CSS and JS is fetching on clicking the URL from browser.

What is parsing? Basic idea of parsing!

You can see the flow diagram, there are some terms to explain here such as What is Parser? Parser is like the BODMAS of browser, which mean there are some rules to calculate the result. For example 1 + 2 × 3 = ?

Main parts of a browser

Browser have various componets within it to execute the tasks. User Interface, Browser Engine(Gecko,Chrominum), Rendering Engine, Networking, JS Interpreter, UI Backend, disk API ( local storage ).

• User Interface: it acts as a bridge between humans and machines to communicates within the web,applications and devices.ie, Tabs, buttons, address bar etc.

• Browser Engine: Its core software components that interprets web pages code (HTML,CSS,JS) and draws the visual that you see on your screen acting as the bridge between the browser's user interface and the web content.

• Rendering Engine: Transforming code into the interactive visuals you see on your screen.

• Networking: For DNS lookups that we already seen in previous blogs.

• JS Interpreter: Used to read and execute the Javascript code, usually its like a software embedded in your browser.

• UI Backend: It is an archetecture approach where the server dictated the structure, content and behaviour of the user interface,rather than the client side code.

• Disk API: A programmin interface used to manage,read, write and manipulate file storage, either local storage or cloud storage.

What is DOM and CSSOM?

the DOM represents the structure and content of a page, the CSSOM represents its styling.

HTML parsing and DOM?

HTML parsing is the process by which a web browser converts HTML markup into a tree-like structure in memory called the Document Object Model (DOM).

CSS parsing and CSSOM?

CSS parsing is the browser's process of converting raw CSS code into a structured, usable format called the CSS Object Model (CSSOM).

How DOM and CSSOM come together?

• DOM Construction: The browser parses the HTML markup and builds the DOM tree, which represents the structure and content of the page.

• CSSOM Construction: The browser processes the CSS (from external, embedded, or inline sources) and builds the CSSOM tree, which is a map of all style rules, their hierarchy, and specificity.

• Render Tree Creation: The browser's rendering engine combines the DOM and CSSOM trees. Starting from the root of the DOM, it traverses all visible nodes and applies the corresponding computed styles from the CSSOM. Visibility and style Calculations.

• Layout and Paint: Once the render tree is complete, the browser performs the "layout" (or reflow) step, which calculates the exact position and size of each element in the viewport. Finally, the "paint" step converts this information into pixels on the screen.

Frame constructor, Layout (reflow), painting, and display

These are the components of the browser, which after creation of DOM acts. Starting with Frame constructor which is similar to frames or skeleton building,then comes reflow or layout which is just the mathematics or computation of the segments, then painting which is basically how the visuals looks like on screen and finaly the display to output everything on a screen of your device.

We prefer not to do reflow because it laids to computations so most of the time do colour chagne on click not the bold or sizing change on click. So, painting is less computational than the reflow because in reflow the tree formation occurs again and again which makes a lot of mathematical computations.

Web Parsing

It the automatic process to analyse the raw HTML, XML data retrieved from website to extract, structure and clean data or specific information.

There are two types of web-parsing Conventional and Unconventional parsing.

• Conventional parsing: They follow some rules to execute the task like CSS, JS.

• Unconventional parsing: It follow no rules ie HTML.

HTML is the only error friendly language on web that’s why its also an Unconventional parsing or solo parser on internet. Once we tried to use the strick parser but people complaint about the problem. so, again its come to unconventional parsing.

Conclusion

Understing browser is a new experience and we should learn the behind the scene how it actually fetch the code from the Server into your device screen.

• What is cURL (in very simple terms)?

• Why programmers need cURL?

• Making your first request using cURL

• Understanding request and response

• Using cURL to talk to APIs

• Common mistakes beginners make with cURL

What is cURL and why progrmmers need cURL?

Before understanding the cRUL let’s understand what is a server?

Server are basically a dedicated computers that provide services on the behalf of client such as ordinary desktop computers or workstation. So, it’s a centralised machine connected with multiple devices or client over the internet or LAN(Local Area Network). They connect with server for specific service. For example those services can be to retrieve a website, to access data or email and so on. A server could be dedicated to handle one service at a time for example webserver(only for retrieveing the websites) , mailserver(to send and receive the mails) and more. But it’s also possible to have a single server having all services included in it.

So, to talk with the server we as a client use the cURL, cURL is a widely used open source software consists of command line tool (curl) and a development library (libcurl) for transferring the data with URL syntax. It is mostly used by developer or administrator to automate tasks, testing APIs, upload and download files over a wide range of network protocols.

Server is a 24×7 running machine so to make that robust we can’t just use any ordinary desktop computers because they have some limitations which can’t handle more than a limit connections. So, the server consists of a processor ie intel XEON different than that of a ordinary computer processor ie Intel i7,i5.

Xeon processor support a multi-processor environment to distibute the workload(more than one porcessor are present) whereas ordinary computer support a single processor environment.

Xeon processor support ECC RAM(Error correcting code) which helps to maintain the robustness of a server by checking the processed data of RAM module, if there is an error it will correct it to prevent memory errors.

Making your first request using cURL, request , response and APIs.

Before running these commands make sure your device has pre-installed the curl, check on internet how to install curl on your paricular operating system.

Below —help command will show you the list of commands that you can use with the curl.

curl --help

This command will output all the content of the mentioned website.

curl https://hashnode.com

Below command will let you store the html code coming from the website into your local device with the file name save.html

curl -o save.html https://hashnode.com

It will show all the html content that you just pulled from the https://hashnode.com website.

cat save.html

It will store the response output html into the index.html file and you can see the file content using cat command.

curl -O https://hashnode.com/index.html

Let’s check below commands how redirecting checks are tested.

curl https://blog.meetabhinav.com

This command will extract all the content from my website.

Now let's check my catch all function that i set on my NameServe provider to redirect
https://meetabhinav.com to https://blog.meetabhinav.com


curl -L https://meetabhinav.com

Now this command will give me the content of the website blog.meetabhinav.com because its
gets redirected over there.

Now let’s know more interesting things, we can also check the response headers that are sent by webserver back to clients, the commands provided below.

curl -I https://hashnode.com

We can also see the TLS handshaking or client server communications execution using below command

curl -v https://hashnode.com

By the way GET is the default function assigned to curl command and if you want to use POST you can use the -d or —data command for example curl https://dummy_data//path -d “x = something & y = something” and this will POST into the server.

Search online on internet free api dummy data and select the method and copy paste the path and run the curl command to check the functionality.

Common mistakes beginners make with cURL

• Skipping Documentation & Proper Research

• Failure to Check Return Codes

• Disabling TLS Certificate Checks

• Ignoring Thread Safety Rules

And many more, google or search by yourself to know more.

Conclusion

You might get uncomfortable using cURL but don’t worry you will get it somedays. Do online research and try to learn the command and also impliment on your device to see the working of commands to know better.

Let’s checkout the topics that we are going to cover in this blog…

• Why DNS records are needed?

• What an NS Record is (who is responsible for a domain)?

• What an A Record is (domain → IPv4 address)?

• What an AAAA Record is (domain → IPv6 address)?

• What a CNAME Record is (one name pointing to another name)?

• What an MX Record is (how emails find your mail server)?

• What a TXT Record is (extra information and verification)?

• How all DNS records work together for one website?

Why DNS records are needed?

As we have seen the flow diagram in previous DNS blog , So everytime when a server gives the response it can be any data for example it can be IP address, TLD server address, Authoritative server Address, TXT ,canonical server address etc. So, we need to understand the server’s response everytime to get the information about the it.

There are various types of DNS records some of them are MX, A, AAAA, CNAME, TXT, NS etc. Let’s understand them one by one.

What an NS Record is?

NS stands for Name Server, it is a type of DNS record which is used to identify the authoritative DNS server for a particular domain/website, directing internet traffic to a specific server where website’s IP address and other records like MX, A are stored.

Key aspects of NS Record are Functionality, Responsibility of a domain, Reliable and Components. Let’s understand these terms one by one…

• Functionality: Without proper configuration of NS record, a website or application will not load properly on your device from where the request was initiated.

• Responsibility: They define which DNS server is actually responsible for a particular website or domain.

• Reliable: There are two NS alloted for a domain (primary and secondary) it helps in case one server is under maintenance or gets down then the second NS will manage the traffic.

• Components: Each record consists of domain name, TTL(time to live), and name of server. TTL is basically how much time the data of a recently visited website by caching is stored on my local machine, after that its again need to refresh the page or update.

What is A Record ? (domain → IPv4 version)

A Record is the fundamental DNS record which is used to convert human readable website names ie example.com into the actual IP address of the domain of 32 bit addressing ie 192.0.2.1 that’s why IPv4 version.

Key aspects of this Record are 32 bit IP addressing, One-to-many potential, Load balancing etc.

• 32 bit IP address : A record strictly uses the 32 bit address to point any IP.

• One-to-many potential : Multiple domains or sub-domains can have a single or same IP Address.

• Load balancing : Some websites or domain have multiple A records to control the traffics in case of server down or maintenance.

What an AAAA Record is (domain → IPv6 address)?

AAAA or quad A record is used to map the domain name to the 128 bit address IP, that’s why its IPv6. Its provides superior addressing than the IPv4 addressing.

Key aspects of AAAA records are Usage and Functionality. example of IPv6 2606.4700.4700.1111

• Usage : A record consits of both A and AAAA records which helps to maintain dual stack of IPv4 and IPv6 addressing.

• Functionality : If the user’s network supports IPv6 the browser will query for the AAAA records first.

What a CNAME Record is (one name pointing to another name)?

CNAME stands for Canonical Name which is like a pointer which always points to other domain and subdomin but never points to any IP address. Which mean let’s suppose i have purchased a domain meetabhinav.com and i added a subdomain on it of name blog. So, now my final domain is like blog.meetabhinav.com ,while setting up the blog sub-domain on top of main domain i added a CNAME record to this blog ,which will eventually points to the main domain (meetabhinav.com) during DNS querry and then you will get the A record from the main domain.

You can now see how CNAME actually works during a DNS querry.

What an MX Record is (how emails find your mail server)?

MX Record is an importand DNS record which helps to specify the mail server to accept the mail on the behafe of a domain.

Let’s understand it with the example of letters, postman and postoffice…

Imagine you want to send a letter to a friend who lives in a town called "ExampleLand." You hand the letter to your postman. The postman looks at the envelope and sees the address: friend@exampleland.com.

The postman knows how to get to the town of ExampleLand, but he doesn't deliver letters directly to people's front doors. Instead, he has to find the specific Post Office that is allowed to handle mail for everyone in ExampleLand.

To find out which Post Office to go to, the postman looks at a giant Signpost (the MX Record) at the entrance of the town. This signpost says: "All mail for ExampleLand must be dropped off at the Blue Post Office on Main Street." The postman follows that instruction, drives to the Blue Post Office (the Mail Server), and hands over the letter. Once the letter is inside the Blue Post Office, the workers there look at the name "Friend" and put it in your friend's specific P.O. Box.

SMTP stands for simple mail transfer protocol which is used to send the mais and IMAP and POP3 are used to receive the mails.

There are multiple mail servers for a particular domain with the priority numbers , lower the number value higher is the priority of that server. we use multiple because in case of 1st mail server failure or server down, 2nd mail server will take the charge of traffic.

How all DNS records work together for one website?

DNS records work together as a collaborative, hierarchical system to translate a human-readable domain name into an IP address, directing web traffic, email, and security protocols to the correct servers.

• The Foundation (NS and SOA)

  NS helps to find the authoritative server of a domain where as SOA stands for start of authority which is the first record in any zone file which consists the information of administator, admin email, primary nameserver and more.

• DIrecting Web-traffics(CNAME , A and AAAA)

  A record will map your domain into 32 bit IPv4 address and AAAA will map your domain to a 128 bit IPv6 address. CNAME creates an alias this allows you to update the A record once, and all CNAME-linked subdomains update automatically.

• Handling subdomain and alias (CNAME and DNAME)

  DNAME stands for Delegation Name Used to redirect an entire sub-tree of domains to another, often used during domain migration. and CNAME is used to point the sub-domain to the main domain.

• Directing Email (MX record)

  Tell the internet where to send email for your domain.

• Security and Verification (TXT record)

  TXT is used to store the text based information about the security such as SPF (Sender Policy Framework) Identifies which mail servers are authorized to send email on behalf of your domain. DKIM/DMARC are for additional email authentication methods.

• Specialized Services SRV Records

  Specify the location (hostname and port) for specific services, such as VoIP or messaging, rather than just web or email traffic.

Conclusion

Record are the type of data which is the output of a DNS query each record has its own significance.

• What is DNS and why name resolution exists?

• What is the dig command and when it is used?

• Understanding dig . NS and root name servers

• Understanding dig com NS and TLD name servers

• Understanding dig google.com NS and authoritative name servers

• Understanding dig google.com and the full DNS resolution flow

What is DNS?

DNS stands for Domain Name System, before driving deep inside the technical. Let’s understand this in simple way.

We humans are not good in memorising the numbers but good in remembering the names, as we named everything ie humans names Rohit, Sunil etc whereas on the otherside machines are good in understanding the numbers rather than names. So, to bridge this gap between humans and machines DNS comes into the picture whose one of the main functions is to convert the input given by humans in name type into the numerical value type (IP) for the machines to address them and give the response back to the humans.

The DNS resolution is something like the phonebook/contact list in phone, where we generally search for names and get the number. So, DNS is very essential to translate the human readable text to machine readable IP addresses.

What is ‘dig’ command and when it is used?

dig stands for Domain Information Groper which is a powerful administrator command line tool used to querry the DNS servers to troubleshoot,diagnose and verify domain configurations.

There is also a similar command to dig which is nslookup which also use for querry the DNS but the key difference between these two commands is, dig uses the operating system DNS querry library where as nslookup doesn’t use the library.

We use dig command to get the information of the DNS in various ways like knowing the DNS recode ie A, CNAME,NS,MX etc we will see what are records in next blog. So, basically we use dig for basic lookup, querry DNS records, querry DNS server, trace route , short answer only.

dig google.com         -->            will give the IP in 'A' type DNS record.

dig google.com CNAME   -->            will give the DNS CNAME record details specificaly.

dig google.com +short  -->            will just give you IP address nothing else.

dig @IP_of_other_DNS google.com  -->  used when you want to check the other’s DNS server.

Understanding dig . NS and root name server?

If we understand the command here dig . NS, dig is command - whereas ‘dot’ means root - and NS means the Name Server which is a DNS Record.

Let’s see the flow of the command…

'dig' will start to find the root server (.) after that NS is called which mean authoritative
server (main authority) 

And we will see the output on the terminal as a list of 13 Root server which is spread
accross the world and controlled and managed by 12 different organisations.

___LIST OF 13 SERVERS___

            51xxxx    IN    NS    a.root-servers.net.
.            51xxxx    IN    NS    b.root-servers.net.
.            51xxxx    IN    NS    c.root-servers.net.
.            51xxxx    IN    NS    d.root-servers.net.
.            51xxxx    IN    NS    e.root-servers.net.
.            51xxxx    IN    NS    f.root-servers.net.
.            51xxxx    IN    NS    g.root-servers.net.
.            51xxxx    IN    NS    h.root-servers.net.
.            51xxxx    IN    NS    i.root-servers.net.
.            51xxxx    IN    NS    j.root-servers.net.
.            51xxxx    IN    NS    k.root-servers.net.
.            51xxxx    IN    NS    l.root-servers.net.
.            51xxxx    IN    NS    m.root-servers.net.

-----COMMENTS TO READ-----
// Don't think to much as for now we will see the flow diagram later in this blog.

Understanding dig com NS command

This is another important dig command to get the information about the TLD Servers (TOP LEVEL DOMAIN) ie .com,.org etc. Root Servers directs the traffic to TLD for more information.

___TLD Servers___

d.gtld-servers.net.
h.gtld-servers.net.
m.gtld-servers.net.
a.gtld-servers.net.
j.gtld-servers.net.
i.gtld-servers.net.
e.gtld-servers.net.
f.gtld-servers.net.
b.gtld-servers.net.
k.gtld-servers.net.
l.gtld-servers.net.
g.gtld-servers.net.
c.gtld-servers.net.

Understanding dig google.com NS and Authoritative Server

Here dig command is further driving deep inside the TLD Server (.com extension) to locate the authoritative server(google, in this command) which holds all the details ie IP address of the domain google.com

___YOU WILL SEE THE DETAILS OF AUTHORITATIVE SERVER___

ns3.google.com.        108149    IN    A    216.239.36.10
ns2.google.com.        345463    IN    A    216.239.34.10
ns4.google.com.        63718    IN    A    216.239.38.10

FLOW DIAGRAM of DNS Resolution

Let’s understand this diagram…

When a user or client searches for something like zerodha.com, the browser contacts a helper called the Resolver Server, which does all the work for the browser. The resolver first goes to the Root server. The Root server checks the extension, like .com, and sends the request to the TLD server. Then, the resolver goes to the TLD server, which looks for the authoritative server, in this case, zerodha. Finally, the resolver moves to the authoritative server, gets the IP address of zerodha.com, and provides it to the browser. Now, your screen displays the landing page of Zerodha.

Conclusion

Understanding the behind the scene of a tech is wonderfull and the more you deep drive the more you get to know the interesting facts about them.

• What are TCP and UDP and there key differences?

• When to use TCP?

• When to use UDP?

• Common real-world examples of TCP vs UDP

• What is HTTP and where it fits?

• Relationship between TCP and HTTP

Computer use communication protocols to communicates with each other over a network, TCP and UDP are such protocols.

What are TCP and UDP ?

TCP stands for Transmission Control Protocol which guaranttee the delivery of data, by error checking, congestion control, flow control, re-transmission in case of error or corupt files and ordering of data packets. Whereas UDP stands for User Datagram Protocol which gives no guaranttee of data delivery, they are also know as fire and forget portocol. which means they just starts transmiting the data without error checking, no flow control, no re-transmission, there is no process of establishing the connection first before sending the data, as we have seen the 3 way handshake in the TCP.

When to use TCP?

TCP is reliable and smart because it manage all the aspects of the network mechanism in which there is the posssibilty of data loss, data corruption, receiver overwhelm etc. so, we use the TCP in those areas where we want the data should sent and received correctly. ie sending emails (STMP Simple mail transfer protocol) , sending file (FTP File transfer protocol) and others where we don’t want to loose the data while transmitting.

But if we are using TCP, we have to sacrifies the speed because while managing all the aspects of data transmission and keeping in mind not to loss the data, keep the ordering of data packets, managing the flow control. By doing all this TCP loss alot of time. Hence, when we are using the TCP we are confident that data will not loss but we have to wait for longer time to receive the data. For example, YouTube Live Stream uses the TCP protocol, which is why you may have heard streamers mention a delay of 1 minute or 30 seconds. These delays actually occur due to the TCP protocol. The advantage is that you receive all the data, allowing you to pause and go back on the live stream.

When to use UDP?

UDP is less reliable because there is no guarantee of data transmission. It lacks error checking, retransmission, and flow control, meaning data is sent at a constant speed. If you just want to send data without any other concerns, you can use UDP.

For example, when watching live cricket on Hotstar, you might notice that sometimes the picture quality drops significantly, or the video freezes for a few seconds. When it resumes, you see a new frame, having skipped the frozen part.

So, what's happening? This is UDP transmission. It's simply sending data, and you're receiving it based on your internet speed. If you miss incoming data or frames, there's no way to go back and watch them because that data is already lost, with no retransmission. Imagine wanting to watch a cricket match with delays and lags. Would you enjoy it? No, you wouldn't. That's why UDP is used to send data quickly, allowing you to enjoy real-time visuals.

What is HTTP and where it fits?

HTTP stands for Hyper Text Transfer Protocol. Its runs of the Application layer(OSI Model) which is connected to the transport layer where TCP is present. One thing keep in mind before learning HTTP is that it’s not the data transmission protocol, HTTP a protocol which just set rules to display the data in various formats ie, png,img,txt,video etc.

HTTP is the stateless protocol which mean when the sender sends request and receiver gives the response back and the connection ended.

Let’s understand the HTTP using diagram…

Let’s see the HTTP insiders now!🥸 As Client send a request to the server , than server will check for the request data if the server has the data about the request it will send the response back to the client (Yes or No). So, those response are sent to client as a 3-digit status codes. What is status code now?

Now lets look on some method of HTTP requests GET, POST, DELETE etc what are they actually and how they are sent to the server and how server is responding to them?

Now let’s check the server response…

Relationship between HTTP and TCP

We can see each one of the 7-layers are interdependent on each other. Application layer act as the format maker and TCP,UCP are the carrier of those format/data with there respective functions.

TCP works on the Transport layer where the data in specific format comming from application layer(sender side) is transmitted to the receiver side. HTTP never sends the data, its just format the data. TCP will transmit the data further.

Conclusion

Understanding TCP and UDP, and how HTTP is different from them.

• What is TCP and why it is needed?

• Problems TCP is designed to solve.

• What is the TCP 3-Way Handshake?

• Step-by-step working of SYN, SYN-ACK, and ACK.

• How data transfer works in TCP?

• How TCP ensures reliability, order, and correctness?

• How a TCP connection is closed?

Before jumping directly into the TCP let’s understand how a computer communicate with other computers. For example we humans communicate with each other in a common language which can be Hindi , English , Bhojpuri, Maithili etc.

In computers, language can be UNICODE or ASCII. And let’s suppose two computers are there and they can understand different language. so, how to make them communicate with each other? There must be some conversion mechanism or rules to make it understandable to every devices/machines. So that’s called as PROTOCOLs in computer science, and TCP/IP is one of such protocols.

What is TCP and why it is needed?

TCP stands for Transmission Control Protocol is a foundational, connection oriented networking protocol that ensures the reliable,ordered and error-checked delivery data between applications through the Internet.

It is needed because it comes with guarantee of transmitting the data with a variety of functions like relaiblity,error checking, ordering , flow control, congestion control and re-transmission in case of error or courupt file. we will see the meaning of these terms in next section of problems TCP is designed to solve.

Problems TCP is designed to solve

Its helps to solve fundamental networking issue like data loss or packet loss, network congestion, out of order delivery and overwhelmed of reciver.

Reliabllity: Ensures that the data arrives at the recivers by checking the sequencing number and if data lost than re-transmit the data again.

Out of order/Ordering: By dividing the data into packets, it is transmitted to the receiver. At the receiver's end, the packets are rearranged in their original order to recreate the same data that the sender sent.

Error checking/Data corruption: TCP use checksum to verify the data is not altered or corrupted during transmission.

Network Congestion: TCP pick the best and least traffic route to transfer the data so that the traffic or we can say overloading is reduced which sometimes cause slow transmission of the data.

Control Flow: TCP use this to manage the flow of data to remove the overwhelmed situation of slow receiver.

What is TCP 3-Way Handshake?

As we know TCP is a connection oriented protocol, which mean before sending any data we need to first build the connection between server(receiver) and the client(sender).

Lets understand the concept of 3 Way handshake with the help of a diagram…

We can see here in picture what is actually happening step-by-step, It’s called building the connection.

• SYN(Synchronise) : First client will send a request to server to start the connection.

• SYN-ACK(Synchronise - Acknowledgment) : Server will reply the client with ACK single.

• ACK(Acknowlegment) : Client will acknowlege that again and then send it to server, I am ready to send data.

How Data Transfer works in TCP?

Segmentation and Sequencing: First the data from client gets divided into small data packets and each packet is assigned a order sequence number which helps the receiver to rearrange them into original order.

Acknowlegment: Its ACK bit or flag which is sent by receiver to inform that the data packet is received if ACK missed or not revceived by the sender after certain time interval, it is marked as lost or corrupt. In that case sender retransmit the data.

Full-Duplex Communication: Once the connection is stablished between sender and the receiver it become full duplex which means now sending and receiving the data is done simountaneously.

Flow Control: TCP also keep eye on the flow or we can say speed of transmission to prevent the overwhelming of the server.

How TCP ensures reliability, order and correctness?

TCP manage all this by utilising the connection oriented approach, checksums, acknowlegment , sequence number, network congestion and flow control.

Reliability (Guarantee of delivery) , Flow Control (prevent Overwhlem of server) , Ordered delivery ( correct sequence).

How a TCP connection is closed?

A TCP connection is closed by 4-way handshake process.

As we can see here first client will send the information about the end of data to the server , server will acknowlege that and than it send all remaining data that is left for the previous request of the sender/client. and at last sender will acknowlege that and finally connection is closed until the client reopens it by sending another request ie, searching something on web again.

• FIN(Client to Server) : Sender will send this to server. it mean i am done i have no more data left to send.

• ACK(Server to Client) : Receiver acknowlege that and send this signal before stoping the further transmission from receiver end to sender end.

• FIN((Server to Client again): Server transfered all remaining data after ACK signal and then send final FIN to asure the client that no more data left to transmit(I am done).

• ACK(Client to Server): Finally client will respond to the server FIN by ACK that yup i got you. and finally connection gets closed.

Conclusion

TCP is smart but slow, because it know how to manage everything but due to this it takes longer time to transfer the data form sender to receiver because most of the time gone for verifying and analysing the data.

Devices that we are going to cover here….

• Modem

• Router

• Hub

• Switch

• Firewall

• Load Balancer

MODEM

Modem word is made up from two words “MO” mean modulate and “DEM” mean demodulate. What do we mean by modulating and demodulating?

We all know that the computers only knows two numbers 0 and 1 which we call “Binary”. But the signals that we recieve form the internet mostly provided by you ISP(Internet Service Provider, Airter,jio etc) are in the analog data. So, to convert into binary we have to de-modulate them. And similarly when my computer want to send some data to the Internet, modem will modulate the binary data into the analog data for the transmission over wires and cables.

In other words we can say Modem will allow you to access the internet directly by creating a WAN (Wide Area Network ie home, office, etc) which contains a unique public IP. Lets See the diagram below to understand more better.

MODEM actually acts as a bridge for the router by connecting through a single Ethernet cable. We will see in Router section next.

Connected Device Circle represents Your WAN that your ISP has establish by connecting the cable into your MODEM,and make sure to purchase a internet plan from the ISP because establishing connection is not that you are using the internet😂.

ROUTER

It is also a Networking Device which allow you to make a LAN(Local Area Network) within a WAN, to connect multiple devices such as your phone,computer,tablet etc. It is connected through MODEM using an Ethernet cable.

The main function of the router is to act as a traffic cop which directs your data to destined IP address by exploring the best efficient way possible. Basically it divides your data into small packets and each packet have a header of destined IP. Each packets then go to next router which is under the ISP or INTERNET environment and gets directed to next router and this process keep on going to find the best efficient path and once it finds the path it will than send back to your device from where your have started to send data and all this happen within mili,nano seconds. ie, your search google.com on your device and in just blink of your eye you see the webpage of google.

One important ability of the Router is that it allows multiple device to share one public IP Address, which is know as NAT(Network Address Translation). But one cache is that Modem IP is actually PUBLIC IP that your ISP provided to you and it can be seen by the world. But your router IP is given by your Modem WAN’s IP so it looks like pubic but actually its a private IP.

Router is just so smart that it just swap the private IP with the Modem public IP which sending the data into the internet and when it gets the response, again NAT it and send to the Private IP of the device from where the request was done.🧐Noiccccee!!!!

HUB

Hub is a Networking Device used to connect multiple devices within a LAN(Local Area Network). Its works as broadcast technique. For example, a device transfer file to other device, than it just broadcast(send to all device connected to HUB). It works on Physical Layer (Layer 1) with a single collision domain(Half-duplex) which sometime laid to collision of response and request and network congestion occurs(a network is overloaded with more data traffic than its capacity can handle, causing a slowdown). HUB also main concern is about the security, and nowadays HUB gets replaced by SWITCH because they are more intelligent then HUB.

We can see that privacy concers are already coming in the picture, also we are using the bandwidth for the broadcasting on all devices. So, these are the problems that we generally face while using the HUB.

SWITCH

Switch is an intelligent networking device which has a MAC address table and port data, which helps to identify the intended device address. It doesn’t broadcast the data it just send the data on destined location which helps us to optimise the use of bandwidth. Switch operates on DATA LINK LAYER which is faster and less congested communication.

Removes the Privacy concerns, less congestion on network. This is why we replace the HUB with SWITCH nowadays.

FIREWALL

Firewall is a network security software,hardware or cloud based which act as a barrier between your trusted network or private network(home,office etc) and untrusted network or public network(internet) to help filtering the data traffic coming out and going traffic based on a predefined set of security rules to prevent unauthorised access and malicious attacks. The network administrator has a firewall access control list which is editable and helps to find the unauthorised access or attacks into the firewall.

The firewall rules are based on many things such as keywords, ports, IP address, domain names, Protocols etc. There are two types of firewall….

1. HOST BASED FIREWALL

   This is for private or indivisual protection only. Let’s see in diagram below.

   

2. Network BASED FIREWALL

   This is mostly used to protect a whole network or a big organisation.

   

   Big organisation and firm prefer to use Host based and network based firewall together because incase some unauthorised access gets penitrated from network based firewall than it must be stopped or detacted somewhere otherwise all device within that network is under malicious attacks. Check diagram below.

LOAD BALANCER

Load balancer is a network device which act as a traffic cop sitting in front of a server farm(an area where numbers of server are present). It distribute the incoming traffic into various servers to protect a single server from over loading , overwhelmed and helps to scale the application and higher availability.

For example you are running an application with your machine and day by day you application’s user keep on increasing so you need to upgrade your machine but you can do this for a certain limit only because it’s not possible to handle all the traffic from a single machine its gets hotter and slower (This is know as vertical scalling) whereas if we buy multiple machine in place of a single huge machine than i can distribute the traffics on each machine which will helps us in reducing the server load on one machine and many more(This is know as horizontal scalling). So, we generally do horizontal scalling.

Now question is how we distribute the traffics? We have several algorithms to distribute the traffics some of them are explained below.

• ROUND-ROBIN

Its just distribute the data request to each server that are present one by one and then.

• GEO BASED

This is like users requests directed to the respective user’s nearby server locations. For example. User traffic from INDIA are directed to indian servers, while some User traffic from Canada are directed towards the canadian server. But the drawbacks of this is in case the canadian server is handleing lower traffics and indian server is facing higher traffics than we can’t direct the indian user traffics to the canadian servers for distribution.

• Least Connection

This works on simple means if a server has lower traffics than the user’s data request is directed to less crowded servers.

Conclusion

Learning the Network devices is fun and now i understand various new terms and happy for writing this blog for myself. The cover image of this blog will show you how all these devices are interconneted to each other.