DEV Community: Raj

closure

Raj — Tue, 06 Oct 2026 05:54:56 +0000

when learned about closure,it felt a little confusing .but once we understand

a closure happens when an inner function remembers and uses variable from its outer function even after the outer function has finished

example

function outer() {
let name = "raj";
function inner (){
console.log(name);
}
return inner ;
}
let result = outer();
result();

 //raj

why can result () still access name?

because the inner() function remember the name variable from outer().that memory is called closure.

easy is remebered betwwen each fuction call.
colsure a function that remebers the variables from its outer scope

Callback Function

Raj — Fri, 25 Sep 2026 12:57:31 +0000

What is a Callback Function?

A callback function is a function that we pass as an argument to another function so that the receiving function can call it when it needs to.
In other words one function can receive another function and decide when that function should be executed.

Example:

function greet() {
console.log("hello"):
}

function welcome(callback) {
callback();
}

welcome(greet);

Here "greet" is passed to "welcome()" as an argument.

welcome(greet);

Inside the "welcome()" function we receive it through the "callback" parameter:

function welcome(callback) {
callback();
}

When we write:

callback();

JavaScript executes the "greet()" function.

Why Do We Use Callback Functions?

The main reason we use a callback is that we don't always want to decide inside a function what should happen next.

Instead, we can give the function another function and say:

After you finish your work call this function.

For example one function can perform some work and after that work is completed it can call the function that was passed to it.
This makes the code more flexible because we can change the function we pass as the callback without changing the main function.

What Happens When We Pass an Argument?

When we do:

welcome(greet);

the "greet" function is passed into the "callback" parameter.

So we can think of it like this:

welcome(greet)
↓
callback = greet
↓
callback()
↓
greet()

Finally "greet()" gets executed.

What Happens If We Don't Pass the Callback?

If the function expects a callback:

function welcome(callback) {
callback();
}

but we call it like this:

welcome();

then there is no function inside "callback".

So when JavaScript reaches:

callback();

it cannot execute it because "callback" is "undefined".

That results in an error.

What About 2, 3, 4 or 5 Functions?

The number of functions does not decide whether an argument is required.
Even with just two functions if one function is passed to another function we use an argument:

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

function welcome(callback) {
callback();
}

welcome(greet);

Here "greet" is the callback and it is passed as an argument.
The same idea can continue with 3, 4, 5, or more functions.

For example:

Function 1
↓
passes Function 2
↓
Function 2
↓
passes Function 3
↓
Function 3
↓
passes Function 4
↓
Function 4

In this kind of chain, each function that needs to receive the next function has to receive it somehow — commonly as an argument.

So the important rule is not:

"More functions = callback argument."

The actual rule is:

When one function is passed into another function the passed function is the callback.

What is React

Raj — Thu, 24 Sep 2026 14:12:43 +0000

Bootstrap vs React: What’s the Difference?

When I first learned about Bootstrap and React I thought they were almost the same because both of them are called libraries. But actually they are used for different purposes.

What is a Library?

A library is basically a collection of code that is already written by someone else and made available for us to use.
Instead of writing everything from the beginning we can use the code provided by the library in our own project.

For example

Bootstrap already has styles for buttons, cards, forms, navigation bars and many other UI elements. So we don't have to create all those styles ourselves.

What is Bootstrap?

Bootstrap is mainly a CSS and UI library.

We normally create our webpage using HTML and then use Bootstrap classes to make the page look better and responsive.

Example:

Click Me

"btn" and "btn-primary" are Bootstrap classes.

Bootstrap already provides the styling for these classes so we don't need to write all the CSS for this button ourselves.
Bootstrap mainly helps us with the design and styling of a website.

What is React?

React is a JavaScript library for building user interfaces.
React is different from Bootstrap because React is not mainly used for styling.
React helps us build the UI using reusable components.

Example:

function Welcome() {
return

Hello World

;
}

At first "

" looks like normal HTML But inside React we use a syntax called JSX.
JSX looks similar to HTML but it works with JavaScript and React.
This makes it easier to create and manage different parts of a web application as reusable components.

why React use HTML and CSS?

When working with React we still use things that we already know from web development such as HTML like JSX and CSS.

example:

function Button() {
return (

Click Me

);
}

Then we can write CSS for that button:

.my-button {
background: blue;
color: white;
}

So React does not mean that we stop using HTML and CSS.

Instead React gives us a different way to build the UI using JavaScript, JSX and reusable components.

JavaScript Function

