DEV Community: Kush Bhandari

Polyfills

Kush Bhandari — Sat, 28 Mar 2026 01:57:28 +0000

What are Polyfills?

Polyfills are custom implementation to the common javascript methods. There can be cases where older browser is not supporting the latest javascript methods.So there we write polyfills.

For Example:
Polyfill for map method

// Array.map using Array Method
let array=[10,20,30,40,50];
let result=array.map(item=>item*2);
console.log("Result",result);

// Our Prototype for map
Array.prototype.myMap=function(fn){
    if(typeof fn !=="function"){
        throw new Error("Passed parameter is not function");
    }
    let array=this;
    let output=[];
    for(let i=0;i<array.length;i++){
        output.push(fn(array[i]));
    }
    return output
}
console.log(array.myMap(item=>item*2));

I think you will be able to write for filter method as well. let me write for reduce.

Polyfill for reduce method

let array=[1,2,3,4,5,6,7];
let defaultValue=0;
let result=array.reduce((sum,acc)=>sum+acc,defaultValue);
console.log(result,"Result");

// Custom Polyfill
Array.prototype.myReduce=function(fn,value){
    if(typeof fn !=="function"){
        throw new Error("Passed parameter is not a function")
    }
    let array=this;
    let defaultValue=value || 0;
    let result=defaultValue;
    for(let i=0;i<array.length;i++){
        result=fn(result,array[i]);
    }
    return result;
}

console.log(array.myReduce((acc,curr)=>acc+curr,0));

Polyfill for includes method

// Includes method of array
// This method is used to check if item exits in array or not
let array=[1,2,3,4,5,6];
console.log(array.includes(3));
console.log(array.includes(10));

// Custom Implementation
Array.prototype.myInclude=function(value){
    if(typeof value ==="number" || typeof value ==="string"){
        let array=this;
        for(let i=0;i<array.length;i++){
            if(array[i]===value){
                return true
            }
        }
        return false
    }
    else {
        throw new Error("Passed value not allowed!")
    }
}

console.log(array.myInclude(3))

Guys, do write other polyfills as well, As these are now days commonly getting asked in the interviews.

List you should practise next:
function.prototype.call
function.prototype.apply
function.prototype.bind
Polyfill for Promise.all
Polyfill for debounce, throttle

Sharing solution for three commonly asked polyfill in interviews, but do practise on your own.

Function.prototype.myBind = function (context, ...args) {
  const fn = this;

  return function (...newArgs) {
    return fn.apply(context, [...args, ...newArgs]);
  };
};

