So without thinking too much let's proceed with the topics.

What is variables?

think of it like a box , you must have seen you mom storing the matarials inside the box for example , she stores sugar inside a box and on the top of that box she labels it as a sugar similarly for the salt and other stuff also

think of it like this

• Label on the box (variable)

• material inside it is the main content (datatypes)

Why we are giving such label to the box? the simple answer to the question is to pick the required material easily.

Naming rules for variable

here are the rules that you have to keep in mind while declaring the variables

1. It can contain only characters, numbers, $, and _

2. You cannot use keywords as variable names, for example: class, number, new, this etc.

3. Variable names can not we start with the numbers

   // valid variable names
   let name = "shubh"
   let $name = "shubh";
   let _db = "mydb"
   let $_items = "my items";
   
   // invalid variable names
   let 1name = "shubh" // incorrect : since starts with number
   let this = "mythis" // incorrect : since using keyword `this`
   

How to declare a variable?

In javaScript , since it is loosely typed language , so we don't need to define any type before defining variables hence we can use var , let or const to declare the variable. let's understand the usecase and the difference between all these ways

var

• it is an oldest way to decalre a variable in javaScript (this is how its done)

  
  var name = "shubh"
  

  and generally not recommended to use althrough it is working perfectly but still due some issues it is not recommended.

• it is a function-scopped, means whenever we are using var inside the functions then only we are able to use it properly otherwise it will be accessed globally (this is the probelm which i was talking about in 1st point). let me clear it with one example as well :

  
  let b = 10;
  {
      let a = 20;
  }
  
  
  console.log(a); // output : 20
  

  on the above example , can you guess the output? you must be thinking it must through error since it is not in the correct scope but you are wrong it will give 20 as the output. this is the problem with var .

• during hoisting we can access it even before declaration but the value returned by it will be undefined

• Also there is one more problem with var we can literally redeclare the variable using var

  
  var a = 30;
  var a = 20;
  console.log(a); // 20
  

let

• it is introduced in ES6 module of javaScript, to solve the problem that are occuring due to var

  let a = 20;
  
  console.log(a);
  

• let is blocked scoped, so we can only access the value inside the same scope , unlike the var

• we can not redeclare the variable using let .

• while hoisting, the variables which are defined using let are not bound to the global hence we can't access the variables before declaration

  
  console.log(a); // error : Cannot access 'a' before initialization
  
  let a = 20; 
  

const

• this is also introduced in ES6 modules, and also having almost all the features of let the only change is it is having some rules / strictness like

  • we can't change it's value

  • we must have to assign value while declaring the variable, which was optional in case of var or let

    const key = `SecuredKey`;
    
    //const myKey; this is not allowed
    

Comparision between var , let and const

Scopes

Scope is the term which defines that where your variables can be accessed , basically it tells us about the boundary of the variable till where it can be accessed , in javaScript there are majorly 3 types of scopes:

Global scope : global scope means we are declaring the variable outside the block or function, then it is considered that you variable now having the global scope and can be accessed anywhere in the file

let a = 20;

{
    console.log(a); //20 , here variable a is global scopped
}

Block scope : Block scope mean we are declaring the variable inside the block { } , and that variable can only be accessed inside that block only

{
    let z = "block scope"
    console.log(z); // valid // "block scope"
}
console.log(z); // not accessable

Note : if we use the var inside the block scope then it will be accessable outside also

Function scope : function scope means the variable only be accessible inside the function only.

function sayHi(){
    let name = "shubh";
    console.log(name); // valid // shubh
    
}
console.log(name); // error accessing the element

Summary :

Datatypes in JavaScript

In javaScript , datatypes are divided into two categories : primitive and non-primitive.

1. primitive : the datatypes which are already defined by the makers are known as primitive data types. there are total 7 primitive datatypes in js.

2. Non-primitive : non- primitive means user-defined types

let quickly go through with each type:

Primitive

1. Symbol - Unique and immutable identifier

2. Number - used to store the numeric values , it covers all type of numbers which includes integers, float, double , infinity, -infinity etc

3. BigInt - it is use very long numbers eg : const bigInt = 1234483792n

4. String - it is used to store the text values , eg : const str= "shubh"

5. Boolean - it is used to store the true or false

6. null - it is special data type of javaScript, which means the variable is empty, developer intentionally assign the null to the variable that till now has no data but in future will see for now it is empty , eg: let balance = null

7. undefined - when we don't assign anything to the variable then that variable's data type is know as undefined , eg : let name

Note : if you want to check the type of variable in js the you can simply use the typeof

non - primitive

1. Array - A special type of object used to store multiple values in an ordered list using indexes.

   let marks = [90,33, 99, 100];
   

2. Object - A collection of key–value pairs used to store related data and functions together.

   const myDetails = {
        name : "Shubh",
        age : 22,
        city : "jalandhar",
        salary : '10Lpa'
    }
   