Raj — Fri, 11 Sep 2026 05:16:44 +0000

A function is a block of code that we create to perform a particular task.

Instead of writing the same code again and again we can write it once inside a function and call the function whenever we need it.

Example

javascript
function greet() {
console.log("Hello Raj");
}

greet();

How it works

function greet()
↓
Function is created
↓
Code is written inside {}
↓
greet()
↓
Function is called
↓
"Hello Raj" is printed

Why do we use functions?

Functions help us to:

Reuse code
Avoid writing the same code again
Keep code clean and organized
Make programs easier to understand
Perform a specific task whenever needed

Function with Parameters

We can also send information to a function.

javascript
function greet(name) {
console.log("Hello " + name);
}

greet("Raj");
greet("Kumar");

Output:

Hello Raj
Hello Kumar

Herename is called a parameter.

The value "Raj" is called an argument.

**
Function with Return**

A function can also return a value.

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

let result = add(10, 20);

console.log(result);

Output:

Here return sends the result back from the function.

CSS :root Selector

Raj — Tue, 08 Sep 2026 05:25:46 +0000

What is :root?
:root in CSS. At first I was confused about why we use :root instead of simply writing CSS normally.

In :root represents the main element of a webpage. It is commonly used to store CSS variables that we want to use throughout our website.

Why do we use :root?

The main reason is to keep our commonly used values in one place.

Example

instead of writing the same colors again and again, we can create a variable:

:root {
--bg-main: #ffffff;
--text-main: #1a1a1a;
--accent: #6200ee;
}

Then we can use those variables anywhere in our CSS:

body {
background-color: var(--bg-main);
color: var(--text-main);
}

button {
background-color: var(--accent);
}

How does it work?

The :root section stores the values.

The --bg-main, --text-main and --accent names are CSS variables.

When we use var(--accent), CSS takes the value stored inside --accent.

So the basic flow is:

:root → Store values → var() → Use values

Example

This becomes especially useful when creating a website with different color.

For example, we can have one set of variables for a colors and another set for a colors.

:root {
--bg-main: white;
--text-main: black;
--accent: purple;
}

Later we can change these values for a colors.

This makes our CSS easier to manage because we don't have to change every element individually.

JavaScript vs TypeScript What’s the Difference?

Raj — Wed, 02 Sep 2026 05:58:42 +0000

JavaScript and TypeScript are both widely used in web development and they are closely related. The main difference is how they handle data types and errors.

What is JavaScript?

JavaScript is a dynamically typed programming language. We don't need to specify the type of a variable when declaring it. JavaScript is flexible and can run directly in web browsers, which makes it popular for building interactive websites and web applications.

What is TypeScript?

TypeScript is a superset of JavaScript developed by Microsoft. It adds static typing, which allows developers to specify whether a variable should be a number, string, boolean, or another type. This helps developers find errors earlier while writing the code.

example in JavaScript:

let age = 25;
age = "vijay";

This is allowed because JavaScript is flexible with variable types.

In TypeScript:

let age: number = 25;
age = "vijay"; // Error

Here, TypeScript gives an error because age is defined as a number.

Another important difference is that JavaScript can run directly in the browser, while TypeScript needs to be converted into JavaScript before it can run.

In simple terms, JavaScript provides flexibility while TypeScript adds more structure and type safety. JavaScript is often a good starting point for beginners while TypeScript is especially useful for larger and more complex applications where maintaining clean and reliable code is important.

Why Do Developers Use TypeScript?

One major reason developers use TypeScript is to reduce mistakes in large applications.

Imagine a project has thousands of lines of code and many developers are working on it. Without clear information about what type of data a function expects it can become difficult to understand and maintain the code.

TypeScript can make the code easier to understand by clearly defining the expected types.

example:

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

Here we can immediately understand that:

a should be a number.
b should be a number.
The function returns a number.

This can make large projects easier to maintain.

Why do we Convert String to Number and Number to String in a Calculator?

Raj — Fri, 28 Aug 2026 04:52:01 +0000

In calculator we use:

const input = document.getElementById("display");

Here display is the input element where the calculator values are shown.

1. Why do we use String for user input?

When the user clicks number buttons we need to join the digits together.

For example:

currentValue += value;

If the user clicks:

5 → 0

We need:

"5" + "0" = "50"

So, we keep the entered value as a String.

This makes it easy to enter multiple digits like:

5 → 0 → 2

Result:

"502"

2. Why do we convert String to Number?

When we perform a calculation JavaScript must treat the values as numbers.

For example:

"50" + "2"

Since both are Strings JavaScript joins them together:

"502"

But we actually want:

50 + 2 = 52

Therefore before calculation we convert the String into a Number:

const leftOperand = Number(previousValue);
const rightOperand = Number(currentValue);

Now:

Number("50") → 50
Number("2") → 2

So JavaScript can perform the actual mathematical calculation:

50 + 2 = 52

Why do we convert Number back to String? **

After calculation the result is a Number.

For example:

currentValue = leftOperand + rightOperand;

The result is:

This is a Number.

We convert it back to String using:

currentValue = currentValue.toString();

Now:

52 → "52"

We do this because our currentValue is used again for handling the calculator's displayed/input value.

Simple Flow

We use String while entering digits convert String to Number when performing calculations and convert the result back to String so it can continue to be handled as the calculator's input/display value.

JavaScript Control Flow Statements

Raj — Thu, 27 Aug 2026 04:23:34 +0000

Control flow statements in JavaScript control the order in which code is executed. These statements allow you to make decisions, repeat tasks, and jump between parts of a program based on specific conditions.
JavaScript if Statement

The if statement executes a block of code only if a specified condition is true.
if_statement

const age = 18;

if (age >= 18) {

console.log("You are an adult.");

}

Checks if age is greater than or equal to 18.
Logs "You are an adult." if the condition is true.

JavaScript if...else Statement

The if...else statement provides an alternate block of code to execute if the condition is false.
if_else_statement

const score = 40;

if (score >= 50) {

console.log("You passed.");

} else {

console.log("You failed.");

}

It will log "You passed." if the score is 50 or more.
Otherwise, logs "You failed."

JavaScript if...else if...else Statement

The if...else if...else statement is used when you want to handle multiple conditions.
if_else_if_else_statement

const temp = 25;

if (temp > 30) {

console.log("It's hot.");

} else if (temp >= 20) {

console.log("It's warm.");

} else {

console.log("It's cold.");

}

Checks if the temperature is greater than 30, logs "It's hot."
If not, checks if it's between 20 and 30, logs "It's warm."
Otherwise, logs "It's cold."

JavaScript Switch Statement

The switch statement evaluates an expression and executes a block of code based on matching cases. It provides an alternative to long if-else chain.
switch_statement

const day = "Monday";

switch (day) {

case "Monday":

    console.log("Start of the week.");

    break;

case "Friday":

    console.log("End of the workweek.");

    break;

default:

    console.log("It's a regular day.");

}

Checks the value of day and matches it to a case.
Logs "Start of the week." if day is "Monday".
Logs "End of the workweek." if day is "Friday".
Logs "It's a regular day." if no cases match.

Note: Without break, execution continues to the next case statements (fall-through behavior).

JavaScript Looping Statements

Looping statements are used to execute a block of code repeatedly based on a condition.
1. JavaScript for Loop

The for loop is used when the number of iterations is known.

for (let i = 1; i <= 3; i++) {

console.log(i);

}

Initializes a counter, checks condition, and updates it in each iteration.
Executes the block until the condition becomes false.

2. JavaScript while Loop

The while loop runs as long as the condition is true.

let i = 1;

while (i <= 3) {

console.log(i);

i++;

}

Checks the condition before each iteration.
Executes the block only if the condition is true.

3. JavaScript do...while Loop

The do...while loop executes the block at least once, even if the condition is false.

let i = 1;

do {

console.log(i);

i++;

} while (i <= 3);

Executes the block first, then checks the condition.
Ensures at least one execution.

Ternary Operator or Conditional Operator

In some programming languages, a ternary operator is used to assign a value to a variable based on a condition.
ternary_operator_or_conditional_operator

let a = 10;

console.log(a === 5 ? "a is equal to 5" : "a is not equal to 5");

let a = 10; assigns the value 10 to variable a.
a === 5 ? ... : ... checks if a is strictly equal to 5.
Returns "a is equal to 5" if true.
Returns "a is not equal to 5" if false.

Uses of Control Flow Statements

Control flow statements are backbone in programming for

Decision-Making: To execute specific blocks of code based on conditions (e.g., if, if...else).
Branching: To exit loops or skip iterations (break, continue).
Looping: To repeat tasks (for, while, do...while).
Switching: To handle multiple conditions effectively (switch).

Bug Life Cycle

Raj — Wed, 26 Aug 2026 03:40:43 +0000

ref :BrowserStack

1. New

The tester finds the problem and creates a bug report.

Example:

"Login button is not working after entering valid username and password."