function debounce(fn, delay) {
  let timer;

  return function (...args) {
    clearTimeout(timer);

    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

function throttle(fn, limit) {
  let inThrottle = false;

  return function (...args) {
    if (!inThrottle) {
      fn.apply(this, args);
      inThrottle = true;

      setTimeout(() => {
        inThrottle = false;
      }, limit);
    }
  };
}

To Do App

Kush Bhandari — Mon, 23 Mar 2026 15:29:42 +0000

Inteview question on Todo-App with following Requirements:

Create a todo react app
requirements:
user should be able to add a todo
todo should be listed on dom
user should be able to update status of a todo
user should be able to edit the text
user should be able to delete a todo

import { useState } from 'react';
import './App.css';

function App() {
  const [toDoValue, setToDoValue] = useState('');
  const [toList, setToList] = useState([]);

  const handleAdd = () => {
    let newItem = { id: toList.length + 1, label: toDoValue, completed: false };
    let newArray = [...toList, newItem];
    setToList(newArray);
    setToDoValue('');
  };

  const handleValueChange = (id, newValue) => {
    let result = toList.filter((item) => item.id !== id);
    let output = [...result, { id: id, label: newValue, completed: false }];
    setToList(output);
  };

  const handleDelete = (id) => {
    let result = toList.filter((item) => item.id !== id);
    setToList(result);
  };

  const handleIsCompleted = (id) => {
    // handleIsCompleted logic
    let result = toList.map((item) => {
      if (item.id === id) {
        return { ...item, completed: !item.completed };
      } else {
        return item;
      }
    });
    setToList(result);
  };

  return (
    <>
      <input
        type="text"
        value={toDoValue}
        onChange={(e) => setToDoValue(e.target.value)}
        placeholder="Enter To Do value"
      />
      <button onClick={handleAdd}>Add</button>

      {toList?.map((item) => {
        return (
          <div key={item.id}>
            <input
              disabled={item.completed}
              value={item.label}
              onChange={(e) => handleValueChange(item.id, e.target.value)}
            />
            <button onClick={() => handleIsCompleted(item.id)}>
              {item.completed ? 'Mark as Incomplete' : 'Mark as Completed'}
            </button>

            <button onClick={() => handleDelete(item.id)}>Delete</button>
          </div>
        );
      })}
    </>
  );
}

export default App;

This is my approach to do in limit time of 30mins. You can think of much better.

Custom Multi Select in React

Kush Bhandari — Thu, 19 Mar 2026 16:41:24 +0000

Machine Coding Interview Question
Build a Multi-Select Dropdown with Search (Tag Input)

This is VERY frequently asked in frontend interviews.

📌 Problem Statement

Build a Multi-Select Dropdown component like this:

[ React × ] [ JavaScript × ] [ + Add ]

Clicking "Add" opens a dropdown with searchable options.

📦 Data
const options = [
"React",
"JavaScript",
"TypeScript",
"Node.js",
"Next.js",
"HTML",
"CSS"
];

✅ Requirements
1️⃣ Multi Select

User can select multiple options

Selected items appear as tags

[ React × ] [ CSS × ]
2️⃣ Remove Tag

Each tag has ❌

Clicking removes it

3️⃣ Dropdown Toggle

Clicking input or button opens dropdown

Clicking outside closes it

4️⃣ Search Filter

Typing filters options:

Input: "re"
→ React
5️⃣ Prevent Duplicate Selection

Already selected items should:

Not appear in dropdown OR

Be disabled

6️⃣ Keyboard Support (Important)

Enter → select highlighted item

Backspace → remove last tag (if input empty)

⚠️ Constraints (Interview Critical)

❌ No libraries

❌ No mutation of data

✅ Proper state modeling

✅ Event handling (click outside!)

❌ Avoid unnecessary re-renders

🎯 Edge Cases Interviewers Test
Case Expected Behavior
Rapid typing Filter works smoothly
Duplicate select Prevented
Backspace Removes last tag
Click outside Closes dropdown
No results Show "No options"

import { useEffect, useMemo, useRef, useState } from "react";

const options = [
  "React",
  "JavaScript",
  "TypeScript",
  "Node.js",
  "Next.js",
  "HTML",
  "CSS"
];

export default function MultiSelect() {
  const [query, setQuery] = useState("");
  const [selected, setSelected] = useState([]);
  const [isOpen, setIsOpen] = useState(false);

  const ref = useRef(null);

  // click outside
  useEffect(() => {
    function handleClickOutside(e) {
      if (ref.current && !ref.current.contains(e.target)) {
        setIsOpen(false);
      }
    }

    document.addEventListener("mousedown", handleClickOutside);
    return () =>
      document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const filtered = useMemo(() => {
    return options
      .filter((opt) => !selected.includes(opt))
      .filter((opt) =>
        opt.toLowerCase().includes(query.toLowerCase())
      );
  }, [query, selected]);

  const handleSelect = (item) => {
    setSelected((prev) => [...prev, item]);
    setQuery("");
  };

  const handleRemove = (item) => {
    setSelected((prev) => prev.filter((i) => i !== item));
  };

  return (
    <div ref={ref} style={{ width: 300 }}>
      <div
        style={{ border: "1px solid black", padding: 8 }}
        onClick={() => setIsOpen(true)}
      >
        {selected.map((item) => (
          <span key={item} style={{ marginRight: 4 }}>
            {item}
            <button onClick={() => handleRemove(item)}>❌</button>
          </span>
        ))}

        <input
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="Search..."
        />
      </div>

      {isOpen && (
        <ul style={{ border: "1px solid gray", marginTop: 4 }}>
          {filtered.length > 0 ? (
            filtered.map((item) => (
              <li
                key={item}
                onClick={() => handleSelect(item)}
                style={{ cursor: "pointer" }}
              >
                {item}
              </li>
            ))
          ) : (
            <li>No options</li>
          )}
        </ul>
      )}
    </div>
  );
}

Understanding Object Keys in JavaScript (Interview Trap Question)

Kush Bhandari — Wed, 18 Mar 2026 17:25:58 +0000

I was recently asked an interesting JavaScript question in an interview:

let obj = {};
let a = { a: 10 };
let b = { b: 20 };

obj[a] = 10;
obj[b] = 20;

console.log(obj[a]);

🤔 What will be the output?

👉 Output: 20

🔍 Why does this happen?

In JavaScript, object keys can only be of type string or symbol.

When you use an object as a key:

obj[a] = 10;

JavaScript internally converts the key to a string using .toString():

a.toString() // "[object Object]"
b.toString() // "[object Object]"

So effectively, your code becomes:

obj["[object Object]"] = 10;
obj["[object Object]"] = 20;

👉 The second assignment overwrites the first one.

So:

console.log(obj[a]); // 20

📌 Follow-up Question 1: How to fix this issue?

✅ Option 1: Use `Map` (Recommended)

If you want to use objects as keys, use Map:

const map = new Map();

map.set(a, 10);
map.set(b, 20);

console.log(map.get(a)); // 10
console.log(map.get(b)); // 20

👉 Map preserves reference identity, so a and b are treated as different keys.

⚠️ Option 2: Convert keys to unique strings (Not ideal)

let obj = {};

let a = JSON.stringify({ a: 10 });
let b = JSON.stringify({ b: 20 });

obj[a] = 10;
obj[b] = 20;

console.log(obj[a]); // 10

👉 This works, but:

It’s fragile
Depends on consistent serialization
Not suitable for complex objects

⚠️ Option 3: Use `Symbol`

let obj = {};

let a = Symbol("a");
let b = Symbol("b");

obj[a] = 10;
obj[b] = 20;

console.log(obj[a]); // 10

👉 Symbols are always unique:

Symbol("a") === Symbol("a") // false

📌 Follow-up Question 2: What is the data type of object keys?

In JavaScript:

Object keys are always:
- string
- symbol

Even if you use:

obj[1] = "value";
obj[true] = "value";
obj[null] = "value";

They are converted to strings:

obj["1"]
obj["true"]
obj["null"]

🚀 When should you use `Map` instead of `Object`?

Use Map when:

Keys are objects or functions
You need preserved insertion order
You want better performance for frequent add/remove
You need strict key equality (no coercion)

⚡ Bonus: Key Differences (Object vs Map)

Feature	Object	Map
Key Types	String, Symbol	Any type
Key Conversion	Yes (to string)	No
Order Guarantee	Not reliable	Preserved
Performance	Good	Better for dynamic use
Iteration	Limited	Built-in methods

🧠 Final Takeaway

Objects coerce keys to strings, which can cause collisions.
This is why both a and b became "[object Object]".
To safely use non-string keys, always prefer Map.

This is a classic interview question designed to test:

JavaScript coercion rules
Object internals
Practical knowledge of Map

Maching Coding Question for Interview

Kush Bhandari — Mon, 16 Mar 2026 06:23:40 +0000

Interview can ask you to create a To-do List with the help on Html and Javascript only without use of React. In this case the knowledge of Event bubbling, Event delegation is must.

Event Bubbling: Event bubbles from child to parent.
Event Capturing: Event Capturing from parent to child.

document.addEventlistener("click",handleClick,true);
If we pass true in this event capturing will happen. and false will cause the bubbling.

Now, Where this find useful:
Suppose you have 3 div nested one another making child div , parent div, grand parent div.
If we attach a console.log() on every div. So in event bubbling we will get the child console.log first and then parent and so on. vice versa with event capturing.

Now, what is event delegation:
So, Instead of attaching individual event listener to a list of item, we attach a common event listener to the list and handle every list item click.

Advantages of Event Delegation:
Code reuse.
Code Simplification.

Disadvantages:
Some event doen't get propogated
Ex: focus, blur

Example :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Do List</title>
</head>
<body>

    <h1>To Do List</h1>
    <input id="inputField" type="text" placeholder="Add Item"  />
    <button id="submit">Submit</button>

    <ul id="listItem"></ul>
    <script src="./ToDoList.js"></script>

</body>
</html>

let submitBtn = document.getElementById("submit");
let list = document.getElementById("listItem");

function handleSubmitBtnClick() {
  let inputText = document.getElementById("inputField");
  let inputValue = inputText.value.trim();

  // Handle empty input value
  if (inputValue === "") return;

  //   Create Node
  let li = document.createElement("li");
  const text = document.createElement("p");
  text.className = "todo-text";
  text.textContent = inputValue;

  let completeBtn = document.createElement("button");
  completeBtn.classList = "complete-btn";
  completeBtn.textContent = "Complete";

  let deleteBtn = document.createElement("button");
  deleteBtn.classList = "delete-btn";
  deleteBtn.textContent = "Delete";

  li.append(text, completeBtn, deleteBtn);
  list.append(li);
  inputText.value = "";
  inputText.focus();

  return;
}

function handleListClick(e) {
  const target = e.target;
  if (target.classList.contains("delete-btn")) {
    target.closest("li").remove();
  }
  if (target.classList.contains("complete-btn")) {
    const todoText = target.closest("li").querySelector(".todo-text");
    todoText.style.textDecoration =
      todoText.style.textDecoration === "line-through"
        ? "none"
        : "line-through";
  }
}

submitBtn.addEventListener("click", handleSubmitBtnClick);
list.addEventListener("click", handleListClick);

This Keyword in JS

Kush Bhandari — Mon, 16 Mar 2026 03:09:13 +0000

this keyword of javascript actually confuse a lots of junior and senior developer. So let me explain in the easiest way possible.

this behavior doen't depend upon where this is used but from where it is called. Understand this by a example.

Example:

let obj={
name:"Kush",
displayName(){
console.log(`My name is ${this.name}`);
}
}

Now, when obj.displayName() is called we get output as :
// My name is Kush.

But what if i change this to something like this :
let person=obj.displayName;
person();
Now the output will be :
// My name is undefined.

So, this show us that the execution of this is more important then the place where this is defined.

In non strict mode, this point to the global window object in browser and can be different in other runtimes.
In strict mode, this point to the undefined.

Arrow function: Arrow functions do not have their own this; they capture this from their lexical scope (where they were created).

let obj={
name:"Kush",
personName:()=>{
console.log(`My name is ${this.name}`)
}
}

Now obj.personName() // My name is undefined

Understanding this with Rules

Before jumping into more examples, it's helpful to remember that this in JavaScript follows a few binding rules. The rule that applies depends on how a function is called.

There are four main rules:

Default Binding
Implicit Binding
Explicit Binding
Arrow Function (Lexical Binding)

Let's understand them one by one.

Default Binding When a regular function is called without any object, this follows the default binding rule.

function show() {
  console.log(this);
}

show();

In a browser (non-strict mode):
this → window object

In strict mode:
this → undefined

This happens because the function was not called through an object.

Implicit Binding

When a function is called as a method of an object, this refers to that object.

const user = {
  name: "Kush",
  greet() {
    console.log(this.name);
  }
};

user.greet();

Output:
Kush

Here the object before the dot (user) becomes this.

Losing Implicit Binding

A very common mistake developers make is losing the reference of the object.

const user = {
  name: "Kush",
  greet() {
    console.log(this.name);
  }
};

const greetFn = user.greet;

greetFn();

Output: undefined
Why? Because now the function is called like this:
greetFn()
There is no object before the function call, so default binding applies.

Explicit Binding (call, apply, bind)

JavaScript allows us to explicitly decide what this should be.

const user1 = { name: "Kush" };
const user2 = { name: "Rahul" };

function greet() {
  console.log(this.name);
}

greet.call(user1);
greet.call(user2);

Output:
Kush
Rahul

Here we are manually setting this using call.

Arrow Function this (Lexical Binding) Arrow functions behave differently.

They do not have their own this. Instead, they inherit this from the surrounding scope.

const user = {
  name: "Kush",
  greet: () => {
    console.log(this.name);
  }
};

user.greet();

Output: undefined

Why? Because the arrow function takes this from the outer scope, which in this case is the global scope, not the object.

Correct Use of Arrow Function
Arrow functions work well when used inside another method.

const user = {
  name: "Kush",
  greet() {
    const say = () => {
      console.log(this.name);
    };
    say();
  }
};

user.greet();

Output:
Kush

Here the arrow function inherits this from greet(), which is user.
Another Common Example (setTimeout)

Many developers get confused in asynchronous callbacks.

const user = {
name: "Kush",
greet() {
setTimeout(function () {
console.log(this.name);
}, 1000);
}
};

user.greet();

Output: undefined

Because the callback is a regular function, so this becomes the global object.

Fix with Arrow Function
const user = {
name: "Kush",
greet() {
setTimeout(() => {
console.log(this.name);
}, 1000);
}
};

user.greet();

Output:

Kush

So, I hope this must clear some concept of this. Now let's make this further clear with some example. Now guss the ouput and you can comment on this article if any example still confuse you.

1) const user = {
name: "Kush",
greet() {
setTimeout(function () {
console.log(this.name);
}, 0);
}
};

user.greet();

2) const user = {
name: "Kush",
greet() {
setTimeout(() => {
console.log(this.name);
}, 0);
}
};

user.greet();

3) const user1 = {
name: "Kush"
};

const user2 = {
name: "Rahul"
};

function greet() {
console.log(this.name);
}

greet.call(user1);
greet.call(user2);

4) const user = {
name: "Kush"
};

