What are the nested arrays

Nested arrays are simply arrays inside other arrays.

Example :

let numbers = [[1, 2], [3, 4], [5, 6]];

Here in this example, there are three arrays inside the one main array.

The outer array :

[[1, 2], [3, 4], [5, 6]]

The inner arrays :

[1, 2]
[3, 4]
[5, 6]

Why flattening arrays is useful

Flattening arrays means converting a nested array (arrays inside arrays) into a simple flat structure array. It sounds simple, but it solves a lot of practical problems.

Most array methods in JavaScript (map, filter, reduce) expect a flat structure.

Example :

let users = [
  { name: "A", posts: ["p1", "p2"] },
  { name: "B", posts: ["p3"] }
];

// In javascript we have flat function to flattern the array.
let allPosts = users.map(u => u.posts).flat();
// ["p1", "p2", "p3"]

Different approaches to flatten arrays

1. Array.prototype.flat()

The flat() method of Array instances creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

Example :

const arr1 = [0, 1, 2, [3, 4]];

console.log(arr1.flat());
// expected output: Array [0, 1, 2, 3, 4]

const arr2 = [0, 1, [2, [3, [4, 5]]]];

console.log(arr2.flat());
// expected output: Array [0, 1, 2, Array [3, Array [4, 5]]]

console.log(arr2.flat(2));
// expected output: Array [0, 1, 2, 3, Array [4, 5]]

console.log(arr2.flat(Infinity));
// expected output: Array [0, 1, 2, 3, 4, 5]

2. Using Recursion

Recursion involves a function calling itself to break down nested arrays until only primitive values remain. This method is readable but can cause stack overflow errors for extremely deep arrays.

function flattenRecursive(arr) {
  let result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flattenRecursive(arr[i]));
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}   

In this example, we are runningthe loop over the outer most array till its length. Inside that we are handling the array seperately. If on any index the strucutre is of type array again return the same function with the new nested array.

3.Iterative Approach (Stack)

An iterative approach uses a stack (last-in, first-out) to handle nesting without recursion, avoiding stack overflow issues. It processes elements by popping from the stack and pushing non-array items to the result.

function flattenIterative(arr) {
  const stack = [...arr];
  const result = [];
  while (stack.length > 0) {
    const item = stack.pop();
    if (Array.isArray(item)) {
      stack.push(...item); // Unwrap and push back
    } else {
      result.push(item);
    }
  }
  return result.reverse(); // Reverse to maintain original order
}   

That curiosity led me to Linux.

What makes Linux different is not just that it's popular among developers or widely used on servers, but that it exposes its inner workings in a surprisingly transparent way. Almost everything — from running processes to hardware devices — is represented through the filesystem.

In this article, I explore the Linux filesystem not as a collection of folders, but as a map of how the operating system functions internally. By investigating key directories, I discovered how Linux handles configuration, networking, processes, and system behavior — all through files.

Introduction to the Linux Filesystem

At its core, the Linux filesystem is a way of organizing data and files on a storage device. Unlike operating systems like Windows, Linux treats everything as a file—whether it's a directory, a hardware device, or even an active process. This unified approach simplifies interactions and makes the system highly flexible.

The Linux filesystem is hierarchical, meaning it has a root directory (/) from which all other files and directories branch out, forming a tree-like structure. This structure is consistent across all Linux distributions, making it easier to navigate and manage multiple systems.

Filesystem Hierarchy Standard (FHS)

The Filesystem Hierarchy Standard (FHS) defines the directory structure and directory contents in Linux systems. Adherence to FHS ensures that software behaves predictably across different Linux distributions.

The root directory (/) serves as the starting point of the filesystem. Key subdirectories include:

• /bin: Essential command binaries, like ls, cp, and mv.

• /boot: Bootloader files, including the kernel.

• /dev: Device files representing hardware components.

• /etc: Configuration files for the system.

• /home: User home directories.

• /lib: Essential shared libraries.

• /mnt: Temporary mount points for filesystems.

• /opt: Optional software packages.

• /proc: Virtual filesystem providing process and kernel information.

• /root: Home directory for the root user.

• /sbin: System binaries, typically for administrative tasks.

• /tmp: Temporary files.

• /usr: Secondary hierarchy for user programs and data.

• /var: Variable data files like logs, databases, and email.

Important Directories and Their Purposes

Each directory in the Linux filesystem has a specific role. Here’s a deeper look into some of the most critical directories:

• / (Root Directory): The starting point of the filesystem. All other directories and files branch off from here.

• /bin: Contains essential command binaries needed for the system to function in single-user mode. These are available to all users.