At this stage the bug status is New.

2. Assigned

The testing lead or QA manager assigns the bug to a developer.

Now the developer is responsible for checking and fixing the problem.

3. Open / Active

The developer starts investigating the bug.

The developer checks:

What is causing the problem?
Can the problem be reproduced?
Which code is causing it?
How can it be fixed?

If the developer believes it is not actually a bug it can instead be marked Rejected Duplicate Deferred or Not a Bug.

4. Fixed

The developer finds the problem and changes the code to fix it.

After fixing it the developer sends the updated application back to the tester.

5. Retest

Now the tester tests the same login problem again.

For example:

Enter username → Enter password → Click Login.

If Login works correctly the tester considers the fix successful.

If Login still doesn't work the bug can be reopened and sent back to the developer.

6. Verified

When the tester confirms that the bug has been successfully fixed the fix is verified.

7. Closed

Finally the tester closes the bug when no further work is required and the problem has been successfully resolved.

Other Bug Statuses

There are also some additional statuses that can happen during the process:

Rejected:
The developer believes the reported issue is not a valid bug.

Duplicate:
The same problem has already been reported in another bug.

Deferred:
The bug is valid but it is low priority so the team decides to fix it in a future release.

Not a Bug:
The reported behavior is actually expected behavior or does not affect the application's functionality.

Easy Flow to Remember

simple example

Bug Life Cycle is the journey of a bug from the time the tester finds it until it is fixed and closed. First the tester reports the bug as New. Then it is Assigned to a developer. The developer investigates it and changes the status to Open. After fixing the problem, it becomes Fixed. The tester then Retests the bug. If the fix works the bug is Verified and Closed. If the problem still exists the bug is Reopened and sent back to the developer.

A Small CSS Mistake That Made Me Waste Time

Raj — Tue, 25 Aug 2026 04:30:57 +0000

Yesterday, I noticed that my background color was not covering the full width.

At first, I was checking the width, padding, margin, and even thinking about adding a border.

Normally, we can use the universal selector * for the basic CSS reset.
In my particular case, I noticed the problem and fixed the body specifically.

So readers should understand both approaches, instead of thinking body { margin: 0; } is the only correct method.

Then I realized the actual problem was the browser's default margin on the body.

In my case
I fixed it by adding:
html,
body {
margin: 0;
padding: 0;
}

After that, my background color covered the full width.
But normally...When starting a new HTML/CSS project, I usually prefer to set the basic reset using the universal selector:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

This resets the default margin and padding for all elements.
So, my case was specifically about the body margin, but as a general project setup, you can use the universal selector to reset the default spacing.

when the real problem is just 8px of default body margin

What difference between java and javascript

Raj — Mon, 24 Aug 2026 15:49:29 +0000

Java and JavaScript are two different programming languages. The names are similar but they are not the same language.

example

Imagine a website like YouTube:

HTML → Creates the structure: buttons, videos, search box.
CSS → Makes it beautiful: colors, size, alignment.
JavaScript → Makes things work: when you click a button, open a menu, search something, play & pause, etc.
Java → Could be used on the server and backend for large applications and business logic.

One important point
For example:

JavaScript → Web interactivity.
Java → Backend / Applications.

OOP Paradigm

The Object-Oriented Programming (OOP) paradigm organizes software design around data (objects) rather than functions and logic.

Prototype

Prototype-based object-oriented programming is a distinct style of object-oriented programming (OOP) where objects inherit behaviors directly from other existing objects (prototypes) instead of from classes.

HTML & CSS Mock Interview Questions & Answers Part 3

Raj — Fri, 21 Aug 2026 05:54:40 +0000

21. What is the tag?

The tag, or anchor element, is the fundamental HTML element used to create hyperlinks that connect web pages, documents, files, and external web locations together. It allows users to jump across the web by clicking text, buttons, or images wrapped inside the anchor tag. Anchors require the href attribute to specify the destination URL, page fragment, email address (mailto:), or telephone number (tel:). Beyond basic navigation, anchors support accessibility and performance parameters such as rel="noopener noreferrer" and downloading triggers using download.

22. What is the href attribute?