const greet = () => {
console.log(this.name);
};

greet.call(user);

5) const user = {
name: "Kush",
address: {
name: "Delhi",
greet() {
console.log(this.name);
}
}
};

user.address.greet();

6) const user1 = {
name: "Kush",
greet() {
console.log(this.name);
}
};

const user2 = {
name: "Rahul"
};

user2.greet = user1.greet;

user2.greet();

7) const user = {
name: "Kush",
greet() {
return function () {
console.log(this.name);
};
}
};

user.greet()();

If you guess all question right , you are on a right track!

Flatten Deeply Nested Array

Kush Bhandari — Sun, 15 Mar 2026 03:58:54 +0000

let arrItem=[1,[2,3,[4,5],[5,[3,[29]]]]];

I was asked in the interview to flatten this array meaning convert this array into something like this [1,2,3,4,5,5,3,29];

So, my first approach was to use a inbuild flat method of array.

arrItem.flat()

Now, the problem with this is it doen't flat deeply nested array. So you have to provide the depth. Here we can provide depth as infinity. So the answer would be.

arrItem.flat(Infinity)

Now, the interviewer will ask for a custom implementation of flat method.

There are two approach to do so.
1) Recursive Approach

Array.prototype.flattenArray=function(){
    // This is recursion Approach
    let array=this;
    let output=[];
    function flatArray(array){
        for(let item of array){
            if(Array.isArray(item)){
                flatArray(item)
            }
            else {
                output.push(item)
            }
        }
    }
    flatArray(array)
    return output;
}