• /sbin: Similar to /bin, but contains system binaries that are typically used by the root user for administrative tasks.

• /lib: Contains shared libraries required by the binaries in /bin and /sbin.

• /usr: A secondary hierarchy that contains user programs, libraries, documentation, and more. It’s split into subdirectories like /usr/bin, /usr/sbin, and /usr/lib.

• /var: Stores variable data like logs, databases, and spools. This directory often grows in size over time.

• /etc: The nerve center for system configuration files. Nearly every service or application has a configuration file located here.

• /home: Contains personal directories for each user. This is where users store their personal files and directories.

• /proc: A virtual filesystem that provides an interface to kernel data structures. It’s used to access process information, kernel parameters, and more.

• /dev: Contains device files that represent hardware components. These files act as interfaces to the corresponding hardware.

File Permissions and Ownership

Linux employs a robust permissions system that controls access to files and directories. Each file has three sets of permissions for the owner, the group, and others:

• Read (r): Permission to read the contents of the file.

• Write (w): Permission to modify the file.

• Execute (x): Permission to execute the file as a program.

Permissions are represented by a combination of letters (r, w, x) or their corresponding octal numbers (4 for read, 2 for write, 1 for execute).

For example, the permission rwxr-xr-- means:

• Owner: Read, write, execute

• Group: Read, execute

• Others: Read only

Understanding and managing permissions is crucial for maintaining system security and ensuring that users have appropriate access levels.

Mounting and Unmounting Filesystems

Mounting is the process of making a filesystem accessible at a certain point in the directory tree. The mount point is typically an empty directory where the filesystem appears to reside.

• Mount Command: Used to attach a filesystem to a specified directory.

  mount /dev/sdb1 /mnt

• Unmount Command: Used to detach a filesystem from the directory tree.

  umount /mnt

Mounting is essential when working with removable media, network shares, or additional storage devices. Properly mounting and unmounting filesystems prevents data corruption and ensures system stability.

What are Objects ?

Objects in JavaScript are a fundamental data type used to store collections of key-value pairs and represent complex entities

Example information about a person:

Name → Rahul
Age → 22
City → Delhi

Instead of storing these values in separate variables, we can group them together inside an object.

Why Do We Need Objects?

Objects help us organize related data in a structured way.

// without object
let name = "Rahul";
let age = 22;
let city = "Delhi";

// with object
let person = {
  name: "Rahul",
  age: 22,
  city: "Delhi"
};

Creating an Object

Objects are created using curly braces {}. Inside the braces, we define key-value pairs.

Syntax

let objectName = {
  key: value
};

Accessing Object Properties

There are two ways to access object properties.

Dot Notation

This is the most common method.

let person = {
  name: "Rahul",
  age: 22,
  city: "Delhi"
};

console.log(person.name); // Rahul
console.log(person.age); // 22

Bracket Notation

Bracket notation uses square brackets.

console.log(person["city"]);

Updating Object Properties

Object values can be updated easily.

let person = {
  name: "Rahul",
  age: 22
};

person.age = 23;

console.log(person.age); // 23

Adding New Properties

We can add new properties to an object anytime.

let person = {
  name: "Rahul",
  age: 22
};

person.city = "Mumbai";

console.log(person); // { name: "Rahul", age: 22, city: "Mumbai" }

Deleting Properties

To remove a property, we use the delete keyword.

let person = {
  name: "Rahul",
  age: 22,
  city: "Delhi"
};

delete person.city;

console.log(person); // { name: "Rahul", age: 22 }

Looping Through Object Keys

We can loop through object properties using a for...in loop.

Example

let person = {
  name: "Rahul",
  age: 22,
  city: "Delhi"
};

for (let key in person) {
  console.log(key, person[key]);
} 
// Expected Output--
// name Rahul
// age 22
// city Delhi

Array vs Object

Arrays store ordered collections of values using numeric indices (starting from 0). They are ideal for lists where order matters, such as a sequence of numbers, strings, or objects.

Objects store data as key-value pairs, where keys are typically strings (or symbols) and values can be any data type. They are used to represent entities with properties, like a person, car, or configuration.

What Are Arrow Functions?

Arrow functions are a shorter and cleaner way to write functions in JavaScript. They were introduced in ES6 (ECMAScript 2015) to make function syntax simpler and more readable. Instead of using the function keyword, arrow functions use the arrow (=>) syntax.

Example -

// normal function expression. 
function add(a, b) {
  return a + b;
}

// arrow function expression
const add = (a, b) => {
  return a + b;
};

Both functions perform the same task, but the arrow function version is shorter and modern.