The href (Hypertext Reference) attribute is the critical property required on anchor tags () that specifies the target URL destination of the link. Without an href attribute, an tag functions merely as a placeholder anchor rather than an active clickable hyperlink. The value of href can be an absolute web address (https://...), a relative local path (/about.html), a page section ID anchor (#section-id), or a protocol link (mailto: or tel:). It tells the browser exactly where to route the user when the element is clicked.

23. How do you open a link in a new tab?

You open a link in a new tab by adding the target="_blank" attribute to the anchor () tag. Whenever a user clicks a link configured with target="_blank", the browser opens the destination URL in a brand-new tab or window instead of replacing the current page. For security and performance reasons, you should always combine target="_blank" with rel="noopener noreferrer". This prevents the newly opened external page from accessing your origin page's window.opener object, protecting your website from potential tab-nabbing security vulnerability attacks.

24. What is the tag?

The tag is a self-closing void element used to embed raster or vector graphics directly into an HTML page document. Rather than inserting image pixels directly into the code, it creates an inline visual frame that fetches and renders the visual asset from an external path. It requires the mandatory src attribute to locate the image and an alt attribute to provide alternative text for accessibility. Modern tags also support high-resolution responsive switching using srcset and performance optimizations like loading="lazy".

25. What is the purpose of the src attribute?

The src (source) attribute defines the exact file path or URL location of the media asset that an , , <iframe>, or <audio>/<video> element should fetch and render. If the path provided in the src attribute is broken, invalid, or blocked by CORS security policies, the browser will fail to display the asset and fall back to alternative content. The src path can be an absolute web address pointing to an external domain or a relative file directory path pointing to your local web server storage.

26. What is the purpose of the alt attribute?

The alt (alternative text) attribute provides a plain-text description of an image for accessibility, performance, and SEO purposes. If an image fails to load due to a poor network connection or broken src path, the browser displays the alt text in place of the image. More importantly, screen readers read the alt attribute aloud to visually impaired users, allowing them to comprehend the visual content. Including descriptive alt text also helps search engine crawlers index your image content for relevant web search queries.

27. What is the difference between an absolute URL and a relative URL?

An absolute URL specifies the complete, full web address of a resource, including the protocol, domain name, and file path (e.g., <a href="https://example.com/images/logo.png">https://example.com/images/logo.png</a>). A relative URL, on the other hand, specifies a path relative to the current working document's directory without including protocol or domain names (e.g., ../images/logo.png). Absolute URLs are used when linking to external websites across different servers, while relative URLs are preferred for linking internal pages within the same website because they remain functional regardless of domain or hosting changes.

28. What is an HTML list?

An HTML list is a structured set of tags used to group related items together in an organized, readable list format. HTML provides three primary types of lists: Unordered Lists (<ul>) for bulleted items, Ordered Lists (<ol>) for numbered/sequential items, and Description Lists (<dl>) for key-value terms and definitions. Each list container holds individual list items defined by <li> tags (or <dt>/<dd> tags for description lists). HTML lists help organize content logically, improve visual scannability, and provide structured semantic trees for screen readers.

29. What is the difference between <ul> and <ol>?

The key difference between <ul> and <ol> lies in the semantic order and default styling of their list items. A <ul> (Unordered List) is used when the chronological order of items does not matter, and browsers display bullet points by default. An <ol> (Ordered List) is used when sequence, step-by-step priority, or ranking is important, and browsers automatically precede items with incrementing numbers, letters, or roman numerals. Both use <li> tags for their items, but <ol> implies that altering the item sequence changes the actual meaning of the content.

30. What is the <li> tag?

The <li> (List Item) tag is used to wrap every individual item or entry inside an unordered list (<ul>), an ordered list (<ol>), or a menu (<menu>). It must always be nested as a direct child inside a list container to maintain valid HTML markup and accessibility tree structure. Inside an <li> tag, you can place raw text, inline formatting, links, images, or even nest an entirely new sub-list to create multi-level menus. Its visual bullet or numeric marker is automatically rendered by the parent list container type.

DEV Community: Raj

closure

Callback Function

What is React

Hello World

" looks like normal HTML But inside React we use a syntax called JSX. JSX looks similar to HTML but it works with JavaScript and React. This makes it easier to create and manage different parts of a web application as reusable components.

JavaScript Function

CSS :root Selector

JavaScript vs TypeScript What’s the Difference?

Why do we Convert String to Number and Number to String in a Calculator?

JavaScript Control Flow Statements

Bug Life Cycle

A Small CSS Mistake That Made Me Waste Time

What difference between java and javascript

Imagine a website like YouTube:

HTML & CSS Mock Interview Questions & Answers Part 3

" looks like normal HTML But inside React we use a syntax called JSX.
JSX looks similar to HTML but it works with JavaScript and React.
This makes it easier to create and manage different parts of a web application as reusable components.