2) Using Stack

let arrItem=[1,[2,3,[4,5],[5,[3,[29]]]]];

Array.prototype.flattenArray = function(depth=1){
    let stack=[];
    let output=[];
    for(let i=this.length-1;i>=0;i--){
        stack.push([this[i],depth])
    }    

    while(stack.length){
        let [item,depth]=stack.pop();
        if(Array.isArray(item) && depth>0){
            for(let i=item.length-1;i>=0;i--){
              stack.push([item[i],depth-1]);
            }
        }
        else {
            output.push(item);
        }
    }
    return output

}

console.log(arrItem.flattenArray(2)); // Provide any depth here for nesting. Infinity,for deeply nested.

Machine Coding Round

Kush Bhandari — Fri, 13 Mar 2026 08:00:47 +0000

Hi Everyone, So the question for today is, You have to render a list in the UI and that list item should be editable and all the item of the list to be editable and updated list to send to api repsonse.

You can take this list as a example:

const ArrayData = [
{ id: 1, name: "Kush", place: "Haldwani", age: 25 },
{ id: 2, name: "Ankit", place: "Gurugaon", age: 22 },
{ id: 3, name: "Akash", place: "Dehradun", age: 23 },
];

Below is the react code i have shared you can try before jumping to the solution. let me know in the comment why you were not able to do or able to do?