Arrow Function syntax

() => expression

param => expression

(param) => expression

(param1, paramN) => expression

() => {
  statements
}

param => {
  statements
}

(param1, paramN) => {
  statements
}

Converting function Expression to Arrow function

// Traditional anonymous function
(function (a) {
  return a + 100;
});

// 1. Remove the word "function" and place arrow between the argument and opening body brace
(a) => {
  return a + 100;
};

// 2. Remove the body braces and word "return" — the return is implied.
(a) => a + 100;

// 3. Remove the parameter parentheses
a => a + 100;

// Traditional anonymous function
(function (a, b) {
  return a + b + 100;
});

// Arrow function
(a, b) => a + b + 100;

const a = 4;
const b = 2;

// Traditional anonymous function (no parameters)
(function () {
  return a + b + 100;
});

// Arrow function (no parameters)
() => a + b + 100;

Implicit Return vs Explicit Return

When we use {}, we must use the return keyword.

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

// this same arrow function can be converted to something less.
// implicit return
const add = (a,b) => a + b;

Conclusion

What Are Operators?

JavaScript operators are symbols or keywords used to perform operations on values and variables. They are the building blocks of JavaScript expressions and can manipulate data in various ways.

Arithmetic Operators

Arithmetic operators perform mathematical calculations like addition, subtraction, multiplication, etc.

const sum = 5 + 3; // Addition
const diff = 10 - 2; // Subtraction
const p = 4 * 2; // Multiplication
const q = 8 / 2; // Division
console.log(sum, diff, p, q);

Assignment Operators

Assignment Operators are used to assign values to variables. They can also perform operations like addition or multiplication while assigning the value.

let n = 10;
n += 5;
n *= 2;
console.log(n);

+= is the short hand operator which adds and assigns the result to the variable.
-= is the short hand operator which subtracts and assigns the result to the variable.
and same for the rest like (*= , /+ etc.)

Comparison Operators

Comparison operators compare two values and return a boolean (true or false). They are useful for making decisions in conditional statements.

console.log(10 > 5);
console.log(10 === "10");

-- > checks if the left value is greater than the right.
-- === checks for strict equality (both type and value).
-- Other operators include <, <=, >=, and !==.

Logical Operators

Logical operators are mainly used to perform the logical operations that determine the equality or difference between the values.

const a = true, b = false;
console.log(a && b); // Logical AND
console.log(a || b); // Logical OR

-- && returns true if both operands are true.
-- || returns true if at least one operand is true.
-- ! negates the boolean value.

Bitwise Operators

Bitwise Operators perform operations on binary representations of numbers.

const res = 5 & 1; // Bitwise AND
console.log(res);

-- & performs a bitwise AND.
-- | performs a bitwise OR.
-- ^ performs a bitwise XOR.
-- ~ performs a bitwise NOT.

Difference between == and ===

== compares values after converting their types if needed.

=== compares both value and type.

console.log(5 == "5"); // true
// == does not check the types of the both operands, olny check the value

console.log(5 === "5"); // false
// === does check both the types and value of the operands

Conclusion

Operators are fundamental building blocks in JavaScript that allow us to perform calculations, compare values, and control program logic.

In this article, we explored several types of operators, including:

• Arithmetic operators for performing calculations

• Comparison operators for evaluating conditions

• Logical operators for combining conditions

• Assignment operators for storing and updating values

• BItwise operators for the binary-level operations

What is Control Flow?

Control flow refers to the order in which a program executes its instructions.

Normally, JavaScript executes code line by line from top to bottom. But in many situations, we need the program to make decisions and run different code based on conditions.

This is where control flow statements come into play.

Real-Life Example

Imagine deciding what to wear:

If it is raining → take an umbrella
Else → wear sunglasses

if statement

The if statement is used when we want to execute code only if a condition is true.

Syntax

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

Example

let age = 20;

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

if...else Statement

Sometimes we want to run one block of code if the condition is true and another block if it is false.

Syntax

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

let age = 16;

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

else if Ladder

When we need to check multiple conditions, we use else if.

Syntax

if (condition1) {
  // code
} else if (condition2) {
  // code
} else {
  // default code
}

let marks = 75;

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

switch Statement

The switch statement is used when we want to compare one value against multiple possible options.

Syntax

switch (expression) {
  case value1:
    // code
    break;

  case value2:
    // code
    break;

  default:
    // code
}

let day = 3;

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

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

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

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

break Statement

The break statement stops the switch execution.

Without break, JavaScript continues executing the next cases.

Example without break:

let day = 1;