3. Functions - A reusable block of code designed to perform a specific task and can be stored in variables or passed as values.

   function addNums(x,y,z){
       return x + y + z;
   }
   

Hope you love the blog ❤️

As of now we know about the arrays in javaScript, so the question that comes in our mind is if array is already there then what is the requirement of the objects? well we can understand it with a example:

Suppose I want to store my name , age and city then using array this is i can store my details

const myDetails = ["shubh", 22, "jalandhar"];

Now lets try to store the same data in the object

const myDetails = {
    name : "Shubh",
    age : 22,
    city : "jalandhar"
}

When one you found more meaningful? obvoiusly the object one right? so this is why we need objects to store the data with meaning

So, Object is nothing just a collection of key-value pairs , where key is the label (like name, age, city ) and the value is actual data which we are storing "shubh" 22,"jalandhar")

Creating objects

we can create object using curly braces { }

const myDetails = {
    name : "Shubh",
    age : 22,
    city : "jalandhar"
}
console.log(myDetails)

Accessing properties

In the object we can access the properties using two notations

1. Dot Notation

const myDetails = {
    name : "Shubh",
    age : 22,
    city : "jalandhar"
}

console.log(myDetails.age);
console.log(myDetails.city);
console.log(myDetails.name);

1. Bracket Notation

const myDetails = {
    name : "Shubh",
    age : 22,
    city : "jalandhar"
}

console.log(myDetails['name']);
console.log(myDetails['age']);

Updating object properties

we can update the properties of the object like this

const myDetails = {
    name : "Shubh",
    age : 22,
    city : "jalandhar"
}

myDetails.age = 21,
console.log(myDetails);

Adding and Deleting properties

1. Adding property

   const myDetails = {
       name : "Shubh",
       age : 22,
       city : "jalandhar"
   }
   
   myDetails.salary = '10Lpa',
   console.log(myDetails);
   

2. Deleting property

   const myDetails = {
       name : "Shubh",
       age : 22,
       city : "jalandhar",
       salary : '10Lpa'
   }
   
   delete myDetails.salary
   console.log(myDetails);
   

Looping through object

to simply loop over the object we can use the for...in loop, like this:

const myDetails = {
    name : "Shubh",
    age : 22,
    city : "jalandhar",
    salary : '10Lpa'
}

for (const key in myDetails) {
    console.log(myDetails[key]);
}

// output :
/*
    Shubh
    22
    jalandhar
    10Lpa

*/

Array vs Objects

Try it yourself

Here are the questions that you can practice by your own

1. Create an object representing a student

2. Add properties like name, age, course

3. Update one property

4. Print all keys and values using a loop

Conclusion

Objects are used when we want give details with label

• Object : key-value pair

• values of the object are accesed using dot notation, brackets notation

• we can add, remove or update the values of the object

• for looping we have to use for...in through keys

Hope you enjoyed reading❤️

First question that comes in our mind is - what exactly is function?