import { useState } from "react";
import "./styles.css";

export default function App() {
  const ArrayData = [
    { id: 1, name: "Kush", place: "Haldwani", age: 25 },
    { id: 2, name: "Ankit", place: "Gurugaon", age: 22 },
    { id: 3, name: "Akash", place: "Dehradun", age: 23 },
  ];
  const [formValue, setFormValue] = useState(ArrayData);

  const handleInputChange = (e, name, id) => {
    setFormValue((prev) => {
      return prev.map((item) => {
        if (item.id === id) {
          return { ...item, [name]: e.target.value };
        }
        return item;
      });
    });
  };
  const handleFormSubmit = (e) => {
    e.preventDefault();
    console.log("Data Submit", formValue);
  };

  return (
    <div className="App">
      <form onSubmit={handleFormSubmit}>
        {formValue.map((item) => (
          <div key={item.id} style={{ margin: "10px" }}>
            <h4>Student {item.id}</h4>
            <input
              type={"text"}
              value={item.name}
              onChange={(e) => {
                handleInputChange(e, "name", item.id);
              }}
            />
            <input
              type={"text"}
              value={item.place}
              onChange={(e) => {
                handleInputChange(e, "place", item.id);
              }}
            />
            <input
              type={"text"}
              value={item.age}
              onChange={(e) => {
                handleInputChange(e, "age", item.id);
              }}
            />
          </div>
        ))}
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

Web Core Vitals: Why Performance Decides SEO Ranking

Kush Bhandari — Sun, 22 Feb 2026 15:13:46 +0000

Have you ever wondered why two websites with similar content rank differently on Google?
Or why you built a great web application, but users still struggle to find it?

The answer often lies in Web Core Vitals.

Google doesn’t rank pages only by content anymore. It also evaluates real user experience. If two sites have similar content, the one with better Web Core Vitals usually ranks higher.

What Are Web Core Vitals?

Web Core Vitals are Google-defined metrics that measure real user experience on a website. They focus on three key aspects:

LCP – Largest Contentful Paint (Loading experience)
INP – Interaction to Next Paint (Responsiveness)
CLS – Cumulative Layout Shift (Visual stability)

Let’s understand each one, how it affects SEO, and how to optimize it.

1) LCP (Largest Contentful Paint)

Definition:
LCP measures the time taken for the largest visible content element in the viewport to appear.

This element is usually:

A hero image
A banner
A large heading
A product image

Example

Think about the Amazon home page.
The big banner image or main product section that appears first is usually the LCP element.

LCP Score Thresholds

≤ 2.5s → Good
2.5s – 4s → Needs improvement
> 4s → Poor

What Impacts LCP?
1. Images (Biggest Factor)

Large or unoptimized images delay LCP.

Best practices:
Use modern formats like WebP / AVIF
Do not lazy-load above-the-fold images
Preload hero images
Next.js example:
Next.js automatically:
Optimizes images
Converts to WebP/AVIF
Preloads priority images

2. Hero Images via CSS (Hidden LCP killer)

Background images in CSS are discovered late by the browser.
Bad: .hero { background-image: url("/hero.jpg"); }
Better: Use or instead so the browser can preload it.

3. TTFB (Time To First Byte)

If the server responds slowly, the browser cannot render anything early.

Fixes:

CDN
Caching
Server-side rendering (SSR)
Edge deployment
Why Next.js helps:
Server-rendered pages return HTML faster, improving LCP.

2) INP (Interaction to Next Paint)