switch (day) {
  case 1:
    console.log("Monday");

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

// without break
// o/p will be

// Monday
// Tuesday

When to Use switch vs if-else

Conclusion

Control flow is an essential part of programming because it allows our programs to make decisions based on conditions.

What is a Variable?

A variable is like a container used to store information.

Imagine you have a box labeled "Name". Inside that box, you store the value "Mukul".
Later, whenever you need the name, you simply check the box.

In JavaScript, variables work the same way. They store data that your program can use later.

let name = "Mukul";

Variables help us store, reuse, and update information in our programs. Without variables, we would need to write values repeatedly.

Declaring Variables in JavaScript

JavaScript provides three keywords to declare variables: var , let , and const.

var city = "Delhi";
let age = 22;
const country = "India";
// there is some difference between these keywords.

Primitive Data Types

Data types define what type of data a variable holds. JavaScript has several primitive data types.

1. String

The String object is used to represent and manipulate a sequence of characters. Strings are useful for holding data that can be represented in text form.

Example: names, messages, or sentences.

const string1 = "A string primitive";
const string2 = 'Also a string primitive';
const string3 = `Yet another string primitive`;

1. Number

Numbers represent numeric values. Numbers are most commonly expressed in literal forms like 255 or 3.14159.

let age = 25;
let price = 199.99;
// JavaScript uses one number type for both integers and decimals.

1. Boolean

A boolean represents either true or false. Booleans are often used in conditions and decision making.

let isStudent = true;
let isLoggedIn = false;

1. Null

null means the variable currently has no value assigned intentionally.

let selectedUser = null;

1. Undefined

undefined means the variable has been declared but not assigned a value.

let score;

console.log(score); // undefined

Difference between var, let, and const

var is globally scoped, can be redeclared and updated, and is hoisted with a default value of undefined. This can lead to unexpected behavior and bugs.

let is block-scoped (within {}), cannot be redeclared in the same scope, but can be updated. It is hoisted but remains in a "temporal dead zone" until declared, throwing a ReferenceError if accessed before initialization.

const is also block-scoped, cannot be redeclared or reassigned after initialization, and must be assigned a value at declaration. While the variable binding is immutable, properties of objects or elements of arrays declared with const can still be modified.

Note - Use const for values that should not change, let for values that will change, and avoid var in modern JavaScript due to its broader scope and hoisting quirks.

What is Scope? (Beginner Explanation)

Scope defines where a variable can be accessed in the code. Think of scope like rooms in a house.

If a variable is created inside a room, it can only be used inside that room.

What is Array?

The Array object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name.

• JavaScript arrays are resizable and can contain a mix of different data types.

• JavaScript array-copy operations create shallow copies. (All standard built-in copy operations with any JavaScript objects create shallow copies, rather than deep copies).

How to Create an Array

Creating an array is simple. We use square brackets [] and separate our items with commas.

JavaScript

// Creating an array of favorite fruits
let fruits = ["Apple", "Banana", "Cherry", "Mango"];

By using one variable (fruits), we’ve successfully grouped four pieces of information together.

Accessing array elements

Each element in an array has a position called an index. Array indexing starts from 0.

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

console.log(fruits[0]); // Apple
console.log(fruits[1]); // Banana
console.log(fruits[2]); // Cherry

Changing Array Values

You can modify any element using its index.

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

fruits[1] = "Mango";

console.log(fruits);
// ["Apple", "Mango", "Cherry"]

Finding Array Length

To find the total number of elements in an array, we use the length property.

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

console.log(fruits.length); // 3

Looping Over Arrays

The real power of arrays comes when you combine them with loops. Instead of writing console.log five times, you can use a for loop to go through the entire collection automatically.

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

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

Conclusion

At the end, with this article we can learn about the basics of array and can learn about how to acces the element from the array , about indexing and how to loop over the arrays.

Instead of writing the same code again and again, we create a function and call it whenever we need it.

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

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

In this example, we created the function add which accepts two parameters a and b and returns the sum of the two numbers which are given as the arguments.

Function Declaration

A Function Declaration defines a function using the function keyword with a name.

function functionName(parameters) {
  // code
}

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

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

Function Expression

A Function Expression stores a function inside a variable.

const variableName = function(parameters) {
  // code
}

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

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

Declaration vs Expression

// function declaration
function greet() {
  console.log("Hello");
}

// function expression
const greet = function() {
  console.log("Hello");
};

Both do the same job, but they behave differently during execution.

Hoisting (Simple Explanation)

Hoisting means JavaScript moves certain declarations to the top of the scope before execution.

// function declaration
sayHello();

function sayHello() {
  console.log("Hello!");
}
// this works fine because function declarations are hoisted.

// function expression
sayHello();

const sayHello = function() {
  console.log("Hello!");
};
// This throws an error because the variable sayHello is not initialized yet.

Conclusion

Both Function Declarations and Function Expressions allow us to define reusable logic in JavaScript.

The main difference lies in how JavaScript treats them during execution.

• Function declarations are hoisted

• Function expressions are not

What is Array?

The Array object, as with arrays in other programming languages, enables storing a collection of multiple items under a single variable name.

• JavaScript arrays are resizable and can contain a mix of different data types.

• JavaScript array-copy operations create shallow copies. (All standard built-in copy operations with any JavaScript objects create shallow copies, rather than deep copies).

1. Array.prototype.push()

The push() method of Array instances adds the specified elements to the end of an array and returns the new length of the array.

The push() method appends values to an array.

Array.prototype.unshift() has similar behavior to push(), but applied to the start of an array.

The push() method is a mutating method. It changes the length and the content of this.

2. Array.prototype.pop()

The pop() method of Array instances removes the last element from an array and returns that element. This method changes the length of the array.

If you call pop() on an empty array, it returns undefined.

Array.prototype.shift() has similar behavior to pop(), but applied to the first element in an array.

3. Array.prototype.shift()

The shift() method of Array instances removes the first element from an array and returns that removed element. This method changes the length of the array.

The shift() method shifts all values to the left by 1 and decrements the length by 1, resulting in the first element being removed.

4. Array.prototype.unshift()

The unshift() method of Array instances adds the specified elements to the beginning of an array and returns the new length of the array.

The unshift() method inserts the given values to the beginning of an array-like object.

5. Array.prototype.map()

The map() method of Array instances creates a new array populated with the results of calling a provided function on every element in the calling array.

It takes the callback function as the parameter . A function to execute for each element of the array and then the returned value is added as a single element in the new array.

The callback function can take three parameters -
1. element :- The current element being processed in the array.

2. index :- he index of the current element being processed in the array.

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

It returns the new array with each element being the result of the callback function.

6. Array.prototype.filter()

The filter() method creates a new array with all elements that pass the test implemented by a provided function. It does not modify the given array .

In the given example , we have the array named words with some strings in it. After that we use the filter function, which is the high order function which takes some other function as the input and returns the new array which satisfy the given condition.
Here in this example, all the string having the length > 6 will return true and stored in the new array which is return by the filter function after the loop completion.

7. Array.prototype.reduce()

The reduce() function in JavaScript is a higher-order method that iloop over an array to reduce it to a single value.

It applies a callback function to each element, using the return value from the previous iteration as the accumulator for the next. The final accumulated value is returned.

It takes two values as the parameter , callback fnc and the result initial value. With the help of the above example we can se that initialvalue of the accumulator is 10. The function loop over the array sum the accumulator and currentValue and finally return the final value.

8. Array.prototype.forEach()

The forEach() method of Array instances executes a provided function once for each array element.

Note : There is no way to stop or break a forEach() loop other than by throwing an exception. If you need such behavior, the forEach() method is the wrong tool.

Conclusion - With this article, we get to know about some of the important function to use with or loop over the array.

Refer the mdn docs for more depper explaination ablout these functions. This article is about to give the basic overview about these functions.

It retrieves web pages, displays text, images, and videos, and lets you interact with online content.

How do Browsers Work?

• You enter a website address (URL) or click a link.

• The browser sends a request to the website’s server.

• The server responds by sending the webpage’s data (HTML, CSS, JavaScript, images, etc.).

• The browser processes this data and displays the webpage.

• You can interact with the page by clicking, scrolling, or entering information.

Step 1: The process begins with Domain Name System (DNS) resolution, where the browser translates the domain name into an IP address to locate the server where the web page is stored.

Step 2: The browser then sends an HTTP request to the server, specifying the path and parameters of the requested resource.

Step 3: Once the server receives the request, it sends an HTTP response to the browser containing the requested resource in HTML, CSS, and JavaScript code.

Step 4: The browser’s rendering engine interprets and renders the code to display the web page on the user’s device.

Step 5: The CSS stylesheets are applied to format the web page’s content, including fonts, colors, and layout.

Step 6: The browser may also execute JavaScript code on the web page to add interactivity and dynamic behavior.

Step 7: As new content is loaded or changes are made to the web page, the browser updates the display accordingly.

Features of a Browser

Most browsers include standard features such as:

• A home button to return to a designated homepage

• An address bar to enter web URLs

• Back and forward buttons for page navigation

• A refresh button to reload pages

• Stop to halt page loading

• Tabs for multiple websites in one window

• Bookmarks for saving frequently visited sites

Many browsers support plug-ins to enhance functionality, like adding security features or new capabilities.

Components of a Browser

Web Browsers consist of 7 different components listed below:

1. User Interface

This component allows end-users to interact with all visual elements available on the web page. The visual elements include the address bar, home button, next button, and all other elements that fetch and display the web page requested by the end-user.

2. Browser Engine

It is a core component of every web browser. The browser engine functions as an intermediary or a bridge between the user interface and the rendering engine. It queries and handles the rendering engine as per the inputs received from the user interface.

The performance and features of a browser engine can greatly impact the user experience of a web browser. A fast and efficient browser engine can help web pages load quickly and smoothly, while a slower or less capable engine may struggle to render complex pages or provide a smooth browsing experience.

3. Rendering Engine

As the name suggests, this component is responsible for rendering a specific web page requested by the user on their screen. It interprets HTML and XML documents along with images that are styled or formatted using CSS, and a final layout is generated, which is displayed on the user interface.

Note: Every browser has its own unique rendering engine. Rendering engines might also differ for different browser versions. The list below mentions browser engines used by a few common browsers:

1. Google Chrome and Opera v.15+: Blink

2. Internet Explorer: Trident

3. Mozilla Firefox: Gecko

4. Chrome for iOS and Safari: WebKit

4. Networking

This component is responsible for managing network calls using standard protocols like HTTP or FTP. It also looks after security issues associated with internet communication.

5. JavaScript Interpreter

As the name suggests, it is responsible for parsing and executing the JavaScript code embedded in a website. Once the interpreted results are generated, they are forwarded to the rendering engine for display on the user interface.

6. UI Backend

This component uses the user interface methods of the underlying operating system. It is mainly used for drawing basic widgets (windows and combo boxes).

7. Data Storage/Persistence

It is a persistent layer. A web browser needs to store various types of data locally, for example, cookies. As a result, browsers must be compatible with data storage mechanisms such as WebSQL, IndexedDB, FileSystem, etc.

When users type a URL, click links, or utilize features, the front-end requests necessary resources from the back-end. The back-end processes these resources and sends the rendered content back to the front-end for display. This enables smooth navigation and interaction with online content.

Apart from these two major elements, here are the components of a browser.

• Used to select HTML elements based on tag name, class, id, or attributes

• Help apply styles like color, font, spacing, and layout

• Make web pages structured, consistent, and visually appealing

There are mainly 5 types of selectors.

1. Basic Selectors

Basic selectors in CSS are simple tools used for selecting by HTML element name (e.g., h1), class (.class Name), ID (#idName), or universally (* for all elements).

a). Universal Selector (*): Selects all elements on the page and applies the same style universally.

Example: Setting the font color for every element.

* {
    color: red;
}

b). Element Selector: Targets all elements of a specific type, such as paragraphs or headers.