• In simpler terms it is something which to maintain dry (don't repeat yourself) principal , means it is that block of code which we have to use again and again in our codebase

still not clear? just look at this example:

Suppose we want to add two numbers a & b then how we are going to write the code it will be something like this :

but what if i told you again i have to add two numbers whose value is 70 and 80 , and i want to add these two numbers then it will be like this :

Have you observed something? ain't we repeating the same block of code again to get the desired output? Yes, we are now what will happens if i told to to again add two numbers whose value is 90 and 100 , then again you have to create 2 variables and again strore the result into another variable and then print the required output. So yes, we are repeating same code again and again , hence to overcome this problem concept of functions came into the existance.

Same problem using functions :

Now look at the above example, how function made our task very easy we just have to call that function and pass the arguments in it and done, we got out ans. So this is why we required functions.

Function Declaration

• it has a function name right there , we simply have to call that bame

function add(x, y){
    return x + y;
}

let ans1 = add(4,5);
console.log(ans1); // output : 9

Function Expression

• it basically means we are creating a function but storing that function in a seprate variable

  const add = function(x,y){
      return x + y;
  }
  
  let ans = add(10,20);
  console.log(ans); // output 30
  
  // here add becomes the function's name which is used for calling
  // that function
  

Difference between the Declaration and Expression

Basic Idea of hoisting :

Hoisting refers to the behavior where JavaScript moves the declarations of the variables and functions to the top of their scope during the compilation phase.

Key point -

• Function declaration can generally be used before they apper in the code

  const ans = addNums(2,3,4);
  console.log(ans); // output : 9
  
  function addNums(x,y,z){
      return x + y + z;
  }
  

• Function expression usually can't be used before they are defined

  const ans = addNums(2,3,4);
  console.log(ans); // error
  
  const addNums = function (x,y,z){
      return x + y + z;
  }
  

  

When to use each type ?

1. Function declaration : when we want a simple named function, or when we want to call it anywhere, even above the definition of the function or when we are writing normal "utility" functions like add subtract multiply etc.

   function addNums(x,y,z){
       return x + y + z;
   }
   

2. Function Expression : when we want to store the function in a variable or when we want to pass it somewhere.

   const  addNums = function(x,y,z){
       return x + y + z;
   }
   

Try it yourself :

here are some simple tasks that you can perform :

1. Write a function declaration that multiplies two numbers

2. Write the same logic using function expression

3. Call both functions and print results

4. Try calling them before defining and observe behavior

Conclusion

Functions are the building blocks of reusable, maintainable JavaScript. They let you follow the DRY principle by encapsulating logic you need to run multiple times.

• just keep one thing in mind (hoisting)

  • Declaration : works before the definition

  • Expression : throws an error.

Hope you enjoyed reading❤️

So let's proceed with the example:

Suppose there is no concept of arrays, and you are given with the task to store 7 names then how you are going to do this task? obviously using the variables you will be doing something like this

since it is 7 names so it seems do-able right? but what if i told you to store 1000 names or 10,000 names then how it sounds? still do-able but time consuming and also sounds difficult to create 1000 variables and manage them, So to solve these kind of problems arrays were introduced and with the help of arrays this is how we can perfom our tasks

So this is how with the help of arrays we can store all the names in the single variable only and we can access the values using the indexes (0,1,2..)

Note : In Javascript it is not necessary to have the element inside the array of same datatypes , we can store the elements having different datatypes as well for example

here you can see , we have storted the string, number, boolean inside the same array (and this is only possible in JS language.)

So we have already seen the array representation and the need of array, now we can say that it is a { collection of values stored in order }

Now let's take one example and perform some operations on the array

const arr = ["shubh",1,2,"work",true,{taks:"gym"}];

console.log(typeof arr) // output : object

Output : object (since everthing in javaScript is an object.)

Now let see how can we access the values

As you can see on the above example we are able to access the values of the array using indexes, which starts from 0 and go till the arr.length - 1;

• also we can access the last element of the array by using arr[arr.length - 1] or arr.at(-1)

Now let see how can we modify the values of the array

Here on the above example , as you can see i have modified the value of index 5 to empty object and then printed the array and you can see over there it gets modified as empty object.

Let's see some intresting case

on the above example as you can see , I have checked the length of array using arr.length and it comes out as 6, but the intresting thing is that what we will get if we try to access the index which is greater than 6 , so i have tried to access the 10th index and guess what i have got undefined as a output, which is pretty obvious, also we will get same output if we try to access the negative indexes.

Let's discuss some basic looping in the array

I will write the loop name along with the implemented example for the syntax in this sections

1. For loop :

   

2. While loop :

   

3. forEach loop :

   

So these are the basic loops that are generally used to iterate over the array.

Try it yourself :

1. Create an array of 5 favorite movies

2. Print the first and last element

3. Change one value and print updated array

4. Loop through the array and print all elements

5. Also figure out some inbuilt methods of array (like .toReversed, .concat etc)

Conclusion:

Arrays are one of the most fundamental and useful data structures in JavaScript. They let you group related values under a single variable, access items by numeric indices (starting at 0), and manage large or dynamic collections without creating many separate variables. In JavaScript, arrays can hold values of different types, which makes them flexible for many tasks.

Hope you enjoyed reading❤️

So in this blog what we are going to do is first we will understand the definition of the method and then we will see some examples of it, so let's proceed with the same

push & pop

these methods are used to add or remove the element from the end of the array.

• push → Insert the element on the end of array

• pop → remove the element from the end of array

Example :

shift & unshift

these methods are just opposite of the push and pop , here instead of the end we are inserting and removing the element from the front of the array.

• shift → used to remove the element from the begnning

• unshift → used to insert the element in the beginning of the array

Example :

Map

map is the method in the array which is used in such case when we want to perform some operations on the each element of the array , Suppose you have an array of numbers and you want to increment each value by 10 , then in this case you can use the map to perform your task easily, one thing that we have to keep in mind is map return new array and doesnot modify the original array.

Syntax of map functions : basically it runs an callback function to modify the values

array.map(callback(element, index, array), thisArg)

As you can see the callback function requires 3 parameters

1. element - The current element being processed in the array

2. index(optional) - The index of the current element being processed in the array.

3. array(optional) - The array map() was called upon.

apart from these parameter one more thing is there that is thisArg which is a value to use as this when executing callbackFn.

Example:

let's take one example of thisArg as well

• Look at the above example , what i have done is i have created one object myObj and inside that i have one key value: 10 , then I have used map and on the parameter of the map i have passed the object myObj and inside function I have accessed the value using this keyword, and as a result our array gets modified to new array.

Filter

filter is the method which is used to filter out the required value from the array , as the name itself is defining, it also takes callback function as an argument , and that callback function returns the boolean value, if the element is there it should returns true means the element should be included in the new filtered array , otherwise it should return false means the element will be excluded , and one thing that we have to keep in mind is filter() return a new array which includes the filtered element

array.filter(callback(element, index, array))

key point -

• it returns new array

• if callback return true - include the value

• if callback return false - exclude the value

Example:

• Look at the above example , i have taken one array of numbers and I am filtering out those numbers which are divisible by 2 and hence you can see the results , i got the numbers which are divisible by 2. ( [2, 4 , 6] here)

reduce

as the name suggests , this method is used to reduce an array into single value. like calculating sum, product etc.

array.reduce(callback(accumulator, currentValue, index, array), initialValue)

key points -

• accumulator → it stores the value of previous iteration.

• currentValue →current element

• initialValue → it stores the initial value of the accumulator

Example:

Exaplaination →

• acc = 1 → 1*1 = 1 → 1*2 = 2 → 2*3 = 6 → 6*4 = 24 → 24*5 = 120 → 120*6 = 720

• result = 720

forEach

this method is used to iterate over the array and alow us to perform some operation, it also takes callback function as a argument, main thing to keep in mind it doesnot return new array instead it mutates the original array.

Example :

Conclusion :

In this post we've looked at some of the most commonly used array operations in JavaScript , how to add and remove elements at the end (push, pop) and at the beginning (shift, unshift), and how to transform arrays element-by-element with map. These methods form the foundation for manipulating collections and are essential in everyday JS programming.

Hope you found it useful❤️

from any angle is it looks like nav bar? NO, right now let's apply some CSS in it

Now see which feels more engaging , obiously second one means after applying CSS, that's why we need CSS to style the webpages.

Now let's discuss the technical definition of CSS

• CSS stands for Cascading Style Sheets, here Cascading term means overriding, this is exactly what we are doing We are overriding the default properties of HTML tags given by browser, and Yes we do have special name for the styling given by browser which is known as User Agent Style.

How to give styles in CSS

• We are giving styling in CSS using selectors.

What are Selectors?

• Selectors name itself is defining it's definition, basically it is used to select the elements to give styling to them, there are mainly 4 ways to select the element :

1. Element Selector

• with the help of element selector , we can target a particular element by using HTML tag and apply the styling in that particular element also we can also apply the styling to it's child element let see how :

  

  Here you can see in HTML file , we have a <nav> tag and we have applied the styling to nav tag, so this is how using element selector we can apply the styling. Also We can also apply the stylings to the child elements of any tag using element tag

  

  Here you can see we have two child elements <h3> <h4> of nav so this is how we are able to apply the stylings to the child element using element tag.

Where it fails? When we have multiple same elements inside the parent elements and we don't want to apply the stylings to all elements , this is where it fails Example :

Here you can see we want different styles for each child of <nav> element but by using the element tag we are unable to do that.

2. Class Selectors

• Earlier , using element tag we were not able to give the different styling when we have multiple childs , so class selectors solves this problem for us, basically we have to give different classes to our HTML tag and by using class selectors we can apply different styling for each tags. Let' implement it practically

• Syntax to use class selector, We have to use dot(.) in front of the class name and then apply styling , you can refer the example's syntax below

  

Also we can give multiple class names to tag seperated by spaces like this class = "main div1", and the corresponding styles that we have given is going to applied.

3. ID Selectors

• It is another way to target HTML tags to give styling, an ID is used to uniquelly identify any tag so it is generally recommneded to use different id names for multiple tags, you can use same names as well there is no issue with that also.

• Syntax to use ID selectos, We have to use # before the name of id , refer the below example's syntax

  

4. Universal Selector (*)

• With the help of universal selectors we can apply the styling to the entire documents, Syntax to use universal selector

  

  Example :

  

  Here you can see I haven't targeted any particular element instead i have just written (*) and apply the styling and it is getting applied on the whole document this is how universal selectors works.

Grouping CSS selectors

By grouping means, if we want to apply the same styling to the different elements so without grouping we have to write is again and again but with the help of grouping we just have to write it once and done, CSS is going to be applied on all the different elements.

Now let's see the syntax for grouping the element in CSS We have to use it like this (refer images) Examples : 1. using element tags only

2. when we have classes and id's with element (generally we have it) then this is how it should be done.

Descendant CSS selectors

By decendent selector means, We are giving styles to the elements which are present inside other elements Example :

In the above example we are targetting the h2 tag whose path is like this

Main -> div -> h2

that's why while using decendant selector we have used main div h2 means we have to go to the main tag inside that we have to go to div and inside div finnaly we have to style h2

So this is how it works in CSS.

Basic selector pripority in CSS

As we have discussed the way of styling the element in CSS, so there is one question suppose we have applied the styling to using (*) universal selectors

 * {
    color: yellow;
   }

and also we have one div in which some text is there and in the div also we have applied the styling like this

 .div{
    color : red;
 }

Then what should be the color of the content in the div? will it be yellow or black? let see : In this example we have used universal selector to give text-color

But ass soon as we have given the styling using class selector it's color changes from yellow to red.

let's add one id to it and let's again try to change the text color using id selector

That's crazy now it is showing pink color , means id is having more priority than class selectors , and class is having more priority than universal , means there must be a priority in CSS.

here is the priority list

[ref of image : GeekForGeeks]

Hope you enjoyed reading.

Have you ever wondered what a Version Control System really is and what problems it solves?

If you are new to development, having a solid understanding of Git is extremely important not just the commands, but how Git works internally. Once you understand what Git is doing behind the scenes, the commands start making sense automatically.

Before diving into Git internals, let’s first understand why Git exists at all.

Understanding the .git Folder

A git repository contains:

• Your Project files

• A hidden .git folder that stores the history and metadeta

  

  This folder stores :

  • Complete project history

  • All commits

  • Branch information

  • Git configuration

Git Objects: Blob, Tree, Commit (Core Internals)

Git stores everything as objects.

1. Blob → Stores the content of a file, not the filename.

2. Tree → Represents a directory structure, linking filenames to blobs.

Commit → A commit object points to :

• A tree (project structure)

• Parent commit(s)

• Author information

• Commit message

How Git Tracks Changes (git add & git commit)

What Happens During git add?

• Git takes file content

• Converts it into blobs

• Places references into the staging area

What Happens During git commit?

• Git creates a commit object

• Stores the snapshot permanently

• Links it to previous commits

This is how Git builds a timeline of your project.

How Git Uses Hashes for Integrity

Every Git object is identified using a SHA-1 hash.

This ensures:

• Data integrity

• No accidental modification

• Secure history tracking

If even one character changes, the hash changes, This is why Git history is reliable and tamper-proof.

Branches Overview

The diagram above shows a repository with two separate development lines, allowing parallel work on a small feature and a longer-running feature in branches, while keeping the main branch free of unstable code.

Fun Fact! 🙂

Git was a side project of Linus Torvalds, the creator of the Linux operating system kernel. He started developing Git in April 2005 to manage the Linux kernel source code

Linus Torvalds designed Git in just ten days with specific goals in mind, including speed, support for distributed development, and data integrity. He intended it to be a temporary solution but it quickly evolved into the dominant version control system used worldwide today.

Thanks for reading

1. Why Version Control Exists

2. The Pendrive Analogy in Software Development

3. Problems Faced Before Version Control Systems

Have you ever wondered ,what exactly is Version Control System or what are the problems it solves? if you are new to it then it is very important for a developer to have a solid understanding of git.

At its core, Git is a version control system that helps developers track changes in their code over time. But that definition alone doesn’t explain why Git exists. To understand that, we need to look at how developers managed code before version control systems.

Life Before Version Control Systems

Before tools like Git existed, managing and sharing code in a team was extremely difficult. Developers relied on very manual and error-prone methods such as:

• Copying code to pendrives

• Sending projects via email

• Creating folders like:

  • project_final

  • project_final_v2

  • project_latest_final_really

• Manually telling teammates what changes were made

These methods worked only for very small projects and even then, barely.

There was no reliable way to answer basic questions, such as:

• What exactly changed in the code?

• Who made those changes?

• When were the changes made?

• What was the previous working version?

As a result, teams frequently faced issues like:

• Overwriting someone else’s code

• Losing important changes

• No history of the codebase

• No clear ownership of changes

Let’s take one example to eleborate more about this problem

Here's an example using a pen drive to share code between two developers (developer-1 and developer-2).

In the above image is is showing that -

Let's say developer-1 has written some code and needs help with a feature he can't develop. So, he decides to ask developer-2 for assistance. He zips his code, puts it on a pendrive, and sends it to his friend (developer-2). Developer-2 reviews the code, adds the feature, and then needs to do the same steps again. He zips the updated code and sends it back to developer-1. The problem is, how does developer-1 know which lines developer-2 changed? He would have to ask developer-2 about the changes made in the code. and again untill they have done with there works they have to repeat this process again and again , So you can see this much dificulty is there just between the 2 developer now imagine when there are more than 2 developers then what will happen?

So , basically the problem is that we are not able to track the changes made by the developers if we somehow able to track the changes then it is very easy to manage the code. Thats why version control systems like git come into the picture.

Why Version Control Becomes Mandatory

This is exactly why Version Control Systems came into existence.

Tools like Git solve these problems by:

• Automatically tracking every change

• Maintaining a complete history of the project

• Allowing multiple developers to work simultaneously

In modern software development, version control is mandatory for day to day use . Git didn’t become popular by chance , it became popular because it solved problems that every developer and every team inevitably faces.

Hope you enjoyed reading.

What is Git?

• it is a version control system which keeps track of all the changes that we have made in the codebase.

Understanding Usecase of Git

1. Track of Code changes → Git keeps track of every changes made in the codebase even a single (.)

2. Collaborations → Multiple developers can work on a single project without overwriting the code.

3. Undo Chnages →It gives you freedom to work without fear , means if something wents wrong then there is always a way to get back.

Git Terminologies

before moving to the commands we must have to understand some basic terminologies which we have to use while working with the git

1. Repositiory → Commanly called as Repo. it is a project folder which is tracked by git.

2. Staging Area → This is where you prepare the changes before saving them permanently.

3. Commit → commit is a snapshot of your project at a specific moment. thing to know is Each commit has it’s own Unique ID, and also message about that commit

4. Working Directory →The Working Directory is the place where Git puts the project files so you can view, edit, and work on them. Any changes you make here are unstaged until you add them.

5. Branch → it allows to work on your own feature wihtout interfaring with the actual code.

6. Head → Head points to your current location in the project history. it tells git where you are right now on which specific commit or branch

Basic git commands →

Developer’s workflow using git →

Step 1: Create Project

mkdir project_name
cd project_name

Step 2: Initialize Git

git init

Step 3: Create Files

touch main.txt README.md

Step 4: Check Status

git status  // shows the files are untracked

Step 5: Stage the file

git add main.txt

Step 6: Make some changes and Commit the changes

git add .
git commit -m "feature 1 created"

So this is how developers are working daily.

What is Browser

Browser is a rendering platform that talks to the server, that renders the documents and download files , images and also able to understand those files and what not , it is like a whole OS which works in the world of networking.

Example of browsers → Chrome, Microsoft Edge, Brave, FireFox, Safari etc.

High level Overview of browser

1. User Interface (UI) : Everything that you see and interacts with except the webpage itself, like groups , collections , bookmarks and themes . Each browser can have differenct user Interface and fatures.

2. Browser Engine : The browser engine is responsible for the content that is fetched from the server and user interactions. it keeps track of all the actions that is being performed by the user like which button is clicked, which url is asked to parse, and how the content will be displayed on the browser.

3. Rendering Engine : it is responsible for the rendering of the web content , in most of the browsers both the browsing engine and the rendering engine work togetner to provide the better results to the user/client .

   Common rendering engines → Blink(chrome, edge, brave) , webkit (safari) , Gecko(Firefox)

4. Networking Layer : This layer handles the communication part with the server , Like when user click on any url or searched for any url on the browser this network layer iniitate an HTTP request to the webserver to loas the requested website, it is also manages to fetch the content from HTML, CSS files or even images as well.

5. JavaScript Engine : browsers have inbuilt JavaScript engine which help them to understand and interpret JavaScript codes, these engines help to convert the javaScript codes into computer-understandable language.

   Common javaScript Engine → V8(chrome), chakra (Edge), spider Monkey(Firefox), JavaScript Core Webkit (Safari).

6. Data Storage → One part of the browser goes into stroring various types of data which includes user preferences like theme mode , browsing history, password and other personal informations.

7. UI Backend → this is responsible for providing the dynamic and interactive behaviour on the web page and enhance overall functionality and performance of the browser.

This is the high-level architecture of web browser which works together to display us a whole properly working website.

Browser Engine Vs Rendering Engine (high level) :

The Browser engine: marshals actions between the UI and the rendering engine.

The rendering engine: responsible for displaying requested content. For example if the requested content is HTML, the rendering engine parses HTML and CSS, and displays the parsed content on the screen.

HTML Parser & DOM

• HTML parser is used to parse the HTML content which is done by the rendering engine of the browser.

• DOM → stands for Document Object model, basically we can imagine collections of our HTML tags as a tree, because after parsing is done by the rendering engines we get Nodes and with the help of these Node , we are able to generate DOM tre

  

CSS Parser & CSSOM Tree

• During the parsing of HTML , rendering engine notices the Link tag which is fo CSS file and get the CSS file after that it also parses the CSS with CSS parser

• CSSOM → stands for CSS Object Model, it is a set of APIs that allowing manipulation of CSS from javaScript, it is similar to DOM, but for the CSS rather than HTML. It allows users to read and modify CSS style dynamically.

How DOM and CSSOM come together

(DOM)Document object model and CSSOM (CSS Object Model) come together to form the rendering tree, which is used by the browser to display the web page content to the screen of the user.

How this is done in following steps :

• DOM Construction → browser parse the HTML and constructs the DOM tree.

• CSSOM Construction → after the construction of the DOM tree , browser processes the CSS and build CSSOM tree.

• Render Tree Formation → the browser then combines the independent DOM ans CSSOM tree into a single render tree

• Layout (Reflow) → once the rendering tree is completed , the browser starts the layout process , this steps calculates the exact position and geometric size of each elements,

  here the conversion of the relative measurements into absolute pixels happens.

• Paint → Finally , the browser paints the individual nodes to the screen using the layout information to render the pixels and display the visual content to the user

Understanding Parsing Using Simple Maths Example

Parsing in browser is a process to convert the raw text into tree like structure that is understandable for browser , and by using this tree browser can perform rendering.

Example : 5 + 7 * 9 + 7

firstly tokenization(breaking into pieces) takes place :

• 5 → Number

• + → Operator

• 7 → Number

• * → Operator

• 9 → Number

• + → Operator

• 7 → Number

tree formation : this is how tree will looks like

Hope you enjoyed reading.

The Answer to this questions is No, we can’t just send the data on the network without rules , if we do then

• data will become just random bits , means suppose you have send something to you friend without any protocols then if the message is sent succefully , you friend will not able to understand from where the message starts, where it ends , Like receiving a long string of letters with no spaces, no punctuation, no language.

• without protocols sender doesn’t know wether it sends successfully or not, reciever can’t ask for missing data because again if reciever tries to ask for a missing data again without protocols some random data bit will gets generated and again the same issue will arise.

That’s why we need some rules (protocols) to send the data properly and here comes the concept of TCP.

What is TCP and why it is needed?

TCP(Transmission control protocol) is a protocol that allows devices to communicate reliably over a network, it ensures that data reaches the destination correctly and in right order, so that sender and reciever can make a reliable connection and able to send data to each other without worring about reliabliity. it also ensures that data reaches the destination correctly and in the right order , even if parts of network are slow or unreliable.

Problems it solves is

• Data Loss → it ensures that these is no data loss while traveling accross networks.

• Order of data → it ensures that data that send by the sender is recieved in the same order by reciever.

• Duplicate data → it ensures that no duplicate data sends in the network.

• Data corruption → Bits can be flipped during transmission, but TCP ensures that no bit is flipped using checkSum

What is the TCP 3-Way Handshake

TCP establishes a connection between a client and the server before sending any data, this is done using a process calles three-way handshake

1. SYNC (synchronize) → client sends a SYN segment to the server, and ask “hey, I want to make a connection“

2. SYNC-ACK (Synchronize-Acknowledge) → The server responds back to the client with a SYN-ACK segment and say “ok let’s make a connection“

3. ACK (Acknowledge) → The client replies with a ACK, saying “done. connection is established.“

This is how 3-way Handshake process takes place.

How data transfer works in TCP

1. 3-Way Handshake → Before sending any data TCP establishedd a connection between client and server for secure and reliable data transfer

2. Segmenting → When an application sends data (like an email) , TCP breaks that data into small chunks called segments. this makes it easier to send large amount of data over the network reliably.

   • Each segment has header containing information like sequence number, ports and flags

     

3. Routing via IP → once TCP creates segments of data they are handed to IP and IP is responsible for delievering the segments from the client to the server.

4. Acknowladgments (ACKs) → the reciever(client) sends an ACKs for every segment and this tells the sender that data has arrived safely , Suppose if ACKs is not revieved , TCP assumes that the segment was lost and triggers retransmission.

5. Retransmission → if sender doesnt recieve an acknowledgment within a certain time then it resends the missing segment, This ensures no data is lost making TCP reliable.

6. Flow & Error Control →

   • Flow Control : TCP prevents the sender from sending too much data too quickly for the server to handle.

   • Error Control : TCP checks for corrupt segment using checksums and request transmission if needed.

Together, these mechanisms ensure data is delivered reliably and efficiently, without overloading the network or the receiver.

How TCP connection is closed

For closing a TCP connection , we require a process call 4-way Handshake , to ensure that both sides finish transmitting data safely

1. FIN (Finish) → the client who want to close the connection send a FIN segment to the server.

2. ACK (Acknowledge) → the server acknowledges the FIN with an ACK.

3. FIN (Finish) from Server → the server then sends its own FIN segment when it is ready to close the connection.

4. ACK (Acknowledge) → the client responds with the ACK, finishing the termination.

This ensures that all the remaning data is securly transmittes before the connection is fully terminated.

Applications of TCP

1. File transfer : Transferring a file over a network is such a big task because it contains a large amount of data, TCP breakes the large files into small pieces and sends them one by one and then put them back into the correct order at the recievers end and resends any piece that gets lost .

2. Email : Sending email or revieving them requires that all the data must be complete and to the point that why TCP is used here.

3. Web Browsing : Websites sends or recieves data in chunks which is called packets , TCP ensures that all the packets arrives completely and in order that’s how pages of the webpage loads correctly without missing images or broken content.

• For example : it is same like when we opens the web page at that time also browser sends the request to the server and server sends back HTML, CSS , JS , images and all the data of that webpage and then we are able to access the website

What is cURL ?

cURL is basically a tool that let you talks to server directly using your terminal mean you dont have to go to the browser to send the request to server.

like very simple we simply have to tell cURL where we have to send the request and what kind of request it is and boom it shows you all the things that server replies back.

Why programmers need cURL

As a developer , specially when we are dealing with the backend side then we generaly don’t want to go to browser again and again or we always dont want a UI , frontend . What we want is to test some APIs , Debug server responses and check if a server is alive or not. that why when we use cURL , we can directly talk to server, test our APIs and what not that’s why programmers need cURL.

Our First cuRL request

let’s start with the demo how can we send the curl reques

curl https://chaicode.com

Like here you can see we have made a cURL request to the server of chaicode.com by using cURL and as a response we got the HTML page, and cURL printed whole response into our terminal that is how we can make request to the server, thing to notice it cURL don’t render the page or haven’t applied any CSS it only showd us raw data returned by the server.

Understanding request and response

1. Request → Sent’s by the client , which can be through browser or using cURL

   

   like in this example i have sent the request through my browser to ther server of chaicode.com,so this is how a request can be sent.

2. Response → Sent by the server , which is Data (HTML, CSS, JSON etc

   

   like we have sent the request to chaicode.com and as a response you can see we have got the landing page of the website.

Understanding HTTP Methods : GET and POST

1. GET request → GET itself is defining we are getting something , mean by using this method we are Asking for the data from the server , used while fetching data

   • NOTE : when we are sending request through cURL by default it is GET request.

Example :

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

2. POST request → it is used when we want to send data to the server , while using it we have to specify that we are using POST method like this

   Example :

    curl -X POST https://api.myapp.com/users
   

Using cURL to talk to APIs

For understanding the API request using cURL we are going to send the request to the github api and let see what type of response we are getting.

So, we have used curl https://github.com/users/Shubh-ujala and you can see we have got the JSON data which contains almost every information about my github account, this is how we can send the API request using cURL.

Common Mistakes with cURL

1. Expecting a webpage UI →As a beginner we can expect some UI as a response but what we get a raw data as a response.

2. Thinking cURL replaces browser → It doesn’t , it just tests communication , not user experience.

3. Using too many flags too early → this leads to memoriztion , not understanding.

• DNS acts as a phonebook of internet it translates the domain name into desired ip address. Once the browser gets the correct IP address from DNS, it can connect to the server and load the webpage

Why Name Resolution Exists?

• Just Imagine a scenario , if you want to make a phone call with your friend then will you remeber his/her 10-digits phone number or save his/hername ? most probably you should go with name right? DNS solves the same problem without it we have to remember that long ip addresses , basically it converts ip addresses to human friendly names which are easy to remember, this conversion from name is called name resolution.

What is dig command?

Before Understanding how DNS works internally, we need a way or a tool to see how DNS works, that where dig command comes in.

What is dig ?

dig → Domain Information Groper is a DNS inspection tool that allows you to ask questions from DNS servers directly, inspects DNS records and helps us to understand how DNS resolution works step by step

When dig is used?

dig is like an X-ray machine for DNS , it helps us while debugging DNS issues, learning how DNS works, verifying domain configurations and also while backend troubleshooting

Understanding DNS resolution layers

It works in following steps →

1. Root Name Server : dig . NS

    dig . NS
   

   here . represents DNS root , basically you are asking “who manages the top of DNS hirarchy?”

   In response from the root server you will get response like : “we don’t know every number but we know who manages .com , .org ,.in etc.“

   • Note → Root server don’t know IP address of the websites , it only know where TLD servers are

2. TLD (Top-Level Domain) : dig com NS

    dig com NS
   

   here we are asking who manages domain ending like .com ?

   In response we get like : “we don’t know about google.com ‘s IP but we know who is responsible form google.com “

   • Note → TLD servers handles domain categories (.com .org .net), and also they points you to authoritative name servers, they don’t store actual website IPs

3. Authoritative Name Servers :dig google.com NS

    dig google.com NS
   

   here we are asking “who is the final authority for google.com?”

   In response we will get, these servers are manager by domain owner, store the real DNS records, Are the source of truth

   • Note → NS (Name server) records tells us about, these servers are allowed for this domain , they enables control of the internet.

4. Full DNS resolution : dig google.com

    dig google.com
   

   this shows us the final result i.e IP address.

   Behind the scene it works like this

   

Importance of DNS for web developer →

• it helps us to debug production issues, design scalable system

• it also helps us to understand latency , configure domains properly

Importance of DNS in System design →

• it is used in Load balancers , CDNs

• it is also used in Microservices and

Conclusion :

NS is the system that makes the internet usable for humans by converting easy-to-remember domain names into IP addresses that machines understand. Behind a single browser request lies a well-structured resolution process involving root, TLD, and authoritative name servers. By using tools like dig, we can observe this hidden flow and better understand how browsers find servers on the internet.