Definition:
INP measures how quickly the UI responds after a user interaction (click, keypress, tap).

Example interactions:

Typing in a search box
Clicking a button
Selecting a dropdown
INP Score Thresholds ≤ 200ms → Good 200–500ms → Needs improvement > 500ms → Poor
Example
User types in a search input:
UI freezes for 600ms
Results appear late → Poor INP
Common Causes of Poor INP
Heavy JavaScript on the main thread
Large re-renders on every keystroke
Expensive calculations in event handlers
Too much client-side JavaScript

How to Improve INP
1. Avoid Blocking the Main Thread

Move heavy logic out of event handlers.

Bad:

onChange={() => filterBigList()}

Better:

Debounce input
Defer work
Use useTransition

2. Reduce Re-renders

Split state
Use memo, useCallback
Avoid global state updates on typing

3. Prefer Server Components (Next.js)

Server Components:

Reduce client JS

Reduce hydration cost

Improve responsiveness

3) CLS (Cumulative Layout Shift)

Definition:
CLS measures unexpected layout movement during page load.

Example

You try to click a button, but:
An image loads above it
The page shifts
You click the wrong thing
That’s CLS.
CLS Threshold
≤ 0.1 → Good

How to Prevent CLS
1. Fonts

Fonts loading late cause text to resize.