Example: Setting a common font size for all paragraphs

p {
  font-size: 16px;
}

c). Class Selector (.): Applies styles to elements with a specific class attribute.

Example: Making all buttons have a blue background.

<html>
<head>
    <style>
        .button {
            background-color: blue;
            color: white;
        }
    </style>
</head>
<body>
    <button class="button">Click Me!</button>
</body>
</html>

d). ID Selector (#): Styles a single element identified by its unique id.

Example: changing the background color of a header.

<html>
<head>
    <style>
        #header {
            background-color: gray;
        }
    </style>
</head>
<body>
    <div id="header">This is the header section.</div>
</body>
</html>

2. Combinator Selectors

Used to define relationships between selectors, allowing you to style elements based on their hierarchy or positioning in the document. Common combinators include descendant ( ), child (>), adjacent sibling (+), and general sibling (~).

a). Descendant Selectors: Targets an element inside another, such as paragraphs inside div .

Example: Styling paragraphs inside a div.

<html>
<head>
    <style>
        div p {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>This paragraph inside a div will be red.</p>
    </div>
</body>
</html>

b). Child Selector (>): They only affects the direct child elements of a parent.

Example: Styling direct children paragraphs of a div.

<html>
<head>
    <style>
        div>p {
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div>
        <p>This is a direct child and has a left margin.</p>
        <div>
            <p>This is not a direct child.</p>
        </div>
    </div>
</body>
</html>

Problems TCP is designed to solve

Without TCP, applications would need to handle these problems themselves:

• Packet loss.

• Out-of-order delivery.

• Data Corruption.

• Network Congestion

• Flow control.

TCP 3-way Handshake Process

Communication over the internet follows the TCP/IP model. Applications like web browsers use the Application Layer, and their data is passed to the Transport Layer, where TCP and UDP work.

• TCP is widely used because it provides reliable communication.

• UDP is faster but unreliable (e.g., used in DNS lookups).

• Step 1 (SYN): In the first step, the client wants to establish a connection with a server, so it sends a segment with SYN(Synchronize Sequence Number) which informs the server that the client is likely to start communication and with what sequence number it starts segments with

• Step 2 (SYN + ACK): Server responds to the client request with SYN-ACK signal bits set. Acknowledgement(ACK) signifies the response of the segment it received and SYN signifies with what sequence number it is likely to start the segments with

• Step 3 (ACK): In the final part client acknowledges the response of the server and they both establish a reliable connection with which they will start the actual data transfer.

How data transfer works in TCP

Segmenting

• When an application sends data (like an email or file), TCP breaks the data into smaller chunks called segments.

• Each segment has a header containing information like sequence numbers, ports, and flags.

• This makes it easier to send large amounts of data over the network reliably.

Routing via IP

• Once TCP creates segments, they are handed to IP (Internet Protocol).

• IP is responsible for delivering the segments from the sender to the receiver, possibly through multiple routers.

• TCP doesn’t care about the path—IP handles routing and addressing.

Reassembly at Receiver

• Segments may arrive out of order because they can take different paths through the network.

• TCP at the receiver uses sequence numbers to reassemble the segments into the correct order to reconstruct the original message.

Retransmission

• If the sender does not receive an acknowledgment within a certain time, it resends the missing segment.

• This ensures no data is lost, making TCP reliable.

and lot more..

How TCP Ensures Reliability, Order, and Correctness

• Retransmission
  TCP retransmits the missing segment if an ACK is not received in time

• Order (Sequence Numbers)
  Every byte has a sequence number. Receiver get Buffers out-of-order segments and reassembles data correctly.

How a TCP Connection Is Closed

TCP connection termination is the process of closing an established TCP connection between two devices in an orderly way. It uses a four-step handshake (FIN-ACK exchange) to ensure that both sides have finished sending and receiving all data before the connection is fully closed.

Types of TCP Connection Release

TCP supports two types of connection releases like most connection-oriented transport protocols:

1. Abrupt connection release: In an Abrupt connection release, either one TCP entity is forced to close the connection or one user closes both directions of data transfer.

2. Graceful connection release: In the Graceful connection release, the connection is open until both parties have closed their sides of the connection.

TCP is the protocol that turns an unreliable network into a reliable communication channel by using connections, acknowledgments, retransmissions, and flow control.

When two or more computers need to communicate with each other, they form a network.
But computers don’t connect and talk by magic — they need network devices to help them send, receive, and manage data.

Network devices act like traffic controllers of a network.

What is a Modem and how it connects your network to the internet?

Modem stands for Modulator/Demodulator. The modem is a networking device that is used to connect devices connected in the network to the internet.

The main function of a modem is to convert the analog signals that come from telephone wire into a digital form. In digital form, these converted signals are stored in the form of 0s and 1s. The modem can perform both the task of modulation and demodulation simultaneously.

What is a Router and how it directs traffic?

A router is a networking device that forwards data packets between different computer networks. It connects multiple packet-switched networks or subnetworks, managing traffic by directing packets to their intended IP addresses. Routers allow multiple devices to share an Internet connection efficiently.

Routers determine the path for a packet by examining its destination IP address and consulting the routing table, which contains information on network paths. They use a set of rules to identify the most efficient route for each packet.

• Static routing: Configured manually, suitable for small or stable networks.

• Dynamic routing: Automatically updated based on network activity, ideal for large or changing networks.

Switch vs Hub: how local networks actually work?

Hub

Let’s say Host A sends data to Host C. When the hub receives this data, it doesn’t know who the actual destination is. So it simply broadcasts the data to every port, except the one it received the data from.

Switch

Switch is a network device which is used to enable the connection establishment and connection termination on the basis of need. Switch is operated on Data link layer. In this packet filtering is available. It is type of full duplex transmission mode and it is also called efficient bridge.

Difference between Hub and Switch

What is a Firewall and why security lives here?

A firewall is a security device (or software) that sits between your internal network and the outside world (internet) and controls what traffic is allowed to pass.

Every time data tries to enter or leave your network, the firewall checks it against a set of security rules.

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

A load balancer is a networking device or software application that distributes and balances the incoming traffic among the servers to provide high availability, efficient utilization of servers and high performance.

• Ensures that no single server bears too many requests, which helps improve the performance, reliability and availability of applications.

• Highly used in cloud computing domains, data centers and large-scale web applications where traffic flow needs to be managed.

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

In a real-world network, these devices work together in a simple pipeline. A switch connects devices within the same local network and forwards data efficiently using MAC addresses. When traffic needs to reach another network or the internet, a router forwards packets based on IP addresses, usually performing NAT (Network Address Translation). A firewall enforces security rules, allowing or blocking traffic. The modem converts digital data into signals suitable for the ISP’s network. On the server side, a load balancer receives incoming requests and distributes them across multiple backend servers to improve performance and availability. Together, they provide connectivity, security, and scalability.

Emmet has made HTML and CSS superfast.

You have to type a expression then it converts it into a proper code.

Even if you want design a small webpage you have to type multiple line that too results in several typing mistakes.

HTML without Emmet

Before emmet, developers typed each and every tag by hand which was time consuming.

They had type opening and closing tags, also they would have to remember correct nesting, had multiple typing errors.

Why Emmet is useful for HTML beginners?

As given above, emmet helps to save time, increase productivity, don’t need to type repetitive tags. As a beginner they can forget proper nesting, or to close tags. Therefore, it is very useful for beginner emmet will take care of above things and beginners can focus on learning concepts.

How emmet works inside code editors?

Code editors that support Emmet are:

1.VS Code (Visual Studio code)- Emmet is built-in by default

2.Sublime Text - It supports Emmet through plugin (you have install Emmet package).

3.Atom - Emmet is built-in by default

4.Notepad++ (Emmet via plugin)

As we have seen in the beginning of this blog, you do not need to type entire code, you can use shortcuts. When you type an Emmet abbreviation, press Tab or Enter, emmet converts it into HTML code.

Basic Emmet Syntax and abbreviations:

When you type p emmet converts it to <p></p>

<p></p>

When you type div

<div></div>

Observe the below table

When you type div>p

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

Type h1+p

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

To repeat elements

li*4

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

To add a class

type div.box

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

To add an id

type section#main

<section id="main"></section>

To add attributes

img[src=”logo.png” alt=”logo”]

<img src="logo.png" alt="logo">

Nesting in Emmet

let us type, div>ul>li*2

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

When you use ‘! ‘ in html file, you get whole template.

Conclusion

Therefore, we can say that Emmet saves time, instead of typing tags again and again we can use emmet abbreviations. It makes HTML easy for beginners. It improves productivity.

HTML stand for Hyper Text Markup Language.

HTML (HyperText Markup Language) is the standard language used to create and structure web pages. It uses tags and elements to define headings, paragraphs, images, links, and other components that browsers display on the screen.

HTML is platform-independent and runs on all browsers.

Why we use HTML

HTML is used to create structure of a web page.

Learning HTML is essential because it forms the foundation of every website and is the first step toward becoming a web developer.

CSS make website look good
JavaScript make website interactive
But HTML is the skeleton of the web page.

What an HTML tag is

HTML tag is a special keyword written inside angle brackets < >.

Tag tell browser what kind of content it is.

Example:

<p>
<h1>
<img>

Each tag have its own work.

<p> tell this is a paragraph
<h1> tell this is a heading
<img> tell this is an image

Opening tag, closing tag, and content

Most HTML tags have opening tag and closing tag.

Example:

<p>Hello World</p>

<p> → opening tag
</p> → closing tag
Hello World → content

What an HTML element means

HTML element is full structure together.

Opening tag + content + closing tag = HTML element

Example:

<h1>Welcome</h1>

This whole line is one HTML element.

Element tell browser:

• what type of content

• and what content it is

Self-closing (void) elements

Some HTML tags don’t have closing tag.

These are called self-closing or void elements.

Example:

<img>
<br>
<input>

These tags don’t wrap content.
They just perform one action.

<img> show image
<br> break line
<input> take input from user

Block-level vs inline elements

Block-level elements

Block elements always start from new line.
They take full width of page.

Example:

<div>
<p>
<h1>

If you use block element, next content go to next line.

Inline elements

Inline elements stay in same line.
They take only required space.

Example:

<span>
<a>
<strong>

Inline elements are mostly used inside block elements.

Commonly used HTML tags

Some HTML tags are used in almost every website.

Structure tags

<html>
<head>
<body>

Text tags

<h1> to <h6>
<p>
<span>

Media and link

<img>
<a>

Form tags

<input>
<button>

These tags help browser understand what content is text, image, link, or input.

In the conclusion

HTML is the foundation of web development.

It give structure to website.
It tell browser how to display content.

Without HTML, web page can’t exist.

HTML is first step for every web developer.