Next.js solution:

import { Inter } from "next/font/google";

Fonts are:

Self-hosted

Loaded at build time

Metric-matched
→ Almost zero CLS

2. Images

Always define dimensions.

Next.js enforces this automatically.

3. Ads

Ads loading late cause major layout shifts.

Fix:

.ad-slot {
min-height: 250px;
}

Always reserve space before the ad loads.

4. Skeletons & Placeholders

Instead of loading content suddenly:

{loading ? : }

This keeps layout stable.

5. Server Components

Server-rendered content appears immediately, reducing layout surprises.

Why Web Core Vitals Matter for SEO

Google uses Web Core Vitals as ranking signals, based on real user data.
Better Web Core Vitals mean:
Better user experience
Lower bounce rate
Higher SEO ranking

Implementing a Custom jest-like toBe() Matcher (Interview Question)

Kush Bhandari — Sat, 07 Feb 2026 20:15:39 +0000

In a recent frontend interview, I was asked to implement a simplified version of Jest's toBe() matcher. The goal was to replicate the following behavior:

expect(5).toBe(5)        // true
expect(5).not.toBe(4)    // true
expect(5).toBe(10)       // false + error

This question is less about Jest itself and more about JavaScript fundamentals, especially closures, API design, and error handling.

function expect(received) {
  function toBe(expected, isNot = false) {
    const pass = received === expected;

    if (isNot ? !pass : pass) {
      return true;
    }

    throw new Error(
      isNot
        ? `Expected ${received} not to be ${expected}`
        : `Expected ${received} to be ${expected}`
    );
  }

  return {
    toBe(expected) {
      return toBe(expected);
    },
    not: {
      toBe(expected) {
        return toBe(expected, true);
      }
    }
  };
}

How It Works
Closures are used to retain the received value inside render
toBe() performs a strict equality check
.not simply flips the assertion logic
Errors are thrown to signal test failures, just like real test runners

Key Takeaway
Testing libraries like Jest are built on simple JavaScript principles. If you understand closures and function composition, you can easily reason about how these tools work internally - an essential skill for senior frontend developers.

GLOBAL EXECUTION CONTEXT- How javaScript works behind the scene.

Kush Bhandari — Fri, 08 Nov 2024 14:57:55 +0000

When node index.js is run, JavaScript creates a Global Execution Context for the index.js file. This context consists of two main phases:

1. Memory Creation Phase (also known as the "Creation Phase")
In this phase, the JavaScript engine scans the entire code and sets up the memory for variables and functions before actual code execution.
Hoisting takes place during this phase, where all variable and function declarations are processed at the top of their scope.

Variables declared with let and const are initialized in memory with a value of undefined but are placed in a "temporal dead zone" (TDZ) until the line where they are assigned a value.

Functions declared with the function keyword are fully hoisted and can be called before they are defined in the code (although this does not apply to functions defined using let, const, or arrow functions).

let a = 10; console.log(Welcome Here, ${a});

During the Memory Phase:
a is placed in memory, but because it’s defined with let, it is initialized with undefined in the TDZ.

2. Code Execution Phase (also known as the "Execution Phase")
After the memory setup, JavaScript starts the Code Execution Phase, where it executes the code line by line from top to bottom.
During this phase, JavaScript assigns values to the variables and executes any functions that are called.
In the case of index.js:

Line 1: let a = 10; – a is assigned the value 10.
Line 2: console.log(\Welcome Here, ${a});– This line prints Welcome Here, 10 to the console.

Key Points - **
**Temporal Dead Zone (TDZ): Variables declared with let and const are hoisted but remain uninitialized (in TDZ) until their definition is encountered in the code. This is why let and const cannot be accessed before they are defined, unlike var.

Global Execution Context: This context persists until the entire program has executed. Each time you invoke a function, a new Execution Context is created specifically for that function.

Scope Chain and Lexical Environment: The global context maintains a reference to the global scope, and each execution context has access to variables defined in its own scope as well as in its outer (lexical) scope.

Advance Yup Validations

Kush Bhandari — Wed, 18 Sep 2024 09:25:49 +0000

Yup is a common library used for validation purpose of the form in react with react-hook-form or formik.

1) Using test
Suppose you are writing a validation and you want to check if user input is valid. so you can write test condition for that.
for example: Age field should have value greater than 18.
age: yup.string().test({message:'Please enter a valid age',test: (value) =>{return value>18}}}).

2) Using when:
Support nationality document is only required when nationality is others.
fileInput: yup.string().when("nationality", {
is: "Others",
then: (schema) =>
schema.required("Nationality document is required"),
});

3) Using function
If premium is greater than 1 lakh than pan card field is required.
panNo: yup
.string()
.test("PanCardRequired", "PAN Number is required", function (value) {
if (premiumValue > 100000) {
if (value !== undefined || value === "") {
return value ? true : false;
}
}

        return true;
      }),

DEV Community: Kush Bhandari

Polyfills

To Do App

Custom Multi Select in React

Understanding Object Keys in JavaScript (Interview Trap Question)

🤔 What will be the output?

🔍 Why does this happen?

📌 Follow-up Question 1: How to fix this issue?

✅ Option 1: Use Map (Recommended)

⚠️ Option 2: Convert keys to unique strings (Not ideal)

⚠️ Option 3: Use Symbol

📌 Follow-up Question 2: What is the data type of object keys?

🚀 When should you use Map instead of Object?

⚡ Bonus: Key Differences (Object vs Map)

🧠 Final Takeaway

Maching Coding Question for Interview

This Keyword in JS

Flatten Deeply Nested Array

Machine Coding Round

Web Core Vitals: Why Performance Decides SEO Ranking

Implementing a Custom jest-like toBe() Matcher (Interview Question)

GLOBAL EXECUTION CONTEXT- How javaScript works behind the scene.

Advance Yup Validations

✅ Option 1: Use `Map` (Recommended)

⚠️ Option 3: Use `Symbol`

🚀 When should you use `Map` instead of `Object`?