Forem: Saurabh Raj

Learn Largest Contentful Paint (LCP) in simple words

Saurabh Raj — Wed, 25 Jun 2025 06:17:41 +0000

Largest Contentful Paint (LCP) is a metric that tells us about the perceived page load speed. It marks the point in the page load timeline when the largest content on the page is made visible.

Here, largest content means the largest element in area. But it has to be noted that, not all elements are considered for it. Here is a comprehensive list of the elements that are considered:

<img> elements (the first frame presentation time is used for animated content such as GIFs or animated PNGs)
<image> elements inside an <svg> element
<video> elements (the poster image load time or first frame presentation time for videos is used—whichever is earlier)
An element with a background image loaded using the url() function, (as opposed to a CSS gradient)
Block-level elements containing text nodes or other inline-level text element children.

This means LCP counts block elements (like <div>, <section>, <article>, etc.) if:

They directly contain raw text nodes, like:

<div>This is plain text</div>

OR they contain inline-level elements that wrap text, like:

<div><span>This is text inside a span</span></div>

Note:
LCP measurements use heuristics to exclude certain elements that users are likely to see as "non-contentful". For Chromium-based browsers, these include:

Elements with an opacity of 0, that are invisible to the user
Elements that cover the full viewport, that are likely considered as background rather than content
Placeholder images or other images with a low entropy, that likely don't reflect the true content of the page

How is an element's size determined?

The size of the element reported for LCP is typically the size that's visible to the user within the viewport. If the element extends outside of the viewport, or if any of the element is clipped or has non-visible overflow, those portions don't count toward the element's size.

For image elements that have been resized from their intrinsic size, the size that gets reported is either the visible size or the intrinsic size, whichever is smaller.

For text elements, LCP considers only the smallest rectangle that can contain all text nodes.

For all elements, LCP doesn't consider margins, paddings, or borders applied using CSS.

How is LCP reported?

LCP (Largest Contentful Paint) is reported by the browser as a PerformanceEntry when it paints the largest visible content element on the screen. This entry is updated whenever a larger element finishes rendering — such as when a hero image loads after initial text — or when new, larger elements are added to the DOM.

LCP only considers elements that are visible and fully rendered (e.g., loaded images and fonts). It stops updating once the user interacts with the page (e.g., scroll, click, keypress).

For analysis, only the last LCP entry before user interaction should be reported.

What is a good LCP score?

To provide a good user experience, sites should strive to have Largest Contentful Paint of 2.5 seconds or less. To ensure you're hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

Examples

Here are some examples of when the Largest Contentful Paint occurs on a few popular websites:

In both of the timelines, the largest element changes as content loads. In the first example, new content is added to the DOM and that changes what element is the largest. In the second example, the layout changes and content that was previously the largest is removed from the viewport.

While it's often the case that late-loading content is larger than content already on the page, that's not necessarily the case. The next two examples show the LCP occurring before the page fully loads.

In this example, the Instagram logo is loaded relatively early and it remains the largest element even as other content is progressively shown.

In this Google Search results page example, the largest element is a paragraph of text that is displayed before any of the images or logo finish loading. Since all the individual images are smaller than this paragraph, it remains the largest element throughout the load process.

Conclusion

Inspiration for this article is taken from here. Do check it out for more detailed explanation.

Do leave a like, if this article helped you. Thanks.

Learn requestAnimationFrame - Never to look back again

Saurabh Raj — Sun, 25 May 2025 14:23:14 +0000

What is requestAnimationFrame?

requestAnimationFrame is a browser API that lets you schedule a function to run right before the browser repaints the screen. Think of it as saying "Hey browser, call my function when you're about to draw the next frame."

How Does It Work?

The browser typically repaints the screen 60 times per second (60 FPS), which means every ~16.67 milliseconds. When you call requestAnimationFrame(callback), the browser adds your callback function to a queue and executes it just before the next repaint.

Here's the basic syntax:

function animate() {
    // Your animation code here
    requestAnimationFrame(animate); // Schedule the next frame
}
requestAnimationFrame(animate); // Start the animation

The Browser's Rendering Pipeline

Understanding when requestAnimationFrame fits in helps explain why it's so useful:
1. JavaScript execution (your code runs)

Style calculations (CSS is processed)
Layout (elements are positioned)
Paint (pixels are drawn)
Composite (layers are combined)

requestAnimationFrame callbacks run right before step 2, giving you the perfect timing to make changes that will be included in the current frame.

Why Before Step 2 is Perfect

When your requestAnimationFrame callback runs before step 2, any changes you make (like element.style.left = '100px') get included in the current frame's style calculations.

function animate() {
    // This change happens BEFORE style calculation
    element.style.left = position + 'px';
    // Browser will include this change in the current frame
}

The result: Your animation change appears on screen in this frame cycle.

Why Use requestAnimationFrame?

1. Perfect Timing
Unlike setTimeout or setInterval, which run independently of the browser's refresh rate, requestAnimationFrame is synchronized with the display. This means your animations will be smooth and won't cause visual tearing or stuttering.

2. Automatic Throttling
When a tab becomes inactive (user switches tabs), requestAnimationFrame automatically pauses, saving CPU and battery. setTimeout keeps running regardless.

3. Better Performance
The browser can optimize requestAnimationFrame callbacks by batching DOM changes and coordinating with the GPU.

When Should You Use It?

Perfect For:

Smooth animations (moving elements, fading, scaling)
Game loops (updating sprites, physics calculations)
Data visualizations (updating charts, graphs)
Custom scrolling effects
Canvas/WebGL rendering

Not Necessary For:

CSS transitions/animations (browser handles these automatically)
One-time DOM updates (just change the property directly)
Non-visual periodic tasks (use setTimeout/setInterval)

Practical Examples

Simple Movement Animation

let position = 0;
const element = document.getElementById('box');

function moveBox() {
    position += 2;
    element.style.transform = `translateX(${position}px)`;

    if (position < 300) {
        requestAnimationFrame(moveBox);
    }
}
requestAnimationFrame(moveBox);

Time-Based Animation (More Robust)

let startTime = null;
const duration = 2000; // 2 seconds
const element = document.getElementById('box');

function animate(currentTime) {
    if (!startTime) startTime = currentTime;
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);

    // Easing function for smooth motion
    const easeProgress = progress * (2 - progress);

    element.style.transform = `translateX(${easeProgress * 300}px)`;

    if (progress < 1) {
        requestAnimationFrame(animate);
    }
}
requestAnimationFrame(animate);

Important Details

Canceling Animations

You can cancel a scheduled animation using the returned ID:

const animationId = requestAnimationFrame(animate);
cancelAnimationFrame(animationId); // Cancel it

Handling Multiple Elements

For multiple animations, use a single requestAnimationFrame loop:

const elements = [element1, element2, element3];

function animateAll() {
    elements.forEach((el, index) => {
        // Update each element
        el.style.transform = `rotate(${Date.now() * 0.01 * (index + 1)}deg)`;
    });
    requestAnimationFrame(animateAll);
}
requestAnimationFrame(animateAll);

Performance Tips

Batch DOM changes within your callback
Use transform and opacity instead of properties that trigger layout.
Consider using Web Animations API for complex animations

Browser Support

requestAnimationFrame is supported in all modern browsers. For older browsers, you can use a polyfill that falls back to setTimeout.

The key takeaway is that requestAnimationFrame gives you the smoothest possible animations by working with the browser's natural refresh cycle rather than against it. It's the standard way to create performant animations in modern web development.

Wrapping up

Thanks for reading! If you’ve made it this far, kudos to you for investing in your personal growth.

If you found this helpful, feel free to like and drop a comment— I’d love to hear your thoughts.

Don’t forget to check out my other articles to keep learning.

Thanks again for your time!

Understanding XSRF Protection: Implementation in Fetch vs. Axios

Saurabh Raj — Sun, 20 Apr 2025 15:38:06 +0000

Cross-Site Request Forgery (CSRF or XSRF) is an attack that forces authenticated users to execute unwanted actions on web applications where they're currently authenticated. The attack works by tricking users into making requests to a website without their explicit consent, potentially causing state-changing operations like:

Transferring funds
Changing email addresses or passwords
Making purchases
Deleting accounts or data

How CSRF Attacks Work

Here's a typical CSRF attack scenario:

User logs into a legitimate site (e.g., bank.com) and receives authentication cookies
Without logging out, the user visits a malicious site
The malicious site contains code that submits a form or makes an AJAX request to bank.com
Since the browser sends cookies with the request, bank.com processes it as legitimate
The action executes with the user's privileges without their knowledge or consent

CSRF Protection Mechanisms

The primary CSRF protection methods include:

CSRF Tokens: Unique, unpredictable values included in requests that the server validates
SameSite Cookies: Browser setting that controls when cookies are sent with cross-site requests
Origin/Referer Header Checks: Validating the source of incoming requests
Custom Headers: Adding headers that can't be set by cross-origin requests without CORS

Fetch API: Manual CSRF Protection

The Fetch API doesn't provide built-in CSRF protection. This means developers must manually implement the protection mechanisms. Let's look at how to implement CSRF protection with Fetch in detail:

Example 1: Manual CSRF Token Implementation with Fetch

First, you need to obtain a CSRF token from your server. Many frameworks include this in the page's HTML, often in a meta tag:

<meta name="csrf-token" content="a1b2c3d4e5f6g7h8i9j0kAlBmCnDoEp">

Then, you need to extract and include this token in your Fetch requests:

// Function to get the CSRF token from meta tag
function getCsrfToken() {
  return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
}

// Making a POST request with CSRF protection
async function postDataWithCsrfProtection(url, data) {
  try {
    const csrfToken = getCsrfToken();

    const response = await fetch(url, {
      method: 'POST',
      credentials: 'same-origin', // Important for including cookies
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-Token': csrfToken // Add CSRF token in header
      },
      body: JSON.stringify(data)
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return await response.json();
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

// Example usage
postDataWithCsrfProtection('/api/update-profile', {
  name: 'John Doe',
  email: 'john@example.com'
});

Example 2: CSRF Protection for All Fetch Requests

For larger applications, you likely want to centralize your CSRF protection. Here's how to create a wrapped version of Fetch with built-in CSRF protection:

// Enhanced fetch function with CSRF protection
function safeFetch(url, options = {}) {
  // Default options with credentials included
  const defaultOptions = {
    credentials: 'same-origin',
    headers: {
      'Content-Type': 'application/json'
    }
  };

  // Merge options
  const mergedOptions = {
    ...defaultOptions,
    ...options,
    headers: {
      ...defaultOptions.headers,
      ...options.headers
    }
  };

  // Only add CSRF token for non-GET requests
  if (mergedOptions.method && mergedOptions.method.toLowerCase() !== 'get') {
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    mergedOptions.headers['X-CSRF-Token'] = csrfToken;
  }

  return fetch(url, mergedOptions);
}

// Example usage
async function updateUserProfile(userData) {
  try {
    const response = await safeFetch('/api/users/profile', {
      method: 'PUT',
      body: JSON.stringify(userData)
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return await response.json();
  } catch (error) {
    console.error('Error updating profile:', error);
    throw error;
  }
}

Example 3: Double Submit Cookie Pattern with Fetch

Another common CSRF protection method is the double submit cookie pattern:

// Function to get CSRF token from cookie
function getCsrfTokenFromCookie() {
  const cookieValue = document.cookie
    .split('; ')
    .find(row => row.startsWith('XSRF-TOKEN='))
    ?.split('=')[1];

  return cookieValue ? decodeURIComponent(cookieValue) : null;
}

// Making a request with the double submit cookie pattern
async function doubleSubmitRequest(url, data) {
  try {
    const csrfToken = getCsrfTokenFromCookie();

    if (!csrfToken) {
      throw new Error('CSRF token not found in cookies');
    }

    const response = await fetch(url, {
      method: 'POST',
      credentials: 'same-origin',
      headers: {
        'Content-Type': 'application/json',
        'X-XSRF-TOKEN': csrfToken // Send the same token back in header
      },
      body: JSON.stringify(data)
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    return await response.json();
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

Axios: Built-in CSRF Protection

In contrast to Fetch, Axios provides built-in CSRF protection, which makes it easier to implement and maintain. Here's how Axios's CSRF protection works:

Default CSRF Protection in Axios

By default, Axios looks for a CSRF token in a cookie named XSRF-TOKEN and automatically includes it in a header named X-XSRF-TOKEN for non-GET requests. This implements the double submit cookie pattern automatically:

// Basic Axios request with automatic CSRF protection
axios.post('/api/update-profile', {
  name: 'John Doe',
  email: 'john@example.com'
})
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));

If your server follows this convention (setting an XSRF-TOKEN cookie), Axios will automatically protect against CSRF attacks without any additional code.

Example 1: Customizing CSRF Protection in Axios

If your server uses different naming conventions for CSRF tokens, you can configure Axios accordingly:

// Configure Axios instance with custom CSRF settings
const api = axios.create({
  baseURL: 'https://api.example.com',
  withCredentials: true, // Important for including cookies
  xsrfCookieName: 'CSRF-TOKEN', // Custom cookie name
  xsrfHeaderName: 'X-CSRF-Token' // Custom header name
});

// Now all requests made with this instance will include the CSRF token
api.post('/users', {
  username: 'newuser',
  email: 'newuser@example.com'
})
.then(response => console.log('User created:', response.data))
.catch(error => console.error('Error creating user:', error));

Example 2: Global Axios Configuration for CSRF

For application-wide CSRF protection with Axios:

// Set up global defaults for all Axios requests
axios.defaults.withCredentials = true;
axios.defaults.xsrfCookieName = 'CSRF-TOKEN';
axios.defaults.xsrfHeaderName = 'X-CSRF-Token';

// All subsequent axios requests will use these settings
axios.post('/api/comments', { content: 'Great article!' });
axios.put('/api/posts/123', { title: 'Updated Title' });

Example 3: Manually Managing CSRF Tokens with Axios

If you need more control over how CSRF tokens are managed:

// Function to get CSRF token from a meta tag
function getMetaToken() {
  const metaTag = document.querySelector('meta[name="csrf-token"]');
  return metaTag ? metaTag.getAttribute('content') : null;
}

// Configure axios with an interceptor to add the token
axios.interceptors.request.use(config => {
  // Only add token to non-GET requests
  if (config.method !== 'get') {
    const token = getMetaToken();
    if (token) {
      config.headers['X-CSRF-Token'] = token;
    }
  }
  return config;
}, error => {
  return Promise.reject(error);
});

// Now all axios requests will include the CSRF token from the meta tag

Why This Difference Matters

The contrast between these implementations highlights why Axios's built-in CSRF protection is valuable:

Code Simplicity: Axios reduces the amount of code needed for CSRF protection by ~90%
Reduced Error Potential: Fewer lines of code means fewer opportunities for mistakes
Standardization: Axios encourages following standard security patterns
Maintenance: Less security-related code to maintain and update
Developer Experience: Security "out of the box" without additional implementation

Server-Side Considerations

For CSRF protection to work properly, your server needs to:

Generate and issue CSRF tokens to clients
Validate tokens on state-changing requests
Refresh tokens as needed for security

Example of Express.js Server with CSRF Protection

const express = require('express');
const cookieParser = require('cookie-parser');
const csrf = require('csurf');
const bodyParser = require('body-parser');

const app = express();

// Middleware
app.use(bodyParser.json());
app.use(cookieParser());

// CSRF protection middleware
const csrfProtection = csrf({ 
  cookie: { 
    key: 'XSRF-TOKEN',
    sameSite: 'strict',
    httpOnly: false // Allows JavaScript to read this cookie
  }
});

// Apply CSRF protection to state-changing routes
app.get('/api/csrf-token', csrfProtection, (req, res) => {
  // Send CSRF token to the client
  res.json({ csrfToken: req.csrfToken() });
});

app.post('/api/users', csrfProtection, (req, res) => {
  // The request will be rejected automatically if the CSRF token is missing or invalid
  // Process user creation...
  res.json({ success: true, message: 'User created successfully' });
});

app.put('/api/users/:id', csrfProtection, (req, res) => {
  // Update user...
  res.json({ success: true, message: 'User updated successfully' });
});

app.delete('/api/users/:id', csrfProtection, (req, res) => {
  // Delete user...
  res.json({ success: true, message: 'User deleted successfully' });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

FAQs

1. Will Chrome allow making a cross-origin request directly (as in a CSRF attack)

Yes, Chrome (and all browsers) will allow the request to be sent — but there are important distinctions depending on the type of request and whether it's readable by JavaScript.

Let’s separate two key cases:
1. CSRF-style requests using HTML (e.g., <img>, <form>, <script>)

These do not trigger CORS.
The browser sends cookies along with the request automatically (as long as the cookie is not SameSite=Strict).
The attacker cannot read the response — but that’s irrelevant for CSRF because the attack is about doing something (e.g., transferring money), not reading the result.

2. Cross-origin requests using JavaScript (fetch, XMLHttpRequest)
These do trigger CORS, and this is where Chrome (and other browsers) start enforcing strict rules.

Example:

fetch('https://bank.com/api/transfer', {
  method: 'POST',
  credentials: 'include', // sends cookies
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ amount: 1000, to: 'attacker' })
});

The browser will send the request if you explicitly set credentials: 'include'.
But you cannot read the response unless the server responds with proper CORS headers like:

Access-Control-Allow-Origin: https://attacker.com
Access-Control-Allow-Credentials: true

If the server doesn't respond with the right headers, the ** request still goes through*, but JavaScript will **not be able to access the response* — it will throw a CORS error.

Putting it all together:

2. If the XSRF token is stored in the cookies, and cookie is being sent. Why won't this also be sent?

Because in backend, we set sameSite: strict, so this cookie is not sent by default until made from the same origin.

// CSRF protection middleware
const csrfProtection = csrf({ 
  cookie: { 
    key: 'XSRF-TOKEN',
    sameSite: 'strict',
    httpOnly: false // Allows JavaScript to read this cookie
  }
});

Conclusion

The Fetch API requires manual CSRF protection implementation through custom code, while Axios offers this security feature out-of-the-box through simple configuration options—a significant advantage for development teams without dedicated security specialists and a key consideration when choosing between these HTTP client options.

Thank you for reading! Please check out my other articles for more insights on web development technologies and security best practices.

Understanding Fetch and Axios : Never to look back again

Saurabh Raj — Sun, 20 Apr 2025 13:59:27 +0000

Axios vs Fetch: A Deep Dive into Modern HTTP Request Handling in JavaScript

Making HTTP requests is a fundamental part of modern web development, enabling communication between the client (like a web browser) and a server. JavaScript provides several ways to achieve this, with the native Fetch API and the popular third-party library Axios being two of the most common choices.

This article provides an in-depth look at both Fetch and Axios, exploring their features, syntax, pros, cons, and key differences. You'll also find practical examples and guidance on which tool is better suited for different scenarios.

1. The Fetch API

The Fetch API is a modern, powerful, and flexible interface built into most modern web browsers (and available in Node.js via packages like node-fetch). It provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses, using Promises for handling asynchronous operations.

Core Concepts

Promises: Fetch returns a Promise that resolves to the Response object, representing the result of the request.
Request and Response Objects: Fine-grained control over the request/response, including headers, status, and body.
Headers Object: Allows setting and reading HTTP headers.
Body Mixin: Shared functionality in both Request and Response objects, including methods like .json(), .text(), .blob(), etc., which return Promises.

Real Use Cases for Body Mixin

1. Inspecting or Cloning Request Bodies

const originalRequest = new Request('/api/submit', {
  method: 'POST',
  body: JSON.stringify({ name: 'Ali' }),
  headers: { 'Content-Type': 'application/json' }
});

const copy = originalRequest.clone();
copy.text().then(console.log); // Logs: {"name":"Ali"}

2. Reading Request Body in Middleware (e.g., Service Worker)

self.addEventListener('fetch', (event) => {
  const req = event.request.clone();

  req.json().then(data => {
    console.log('Intercepted request body:', data);
  });
});

2. Basic Usage of Fetch

GET Request

fetch('https://api.example.com/users')
  .then(response => {
    if (!response.ok) {
      throw new Error(\`HTTP error! status: \${response.status}\`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

POST Request

const userData = { name: 'John Doe', email: 'john.doe@example.com' };

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_TOKEN'
  },
  body: JSON.stringify(userData)
})
.then(response => {
  if (!response.ok) {
    throw new Error(\`HTTP error! status: \${response.status}\`);
  }
  return response.json();
})
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));

3. Error Handling in Fetch

Network Errors: Only network errors (e.g., no internet) cause the Promise to reject.
HTTP Errors (404, 500, etc.): These don’t reject the Promise. You need to manually check response.ok.

4. Request Cancellation with `AbortController`

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', err);
    }
  });

controller.abort();

5. Browser Compatibility

Fetch is supported in all modern browsers (Chrome, Firefox, Safari, Edge). Polyfills are required for Internet Explorer.

6. Pros and Cons of Fetch

Pros

Native: No need to install anything; built into modern browsers.
Flexible: Full control over low-level HTTP features.
Promise-based: Works well with async/await.

Cons

Verbose Error Handling
JSON Handling Requires Two Steps
No Built-in Interceptors

const originalFetch = window.fetch;

window.fetch = async (...args) => {
  console.log('Fetching:', args[0]);
  const response = await originalFetch(...args);
  console.log('Response:', response);
  return response;
};

No Built-in Timeout

function fetchWithTimeout(url, timeout = 5000) {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), timeout);

  return fetch(url, { signal: controller.signal })
    .finally(() => clearTimeout(timer));
}

Alternate using Promise.race:

function fetchWithTimeout(url, timeout = 5000) {
  const timeoutPromise = new Promise((_, reject) =>
    setTimeout(() => reject(new Error('Request timed out')), timeout)
  );

  return Promise.race([
    fetch(url),
    timeoutPromise
  ]);
}

No Built-in XSRF Protection

Conclusion

While the Fetch API is modern and flexible, it lacks features like request/response interceptors, progress tracking, and built-in timeout/XSRF protection. For simple use cases, it's perfect. But for advanced needs like upload tracking, retry logic, or global error handling, a library like Axios may be more appropriate.

In part 2 of this series, we’ll cover Axios, compare it head-to-head with Fetch, and help you decide which one fits your project best.

2. Axios

Axios is a popular, feature-rich, Promise-based HTTP client library that works in both the browser and Node.js environments. It simplifies many common tasks associated with making HTTP requests.

Core Features

Promise-based: Uses Promises, compatible with async/await.
Automatic JSON Transformation: Automatically stringifies request data and parses response data to JSON.
Request and Response Interceptors: Allows you to intercept requests or responses before they are handled by then or catch. Useful for logging, adding headers, or handling errors globally.
Error Handling: Throws errors for bad HTTP statuses (4xx, 5xx), simplifying error handling.
Request Cancellation: Supports request cancellation using a cancel token (similar to AbortController).
Client-side XSRF Protection: Offers built-in support.
Timeout Configuration: Easy to set request timeouts.
Wider Browser Compatibility: Handles browser inconsistencies and provides support for older browsers (using XMLHttpRequest internally).
Upload/Download Progress: Provides progress tracking capabilities.

Basic Usage (GET Request)

import axios from 'axios'; // Or use a CDN link in HTML

axios.get('https://api.example.com/users')
  .then(response => {
    // Data is directly available in response.data
    console.log(response.data);
    console.log('Status:', response.status);
  })
  .catch(error => {
    // Handles both network errors and HTTP errors (4xx, 5xx)
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.error('Error data:', error.response.data);
      console.error('Error status:', error.response.status);
      console.error('Error headers:', error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      console.error('Error request:', error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.error('Error message:', error.message);
    }
    console.error('Error config:', error.config);
  });

Making Other Requests (POST, PUT, DELETE)

Axios provides convenience methods (axios.post, axios.put, axios.delete) and a general axios(config) method.

// POST Request Example
const userData = { name: 'Jane Doe', email: 'jane.doe@example.com' };

axios.post('https://api.example.com/users', userData, {
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN'
  },
  timeout: 5000 // Example: Set timeout to 5 seconds
})
.then(response => {
  console.log('Success:', response.data);
})
.catch(error => {
  console.error('Error:', error.message);
  // Detailed error handling as shown in the GET example
});

// Alternative using the config object
axios({
  method: 'put',
  url: 'https://api.example.com/users/1',
  data: { name: 'Jane Smith' }
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

Interceptors

Interceptors allow you to run code globally before requests are sent or before responses are processed.

// Add a request interceptor
axios.interceptors.request.use(config => {
  // Do something before request is sent (e.g., add auth token)
  console.log('Sending request to:', config.url);
  const token = localStorage.getItem('authToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  // Do something with request error
  return Promise.reject(error);
});

// Add a response interceptor
axios.interceptors.response.use(response => {
  // Any status code that lie within the range of 2xx cause this function to trigger
  // Do something with response data
  console.log('Received response status:', response.status);
  return response;
}, error => {
  // Any status codes that falls outside the range of 2xx cause this function to trigger
  // Do something with response error (e.g., global error handling)
  if (error.response && error.response.status === 401) {
    console.error('Unauthorized! Redirecting to login...');
    // window.location.href = '/login';
  }
  return Promise.reject(error);
});

// Now any axios request will use these interceptors
axios.get('/some-protected-resource')
  .then(response => {/* ... */});

Error Handling

Axios automatically rejects the promise for status codes outside the 2xx range. The error object in the .catch block provides detailed information in error.response, error.request, or error.message.

Request Cancellation

Axios uses a CancelToken source.

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('https://api.example.com/data', {
  cancelToken: source.token
})
.then(response => console.log(response.data))
.catch(thrown => {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled:', thrown.message);
  } else {
    // handle error
    console.error('Axios error:', thrown);
  }
});

// Cancel the request (example: request is cancelled after 1 second)
// setTimeout(() => {
//   source.cancel('Operation canceled by the user.');
// }, 1000);

Pros of Axios

Ease of Use: Simpler API for common tasks like JSON handling and error checking.
Interceptors: Powerful mechanism for global request/response manipulation.
Automatic JSON Handling: Reduces boilerplate code.
Better Error Handling: Rejects promises on HTTP error statuses (4xx, 5xx) by default.
Built-in XSRF Protection: Provides client-side support.
Timeout Configuration: Simple option to set request timeouts.
Upload/Download Progress: Built-in support.
Wider Browser Compatibility: Works in older browsers without requiring manual polyfills for basic functionality.
Node.js Support: Works seamlessly in both browser and Node.js environments.

Cons of Axios

External Library: Adds a dependency to your project, increasing bundle size (though often negligibly small).
Slightly Less "Standard": While popular, it's not a built-in browser standard like Fetch.

3. Fetch vs. Axios: Key Differences Summarized

Feature	Fetch API	Axios
Source	Built-in browser API (requires polyfill for old browsers)	Third-party library (install via npm/yarn or CDN)
Promise Rejection	Only on network error. HTTP errors (4xx, 5xx) resolve successfully. Requires manual check.	On network error AND HTTP errors (4xx, 5xx) by default.
JSON Handling	Two-step process: `fetch().then(res => res.json())`	Automatic request/response transformation. Data in `response.data`.
Request Data	Body needs manual stringification (e.g., `JSON.stringify()`).	Automatically stringifies data (if object).
Headers	Use `Headers` object or plain object. `Content-Type` often needs manual setting.	Set via `headers` config. Often sets `Content-Type` automatically.
Interceptors	No built-in support.	Yes, for both request and response.
Timeout	No built-in support. Requires `AbortController` + `setTimeout`.	Built-in timeout config option.
Cancellation	Uses `AbortController`.	Uses `CancelToken` (older API) or `AbortController` (newer versions).
XSRF Protection	Manual implementation required.	Built-in client-side support.
Progress Tracking	No built-in support for upload/download.	Built-in support for upload/download progress.
Browser Support	Modern browsers. Requires polyfills for older ones (IE).	Wider compatibility, uses `XMLHttpRequest` internally.
Node.js Support	Requires `node-fetch` or similar package.	Works out-of-the-box.
Bundle Size	None (if native support used).	Adds library size to the bundle.

In short, choose Fetch if you prefer a built-in browser standard and want minimal dependencies, especially for simpler tasks. Choose Axios if you need more features like interceptors, easier error handling, timeouts, and better compatibility, especially for larger projects.

Learn AbortController with Examples - Never to look back again

Saurabh Raj — Sun, 20 Apr 2025 13:38:34 +0000

In modern JavaScript development, managing asynchronous tasks such as data fetching, animations, timeouts, or user interactions can be challenging. One elegant solution introduced for managing these tasks, particularly for graceful cancellation, is the AbortController API. Although introduced in 2017, many developers are still unfamiliar with its full capabilities. This article provides a thorough understanding of AbortController—what it is, how it functions, and appropriate use cases.

What is AbortController?

AbortController is a built-in JavaScript API that lets you cancel asynchronous operations like fetch() before they complete.

It works in tandem with an AbortSignal, which is passed to async functions like fetch(). When AbortController.abort() is called, the linked signal is marked as aborted, triggering any listeners or checks on that signal.

Core concept

You create an AbortController instance, pass its signal to the task, and invoke .abort() whenever cancellation is required.

Basic Usage with fetch()

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', err);
    }
  });

// Abort the fetch after 2 seconds
setTimeout(() => controller.abort(), 2000);

Understanding the Components

1. AbortController:

An object created to control cancellation.
Provides the method abort().

2. AbortSignal:

Accessible as controller.signal.
Passed to asynchronous operations.
Emits an abort event when abort() is called.

Real-World Use Cases

1. 1. Search Suggestions (Live Typing)

let controller;

function search(query) {
  if (controller) controller.abort();
  controller = new AbortController();

  fetch(`/api/search?q=${query}`, { signal: controller.signal })
    .then(res => res.json())
    .then(showResults)
    .catch(err => {
      if (err.name !== 'AbortError') console.error(err);
    });
}

2. React Cleanup in useEffect()

useEffect(() => {
  const controller = new AbortController();

  fetch('/api/user', { signal: controller.signal })
    .then(res => res.json())
    .then(setUserData);

  return () => controller.abort(); // Clean up
}, []);

3. Cancelable Timeout

function delay(ms, signal) {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(resolve, ms);
    signal.addEventListener('abort', () => {
      clearTimeout(timer);
      reject(new Error('Aborted'));
    });
  });
}

const controller = new AbortController();
delay(5000, controller.signal)
  .then(() => console.log('Done'))
  .catch(console.error);
controller.abort(); // Cancel the delay

Browser & Library Support

All modern browsers (Chrome, Firefox, Safari, Edge).
Node.js (version 15 and above or through polyfills).
Libraries such as Axios (version 1.1 and above) support AbortController via the signal property.

Pro Tips

Always verify signal.aborted before initiating long-running tasks.
Use signal.addEventListener('abort', ...) for customized asynchronous logic.
Aborting a signal only impacts operations that actively listen for it.

Summary

The AbortController API provides an effective method for cancelling asynchronous tasks in JavaScript. Whether managing fetch() requests, timeouts, or complex application logic, incorporating AbortController results in cleaner, more efficient, and responsive code. If you have not yet adopted this API, consider integrating it into your development practices today.

Thank you very for reading this article through the end. Please leave a like, if it helped you and do checkout my other articles in Never to look back series.

Mastering Infinite Scroll in JS and React with optimisation techniques - Never to look back again

Saurabh Raj — Sat, 12 Apr 2025 09:22:47 +0000

Introduction

In today's digital landscape, users expect seamless browsing experiences that don't interrupt their content consumption. Infinite scroll has emerged as a powerful pattern that keeps users engaged by automatically loading new content as they scroll to the bottom of a page. In this guide, we'll explore different approaches to implementing infinite scroll, from vanilla JavaScript to React, along with optimization techniques to ensure smooth performance.

What is Infinite Scroll?

Infinite scroll is a web design technique that loads content continuously as the user scrolls down, eliminating the need for pagination. Instead of clicking "next page" buttons, users simply keep scrolling, and new content appears automatically. This creates a frictionless experience that encourages longer engagement with your content.

Popular platforms like Instagram, Twitter, and Facebook have popularised this pattern for good reason—it keeps users in a continuous flow state while browsing.

Understanding the Building Blocks

Before we dive into implementation, let's understand the key components that make infinite scroll work:

Scroll detection: Identifying when a user has reached or approached the bottom of the page.
Content fetching: Loading new data, typically through an API call.
DOM manipulation: Adding the new content to the existing page.
Performance optimization: Ensuring the page remains responsive, even with large amounts of content.

Vanilla JavaScript Implementation

Let's start with a pure JavaScript approach, which helps understand the core mechanics before moving to frameworks.

1. Using the Intersection Observer API

The Intersection Observer API provides an elegant way to detect when an element enters the viewport. It's perfect for infinite scroll because it's more performant than traditional scroll event listeners:

// First, create an element that we'll observe
const loadingElement = document.createElement('div');
loadingElement.id = 'loading-indicator';
loadingElement.textContent = 'Loading more content...';
document.body.appendChild(loadingElement);

// Set up our observer options
const options = {
  root: null, // Use the viewport as root
  rootMargin: '0px 0px 200px 0px', // Trigger 200px before the element is visible
  threshold: 0.1 // Trigger when 10% of the element is visible
};

// Create the observer
let page = 1;
let isLoading = false;
const observer = new IntersectionObserver((entries) => {
  const entry = entries[0];

  if (entry.isIntersecting && !isLoading) {
    loadMoreContent();
  }
}, options);

// Start observing the loading element
observer.observe(loadingElement);

// Function to load more content
async function loadMoreContent() {
  try {
    isLoading = true;

    // Fetch new data (in a real app, this would be an API call)
    const response = await fetch(`/api/content?page=${page}`);
    const newItems = await response.json();

    if (newItems.length === 0) {
      // No more items to load
      observer.disconnect();
      loadingElement.textContent = 'No more content';
      return;
    }

    // Add the new items to the page
    const contentContainer = document.getElementById('content');
    newItems.forEach(item => {
      const itemElement = document.createElement('div');
      itemElement.classList.add('item');
      itemElement.innerHTML = `
        <h2>${item.title}</h2>
        <p>${item.description}</p>
      `;
      contentContainer.appendChild(itemElement);
    });

    // Update page counter and reset loading state
    page++;
    isLoading = false;
  } catch (error) {
    console.error('Error loading content:', error);
    isLoading = false;
  }
}

This approach is clean and efficient because:

The Intersection Observer doesn't fire on every scroll event, only when the observed element enters or exits the viewport.
We can control when the loading begins with the rootMargin property, triggering the load before the user actually reaches the bottom.

2. The Classic Scroll Event Approach

Before Intersection Observer, developers relied on the scroll event. While less efficient, you might still need this approach for broader browser compatibility:

let page = 1;
let isLoading = false;
let hasMoreContent = true;
const loadingElement = document.getElementById('loading-indicator');

// Debounce function to limit scroll event firing
function debounce(func, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, arguments), delay);
  };
}

// Check if we need to load more content
function checkScroll() {
  if (isLoading || !hasMoreContent) return;

  const scrollPosition = window.scrollY + window.innerHeight;
  const documentHeight = document.documentElement.scrollHeight;

  // If we're close to the bottom of the page
  if (documentHeight - scrollPosition < 200) {
    loadMoreContent();
  }
}

// Add the scroll listener with debounce
window.addEventListener('scroll', debounce(checkScroll, 100));

// Initial check in case the page isn't tall enough to scroll
checkScroll();

The key differences with this approach:

We're manually calculating scroll position relative to page height.
We need to debounce the scroll event to prevent performance issues.
It's generally more CPU-intensive than Intersection Observer.

React Implementation: Declarative Infinite Scrolling

React's component-based approach allows for more declarative implementations of infinite scroll. Here's how to build a reusable infinite scroll component:

import React, { useState, useEffect, useRef, useCallback } from 'react';

function InfiniteScroll({ fetchData, renderItem }) {
  const [items, setItems] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const observer = useRef();

  // Set up the loading element ref using useCallback to avoid unnecessary re-creation
  const lastElementRef = useCallback(node => {
    if (loading) return;

    if (observer.current) observer.current.disconnect();

    observer.current = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting && hasMore) {
        loadMore();
      }
    });

    if (node) observer.current.observe(node);
  }, [loading, hasMore]);

  // Function to load more data
  const loadMore = async () => {
    if (loading || !hasMore) return;

    setLoading(true);

    try {
      const newItems = await fetchData(page);

      if (newItems.length === 0) {
        setHasMore(false);
      } else {
        setItems(prevItems => [...prevItems, ...newItems]);
        setPage(prevPage => prevPage + 1);
      }
    } catch (error) {
      console.error('Error loading more items:', error);
    } finally {
      setLoading(false);
    }
  };

  // Load initial data
  useEffect(() => {
    loadMore();

    // Clean up observer on unmount
    return () => {
      if (observer.current) {
        observer.current.disconnect();
      }
    };
  }, []);

  return (
    <div className="infinite-scroll-container">
      <div className="items-list">
        {items.map((item, index) => {
          // Add ref to last element
          if (items.length - 1 === index) {
            return (
              <div ref={lastElementRef} key={item.id}>
                {renderItem(item)}
              </div>
            );
          } else {
            return <div key={item.id}>{renderItem(item)}</div>;
          }
        })}
      </div>

      {loading && (
        <div className="loading-indicator">
          <div className="spinner"></div>
          <p>Loading more content...</p>
        </div>
      )}

      {!hasMore && !loading && (
        <div className="end-message">
          <p>You've reached the end!</p>
        </div>
      )}
    </div>
  );
}

export default InfiniteScroll;

Using with Custom Hooks

We can extract the logic into a custom hook for better reusability:

import { useState, useEffect, useRef, useCallback } from 'react';

export function useInfiniteScroll(fetchCallback, options = {}) {
  const { initialPage = 1, threshold = '200px' } = options;

  const [items, setItems] = useState([]);
  const [page, setPage] = useState(initialPage);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [error, setError] = useState(null);

  // Create the observer ref
  const observer = useRef();

  // Reset function
  const reset = useCallback(() => {
    setItems([]);
    setPage(initialPage);
    setLoading(false);
    setHasMore(true);
    setError(null);
  }, [initialPage]);

  // Load more function
  const loadMore = useCallback(async () => {
    if (loading || !hasMore) return;

    setLoading(true);
    setError(null);

    try {
      const result = await fetchCallback(page);
      const newItems = result.items || result;

      if (newItems.length === 0 || (result.hasMore === false)) {
        setHasMore(false);
      } else {
        setItems(prev => [...prev, ...newItems]);
        setPage(prev => prev + 1);
      }
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
    }
  }, [fetchCallback, page, loading, hasMore]);

  // The ref callback for the last element
  const lastElementRef = useCallback(node => {
    if (loading) return;

    if (observer.current) observer.current.disconnect();

    observer.current = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting && hasMore) {
        loadMore();
      }
    }, {
      rootMargin: `0px 0px ${threshold} 0px`
    });

    if (node) observer.current.observe(node);
  }, [loading, hasMore, threshold, loadMore]);

  // Initial load effect
  useEffect(() => {
    loadMore();

    return () => {
      if (observer.current) {
        observer.current.disconnect();
      }
    };
  }, []);

  return {
    items,
    loading,
    hasMore,
    error,
    loadMore,
    reset,
    lastElementRef
  };
}

Advanced Optimization Techniques

As your infinite scroll implementation grows, optimization becomes crucial. Here are some advanced techniques to keep your application running smoothly.

1. Virtualized Lists for Large Datasets

When dealing with hundreds or thousands of items, rendering them all to the DOM can severely impact performance. Virtualization renders only the items currently visible in the viewport, plus a small buffer.

In React, libraries like react-window and react-virtualized make this easy:

import React from 'react';
import { FixedSizeList } from 'react-window';
import InfiniteLoader from 'react-window-infinite-loader';

function VirtualizedInfiniteScroll({ items, hasMore, loadMore, isItemLoaded }) {
  // Item renderer
  const Item = ({ index, style }) => {
    if (!isItemLoaded(index)) {
      return (
        <div style={style} className="loading-item">
          <div className="skeleton-loader"></div>
        </div>
      );
    }

    const item = items[index];
    return (
      <div style={style} className="list-item">
        <h3>{item.title}</h3>
        <p>{item.description}</p>
      </div>
    );
  };

  return (
    <InfiniteLoader
      isItemLoaded={isItemLoaded}
      itemCount={hasMore ? items.length + 1 : items.length}
      loadMoreItems={loadMore}
    >
      {({ onItemsRendered, ref }) => (
        <FixedSizeList
          ref={ref}
          height={500}
          width="100%"
          itemCount={hasMore ? items.length + 1 : items.length}
          itemSize={150}
          onItemsRendered={onItemsRendered}
        >
          {Item}
        </FixedSizeList>
      )}
    </InfiniteLoader>
  );
}

Key benefits of virtualization:

Drastically reduces DOM elements (from potentially thousands to just a few dozen).
Improves scrolling performance and reduces memory usage.
Prevents layout thrashing when rendering large lists.

2. Implementing Cursor-Based Pagination

Instead of using page numbers, cursor-based pagination uses a "pointer" to the last item fetched. This is more robust and efficient, especially for dynamic data:

async function fetchItems(cursor = null, limit = 20) {
  const url = new URL('/api/items', window.location.origin);

  // Add parameters
  url.searchParams.append('limit', limit);
  if (cursor) {
    url.searchParams.append('cursor', cursor);
  }

  const response = await fetch(url);
  const data = await response.json();

  return {
    items: data.items,
    nextCursor: data.nextCursor,
    hasMore: Boolean(data.nextCursor)
  };
}

Benefits of cursor-based pagination:

Handles insertions and deletions gracefully (unlike offset pagination).
More efficient database queries (using indexed lookups instead of offsets).
Prevents duplicate items when new content is added during pagination.

3. Implementing DOM Cleanup for Long Sessions

For very long scrolling sessions, the DOM can become bloated with off-screen content. Implementing a cleanup strategy keeps memory usage in check:

function InfiniteScrollWithCleanup() {
  const [visibleItems, setVisibleItems] = useState([]);
  const [allItems, setAllItems] = useState([]);
  const [visibleRange, setVisibleRange] = useState({ start: 0, end: 20 });
  const containerRef = useRef(null);

  // Load more items function (similar to previous examples)

  // Handle scroll to update visible range
  const handleScroll = useCallback(() => {
    if (!containerRef.current) return;

    const { scrollTop, clientHeight } = containerRef.current;
    const itemHeight = 150; // Approximate height of each item
    const bufferSize = 5; // Number of items to keep before and after viewport

    // Calculate which items should be visible
    const start = Math.max(0, Math.floor(scrollTop / itemHeight) - bufferSize);
    const end = Math.min(
      allItems.length - 1,
      Math.ceil((scrollTop + clientHeight) / itemHeight) + bufferSize
    );

    // Update visible range
    setVisibleRange({ start, end });
  }, [allItems.length]);

  // When visible range changes, update visible items
  useEffect(() => {
    const itemsToRender = allItems.slice(visibleRange.start, visibleRange.end + 1);
    setVisibleItems(itemsToRender);
  }, [visibleRange, allItems]);

  // Set up scroll listener
  useEffect(() => {
    const container = containerRef.current;
    if (container) {
      container.addEventListener('scroll', handleScroll);
      return () => container.removeEventListener('scroll', handleScroll);
    }
  }, [handleScroll]);

  return (
    <div
      ref={containerRef}
      style={{ height: '600px', overflow: 'auto' }}
    >
      {/* Container with full height */}
      <div style={{ height: `${allItems.length * 150}px`, position: 'relative' }}>
        {/* Only render visible items */}
        {visibleItems.map(item => (
          <div
            key={item.id}
            style={{
              position: 'absolute',
              top: `${allItems.findIndex(i => i.id === item.id) * 150}px`,
              height: '150px',
              width: '100%'
            }}
          >
            <h3>{item.title}</h3>
            <p>{item.description}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

The benefits of this approach:

Keeps the DOM light by removing off-screen elements.
Maintains correct scroll position using absolute positioning.
Significantly improves performance for very long lists.

Enhancing User Experience

A great infinite scroll implementation goes beyond just loading content. Here are some UX enhancements to consider:

1. Skeleton Loading States

Show placeholder content while items are loading:

function SkeletonLoader() {
  return (
    <div className="skeleton-item">
      <div className="skeleton-title"></div>
      <div className="skeleton-text"></div>
      <div className="skeleton-text"></div>
    </div>
  );
}

// In your component
{loading && Array.from({ length: 3 }).map((_, i) => (
  <SkeletonLoader key={`skeleton-${i}`} />
))}

Add some CSS animation:

.skeleton-item {
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 4px;
  background: #f8f8f8;
}

.skeleton-title {
  height: 24px;
  background: linear-gradient(90deg, #eee 0%, #f5f5f5 50%, #eee 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 10px;
}

.skeleton-text {
  height: 16px;
  background: linear-gradient(90deg, #eee 0%, #f5f5f5 50%, #eee 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 8px;
  width: 80%;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

2. Scroll Position Recovery

Maintain scroll position after browser refresh or navigating back:

// Save scroll position before unloading
useEffect(() => {
  const handleBeforeUnload = () => {
    sessionStorage.setItem('scrollPosition', window.scrollY.toString());
    sessionStorage.setItem('items', JSON.stringify(items));
  };

  window.addEventListener('beforeunload', handleBeforeUnload);
  return () => window.removeEventListener('beforeunload', handleBeforeUnload);
}, [items]);

// Restore position on mount
useEffect(() => {
  const savedPosition = sessionStorage.getItem('scrollPosition');
  const savedItems = sessionStorage.getItem('items');

  if (savedItems) {
    setItems(JSON.parse(savedItems));
  }

  if (savedPosition) {
    window.scrollTo(0, parseInt(savedPosition, 10));
  }
}, []);

3. Pull-to-Refresh for Mobile

Add pull-to-refresh functionality for mobile users:

function PullToRefresh({ onRefresh, children }) {
  const [isPulling, setIsPulling] = useState(false);
  const [pullDistance, setPullDistance] = useState(0);
  const startY = useRef(0);
  const containerRef = useRef(null);

  const handleTouchStart = (e) => {
    // Only enable pull-to-refresh at the top of the page
    if (window.scrollY === 0) {
      startY.current = e.touches[0].clientY;
    }
  };

  const handleTouchMove = (e) => {
    if (startY.current === 0 || window.scrollY > 0) return;

    const currentY = e.touches[0].clientY;
    const distance = currentY - startY.current;

    // Only allow pulling down
    if (distance > 0) {
      setPullDistance(distance * 0.5); // Resistance factor
      setIsPulling(true);
      e.preventDefault();
    }
  };

  const handleTouchEnd = async () => {
    if (pullDistance > 70) {
      // Enough distance to trigger refresh
      try {
        await onRefresh();
      } catch (error) {
        console.error('Refresh failed:', error);
      }
    }

    // Reset state
    setPullDistance(0);
    setIsPulling(false);
    startY.current = 0;
  };

  return (
    <div
      ref={containerRef}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
      style={{ transform: `translateY(${pullDistance}px)` }}
    >
      {isPulling && (
        <div 
          className="pull-indicator"
          style={{ 
            height: '60px', 
            opacity: Math.min(pullDistance / 70, 1) 
          }}
        >
          {pullDistance > 70 ? 'Release to refresh' : 'Pull to refresh'}
        </div>
      )}
      {children}
    </div>
  );
}

Common Pitfalls and How to Avoid Them

Even with careful implementation, infinite scroll can introduce challenges:

1. SEO Considerations

Infinite scroll can be problematic for search engines. Consider these solutions:

Implement hybrid pagination/infinite scroll where each "page" has a unique URL.
Use the History API to update the URL as content loads.
Create a sitemap with links to all content pages.
Implement server-side rendering for initial content.

2. Memory Leaks

Long browsing sessions can lead to memory issues:

Implement DOM cleanup as discussed earlier.
Use virtualization for very large lists.
Properly clean up event listeners and observers in useEffect cleanup functions.
Profile your application to identify memory issues.

3. Accessibility Concerns

Infinite scroll can be challenging for users with disabilities:

Add keyboard navigation support.
Include a visible loading indicator with ARIA attributes.
Provide a "Skip to content" option.
Consider adding a traditional pagination option as an alternative.

Conclusion: The Most Elegant Approach

The most elegant infinite scroll implementation combines several approaches:

Use Intersection Observer for efficient scroll detection.
Implement virtualization for large datasets to keep the DOM light.
Utilize cursor-based pagination for robust data fetching.
Add DOM cleanup for lengthy browsing sessions.
Enhance with user experience features like skeleton loading and scroll position recovery.
Address accessibility concerns to create an inclusive experience.

Here's a simplified example of what this might look like in a React application:

import React, { useState, useCallback } from 'react';
import { FixedSizeList } from 'react-window';
import InfiniteLoader from 'react-window-infinite-loader';
import SkeletonLoader from './SkeletonLoader';

function ElegantInfiniteScroll() {
  const [items, setItems] = useState([]);
  const [cursor, setCursor] = useState(null);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);

  // Fetch items with cursor pagination
  const loadMoreItems = useCallback(async () => {
    if (loading || !hasMore) return;

    setLoading(true);

    try {
      const response = await fetch(`/api/items?cursor=${cursor || ''}`);
      const data = await response.json();

      setItems(prev => [...prev, ...data.items]);
      setCursor(data.nextCursor);
      setHasMore(Boolean(data.nextCursor));
    } catch (error) {
      console.error('Error loading items:', error);
    } finally {
      setLoading(false);
    }
  }, [cursor, loading, hasMore]);

  // Check if an item at a given index is loaded
  const isItemLoaded = index => index < items.length;

  // Render an individual item
  const ItemRenderer = ({ index, style }) => {
    if (!isItemLoaded(index)) {
      return (
        <div style={style}>
          <SkeletonLoader />
        </div>
      );
    }

    const item = items[index];

    return (
      <div style={style} className="item">
        <h3>{item.title}</h3>
        <p>{item.description}</p>
      </div>
    );
  };

  return (
    <div className="infinite-scroll-container">
      <h1>Elegant Infinite Scroll</h1>

      <InfiniteLoader
        isItemLoaded={isItemLoaded}
        itemCount={hasMore ? items.length + 1 : items.length}
        loadMoreItems={loadMoreItems}
        threshold={5}
      >
        {({ onItemsRendered, ref }) => (
          <FixedSizeList
            ref={ref}
            height={600}
            width="100%"
            itemCount={hasMore ? items.length + 1 : items.length}
            itemSize={150}
            onItemsRendered={onItemsRendered}
          >
            {ItemRenderer}
          </FixedSizeList>
        )}
      </InfiniteLoader>

      {!hasMore && (
        <div className="end-message">
          <p>You've reached the end of the content!</p>
        </div>
      )}
    </div>
  );
}

export default ElegantInfiniteScroll;

By combining these techniques, you can create an infinite scroll implementation that's performant, accessible, and provides an excellent user experience. The key is to understand your specific use case and apply the right combination of these approaches to meet your needs.

Remember that infinite scroll isn't always the best solution—sometimes traditional pagination is more appropriate, especially for content where users might want to return to a specific position. Choose the right tool for your specific user experience needs.

Mastering Browser Dimension Properties (clientWidth, offsetWidth etc): Never to look back again

Saurabh Raj — Fri, 11 Apr 2025 16:54:51 +0000

Introduction

When working with web development, understanding how to measure and manipulate elements in the browser can be confusing. Properties like innerHeight, clientHeight, scrollHeight, and others have subtle but important differences. In this article, we'll demystify these properties and provide clear examples of when to use each one.

1. Window Properties

Let's start with the properties of the window object that help us understand the browser viewport.

`window.innerHeight` and `window.innerWidth`

These properties give you the height and width of the browser's viewport (the visible area where your content displays), including scrollbars:

window.innerHeight: The interior height of the browser window in pixels
window.innerWidth: The interior width of the browser window in pixels

// Get the viewport dimensions
const viewportHeight = window.innerHeight;
const viewportWidth = window.innerWidth;

console.log(`Viewport: ${viewportWidth}px × ${viewportHeight}px`);

`window.outerHeight` and `window.outerWidth`

These measure the entire browser window, including toolbars, scrollbars, and other browser UI elements:

window.outerHeight: The total height of the browser window
window.outerWidth: The total width of the browser window

// Get the dimensions of the entire browser window
const windowHeight = window.outerHeight;
const windowWidth = window.outerWidth;

console.log(`Browser window: ${windowWidth}px × ${windowHeight}px`);

`window.scrollX` and `window.scrollY`

These properties tell you how many pixels the document has been scrolled:

window.scrollX: Horizontal scroll position (pixels scrolled from the left)
window.scrollY: Vertical scroll position (pixels scrolled from the top)

// Track scroll position
window.addEventListener('scroll', () => {
  console.log(`Scrolled: ${window.scrollX}px horizontally, ${window.scrollY}px vertically`);
});

`window.screen` Properties

The screen object provides information about the user's screen (not just the browser):

screen.width and screen.height: Total screen dimensions
screen.availWidth and screen.availHeight: Available screen space excluding system UI elements

console.log(`Screen: ${screen.width}px × ${screen.height}px`);
console.log(`Available screen: ${screen.availWidth}px × ${screen.availHeight}px`);

2. Element Properties

Now let's look at the properties that can be used to measure HTML elements.

`element.clientHeight` and `element.clientWidth`

These properties measure the inner dimensions of an element:

Include: padding
Exclude: borders, margins, and scrollbars

const box = document.getElementById('myBox');
console.log(`Inner content area: ${box.clientWidth}px × ${box.clientHeight}px`);

`element.offsetHeight` and `element.offsetWidth`

These properties measure the outer dimensions of an element:

Include: padding, borders, and scrollbars
Exclude: margins

const box = document.getElementById('myBox');
console.log(`Element with borders: ${box.offsetWidth}px × ${box.offsetHeight}px`);

`element.scrollHeight` and `element.scrollWidth`

These properties measure the total size of an element's content, including parts that are not visible due to overflow:

element.scrollHeight: The minimum height the element would need to fit all content without using a vertical scrollbar
element.scrollWidth: The minimum width the element would need to fit all content without using a horizontal scrollbar

const container = document.getElementById('scrollableContainer');
console.log(`Total content size: ${container.scrollWidth}px × ${container.scrollHeight}px`);

Note: It doesn't include borders, margins, or scrollbars; it includes the content and any padding.

`element.scrollLeft` and `element.scrollTop`

These properties tell you how much of an element's content is scrolled:

element.scrollLeft: Pixels scrolled from the left of the content
element.scrollTop: Pixels scrolled from the top of the content

const container = document.getElementById('scrollableContainer');
container.addEventListener('scroll', () => {
  console.log(`Element scrolled: ${container.scrollLeft}px from left, ${container.scrollTop}px from top`);
});

`element.getBoundingClientRect()`

This method returns a DOMRect object with properties like top, right, bottom, left, width, height, x, and y that describe the element's size and position relative to the viewport:

const box = document.getElementById('myBox');
const rect = box.getBoundingClientRect();

console.log(`Position relative to viewport: 
  top: ${rect.top}px, 
  right: ${rect.right}px,
  bottom: ${rect.bottom}px, 
  left: ${rect.left}px,
  width: ${rect.width}px, 
  height: ${rect.height}px`);

Practical Examples

Example 1: Detecting if an Element is in the Viewport

function isInViewport(element) {
  const rect = element.getBoundingClientRect();

  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= window.innerHeight &&
    rect.right <= window.innerWidth
  );
}

// Usage
const element = document.getElementById('targetElement');
if (isInViewport(element)) {
  console.log('Element is fully visible in the viewport!');
}

Example 2: Creating an Infinite Scroll

window.addEventListener('scroll', () => {
  // Calculate how far we've scrolled
  const scrolled = window.scrollY;

  // Calculate the total height of the page
  const totalHeight = document.body.scrollHeight;

  // Check if we're near the bottom (within 200px)
  if (scrolled + window.innerHeight >= totalHeight - 200) {
    // Load more content
    loadMoreContent();
  }
});

Example 3: Creating a Custom Scrollbar

function updateCustomScrollbar() {
  const content = document.getElementById('content');
  const scrollTrack = document.getElementById('scrollTrack');
  const scrollThumb = document.getElementById('scrollThumb');

  // Calculate the ratio of visible content to total content
  const visibleRatio = content.clientHeight / content.scrollHeight;

  // Set the scrollThumb height proportionally
  scrollThumb.style.height = `${visibleRatio * 100}%`;

  // Position the thumb based on scroll position
  const scrollPercentage = content.scrollTop / (content.scrollHeight - content.clientHeight);
  const thumbPosition = scrollPercentage * (scrollTrack.clientHeight - scrollThumb.clientHeight);
  scrollThumb.style.top = `${thumbPosition}px`;
}

// Update on scroll and window resize
document.getElementById('content').addEventListener('scroll', updateCustomScrollbar);
window.addEventListener('resize', updateCustomScrollbar);

Example 4: Creating a Sticky Header

const header = document.getElementById('header');
const headerOffset = header.offsetTop;

window.addEventListener('scroll', () => {
  if (window.scrollY >= headerOffset) {
    header.classList.add('sticky');
  } else {
    header.classList.remove('sticky');
  }
});

Example 5: Calculating Percentage Scrolled

function getScrollPercentage() {
  // Calculate the maximum scrollable distance
  const maxScroll = document.documentElement.scrollHeight - window.innerHeight;

  // Calculate current scroll position as percentage
  const percentScrolled = (window.scrollY / maxScroll) * 100;

  return Math.min(100, Math.max(0, percentScrolled));
}

window.addEventListener('scroll', () => {
  const progress = document.getElementById('progressBar');
  progress.style.width = `${getScrollPercentage()}%`;
  console.log(`Page scrolled: ${getScrollPercentage().toFixed(1)}%`);
});

Visual Representation

Here's how these various properties relate to each other for an element:

┌─────────────────────────────── ELEMENT ────────────────────────────────┐
│                                                                         │
│  margin                                                                 │
│  ┌───────────────────────── offsetWidth/Height ──────────────────────┐ │
│  │                                                                    │ │
│  │  border                                                            │ │
│  │  ┌───────────────────── clientWidth/Height ────────────────────┐  │ │
│  │  │                                                              │  │ │
│  │  │  padding                                                     │  │ │
│  │  │  ┌─────────────────── content area ──────────────────────┐  │  │ │
│  │  │  │                                                        │  │  │ │
│  │  │  │                                                        │  │  │ │
│  │  │  │              scrollWidth/Height                        │  │  │ │
│  │  │  │              (if content overflows)                    │  │  │ │
│  │  │  │                                                        │  │  │ │
│  │  │  └────────────────────────────────────────────────────────┘  │  │ │
│  │  │                                                              │  │ │
│  │  └──────────────────────────────────────────────────────────────┘  │ │
│  │                                                                    │ │
│  └────────────────────────────────────────────────────────────────────┘ │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Test Your Understanding

Question: If an element has padding of 20px, a border of 5px, and content that's 200px × 150px, what would its clientHeight and offsetHeight be?
- Answer: clientHeight would be 190px (150px content + 40px padding), and offsetHeight would be 200px (150px content + 40px padding + 10px border).
Question: What's the difference between window.innerHeight and element.clientHeight?
- Answer: window.innerHeight measures the viewport's height including scrollbars, while element.clientHeight measures an element's content area plus padding, excluding borders and scrollbars.
Question: How would you determine if a user has scrolled to the bottom of a page?
- Answer: Compare window.scrollY + window.innerHeight with document.documentElement.scrollHeight. If they're equal or very close, the user is at the bottom.
Question: If an element's scrollHeight is greater than its clientHeight, what does that indicate?
- Answer: It indicates that the element has more content than can be displayed in its visible area, so it's scrollable.
Question: How would you find the absolute position of an element on the page (not just relative to the viewport)?
- Answer: Combine getBoundingClientRect() with the current scroll position: const rect = element.getBoundingClientRect(); const absoluteTop = rect.top + window.scrollY; const absoluteLeft = rect.left + window.scrollX;

Conclusion

Understanding browser dimension properties is crucial for creating responsive, dynamic web applications. Each property serves a specific purpose:

Window properties (innerHeight, innerWidth, etc.) help you understand the viewport.
Element size properties (clientHeight, offsetHeight, scrollHeight, etc.) help you measure different aspects of elements.
Position properties (getBoundingClientRect(), scrollTop, etc.) help you determine where elements are located.

By mastering these properties, you can create more sophisticated user interfaces, implement features like infinite scrolling, sticky elements, and progress indicators, and solve common layout challenges.

Remember that these properties are read-only (except for scrollLeft and scrollTop), so they're used primarily for measurements rather than directly modifying sizes. Use CSS for styling and layout, and these JavaScript properties for measurement and calculations.

Happy coding!

Mastering Priority Queues in C++ - Never to look back again

Saurabh Raj — Fri, 11 Apr 2025 10:30:29 +0000

What is a Priority Queue?

A priority queue in C++ is a special type of container adaptor that stores elements based on their priority rather than in a linear order (like a regular queue). In a priority queue, elements with higher priority are served before elements with lower priority. The priority is typically determined by the comparison logic provided by the user.

How Does Priority Queue Work?

Priority queues are implemented using a heap data structure internally, commonly a binary heap, which allows efficient retrieval of the highest (or lowest) priority element.

Components and Operations of Priority Queue:

1. Declaration:

#include <queue>

// Default: Max priority queue
priority_queue<int> pq;

// Min priority queue
priority_queue<int, vector<int>, greater<int>> pq;

2. Common Operations:

push(): Adds an element to the queue.

pq.push(5);
pq.push(3);
pq.push(8);

pop(): Removes the highest priority element.

pq.pop();

top(): Retrieves the highest priority element.

int highest = pq.top();

empty(): Checks if the queue is empty.

if(pq.empty()){
  cout << "Priority Queue is empty!";
}

size(): Returns the number of elements in the queue.

int n = pq.size();

Understanding Comparators (`greater<int>` and `less<int>`):

greater:

Turns priority queue into a min priority queue.
Mechanism to remember: "greater comparator, smaller element first".
Why does this happen? Internally, the priority queue in C++ uses the comparator to maintain elements in the heap. The greater comparator defines that if the first element is greater than the second, it should appear later in the order. This means the smaller elements will bubble up to the top, making the smallest element have the highest priority.

less:

Turns priority queue into a max priority queue.
Mechanism to remember: "less comparator, larger element first".
Why does this happen? Similar to the greater comparator, less ensures that larger elements come first by pushing the smaller elements down in the heap structure.

Different Ways to Use Priority Queue:

1. Max Priority Queue (Default):

By default, priority queues in C++ are max-priority queues, meaning the largest element is given highest priority.

priority_queue<int> max_pq;
max_pq.push(2);
max_pq.push(10);
max_pq.push(5);

// Output: 10
cout << max_pq.top();

2. Min Priority Queue:

To create a min priority queue (smallest element has highest priority), use greater<> comparator:

priority_queue<int, vector<int>, greater<int>> min_pq;
min_pq.push(2);
min_pq.push(10);
min_pq.push(5);

// Output: 2
cout << min_pq.top();

3. Priority Queue with Custom Data Types:

You can define priority queues with custom data types:

struct Job {
  int priority;
  string task;

  bool operator<(const Job& other) const {
    return priority < other.priority;
  }
};

priority_queue<Job> jobQueue;

jobQueue.push({3, "Code Review"});
jobQueue.push({1, "Write Tests"});
jobQueue.push({2, "Bug Fixes"});

// Output: Code Review
cout << jobQueue.top().task;

Best Practices for Using Priority Queue:

1. Choosing the Right Comparator:

Always select the appropriate comparator (less for max priority, greater for min priority) or define your custom comparator clearly for custom data types.

2. Understand the Complexity:

push(): O(log n)
pop(): O(log n)
top(): O(1)

3. Avoid Frequent Modification:

Frequent modification (such as changing priorities) isn't efficient. If priorities change often, consider alternative structures.

4. Use with Custom Objects:

Clearly define the comparator in custom objects to avoid confusion about ordering.

5. Use Cases:

Dijkstra’s shortest path algorithm
Huffman encoding
Job scheduling algorithms
Maintaining median in running data stream

Example Usage in Problem-Solving (DSA Context):

Finding the K Largest Elements:

vector<int> findKLargest(vector<int>& nums, int k) {
    priority_queue<int, vector<int>, greater<int>> minHeap;

    for(int num : nums) {
        minHeap.push(num);
        if(minHeap.size() > k) {
            minHeap.pop();
        }
    }

    vector<int> result;
    while(!minHeap.empty()) {
        result.push_back(minHeap.top());
        minHeap.pop();
    }
    return result;
}

Conclusion:

Priority queues in C++ are powerful and versatile containers, ideal for problems involving prioritization. Understanding how they function internally, their operations, comparators, and appropriate scenarios will greatly enhance your problem-solving capabilities in data structures and algorithms.

Mastering 'Closures' in JavaScript: Never to look back again

Saurabh Raj — Sun, 06 Apr 2025 15:36:17 +0000

Introduction

Closures are one of the most distinctive and powerful features of JavaScript, often hailed as both elegant and sometimes confusing for beginners. They are essential for mastering JavaScript, especially because they enable important programming patterns such as data encapsulation, emulating private methods, and maintaining state in a functional programming style.

What is a Closure?

Closure is the ability of a function to remember the variables that are declared in its outer scope. Even after the outer function has returned, the inner function continues to have access to those variables.

In code:

function outerFunction() {
  let outerVariable = 'I am from outer scope!';

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

const closureInstance = outerFunction();
// outerFunction has finished execution, but...
closureInstance(); // logs 'I am from outer scope!'

Here, outerFunction returns innerFunction, and innerFunction still remembers the value of outerVariable, even though outerFunction has already finished running. This "remembering" of the environment from which it came is what we call a closure.

Why Are Closures Important?

1. Data Encapsulation
Closures let you create private state. In many object-oriented languages, you have keywords like private or protected. JavaScript doesn’t natively offer these access modifiers, but closures provide a pattern to emulate them.

Example:

function createCounter() {
  let count = 0; // Private variable

  return {
    increment: function() {
      count++;
      console.log('Count:', count);
    },
    getCount: function() {
      return count;
    }
  };
}

const counter = createCounter();
counter.increment(); // Output: Count: 1
counter.increment(); // Output: Count: 2
console.log('Current Count:', counter.getCount()); // Output: Current Count: 2

2. Factory Functions
They allow you to create function factories that generate specialized functions. For instance, you might have a function that sets up some local variables and returns an inner function that uses those variables in specialized ways.

Example:

function createMultiplier(multiplier) {
  return function(number) {
    return number * multiplier;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log('Double of 5:', double(5)); // Output: Double of 5: 10
console.log('Triple of 5:', triple(5)); // Output: Triple of 5: 15

3. Currying and Partial Application
Closures enable the creation of new functions from existing functions with some arguments pre-filled.

Example:

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

const addFive = add(5);
console.log('5 + 10 =', addFive(10)); // Output: 5 + 10 = 15
console.log('5 + 20 =', addFive(20)); // Output: 5 + 20 = 25

4. Memoization
By storing computed results in the closure, you can optimize expensive function calls.

Example:

function memoizedFibonacci() {
  const cache = {}; // Closure to store computed values

  function fib(n) {
    if (n in cache) {
      return cache[n];
    }
    if (n < 2) {
      return n;
    }
    const result = fib(n - 1) + fib(n - 2);
    cache[n] = result;
    return result;
  }

  return fib;
}

const fib = memoizedFibonacci();
console.log('Fibonacci of 10:', fib(10)); // Output: Fibonacci of 10: 55

Lexical Scope (Must know to understand closures)

Lexical scope (sometimes called static scope) describes how a parser resolves variable names when functions are nested. When you write JavaScript code, the lexical scope is determined by the arrangement (the textual position) of your code. Functions are "linked" to the scope in which they are defined, not the scope in which they are invoked.

In other words, where you define your function in the code determines the variables your function has access to. It’s called "lexical" because it deals with the textual layout of your code, rather than dynamic conditions of how your function might get called.

Example:

var a = 1;

function first() {
  var a = 2;
  second();
}

function second() {
  console.log(a); // Output (1)?
}

first();
console.log(a); // Output (2)?

Output:
1
1

Here, even though second() is called inside first function, its lexical scope is determined at compile time, so it has access to the global variable 'a' (which is 1), and not the one local 'a' inside first function.

How Closures Work

When a function is created, it stores a reference to its outer (enclosing) environment. This stored reference is the closure. Even if the outer function finishes execution, the inner function retains access to the outer function’s variables.

Example: Basic closure

function createCounter() {
  let count = 0; // 'count' is in the outer function's scope

  function increment() { // 'increment' forms a closure over 'count'
    count++;
    console.log(count);
  }

  return increment;
}

const counter = createCounter();
counter(); // Output: 1
counter(); // Output: 2

Advanced Closure Concepts

1. Closures in Loops
Be cautious using closures within loops:

for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 1000);
}
// Output after 1 sec: 3 3 3

Explanation:
The output is 0 0 0 because var is function scoped and in every loop, the same variable is updated. But wait, number a primitive. Shouldn't it be passed as a value? If yes, why does the console.log refer the updated variable value? Think for a moment. Explanation given below.

Even though primitives themselves are immutable and passed by value when used as function arguments, closures don't capture the value of the variable at the time of creation. Instead, they capture the variable binding (i.e., a reference to the location where the value is stored in the lexical environment).

How It Works
- Variable Binding vs. Value Copy
When a closure is created, it "remembers" the variable (its binding) from the surrounding scope. This means that it doesn't copy the value at that moment; it keeps a reference to the variable itself. So, any change to that variable later on will be reflected when the closure accesses it.

- Primitive Values:
Although primitives (like numbers, strings, booleans) are immutable and typically passed by value, the closure mechanism doesn't take a snapshot of the value—it simply keeps a link to the variable holding that value. When the variable changes, the closure sees the updated value.

Fix Using let or IIFE

// With let
for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 1000);
}
// Output after 1 sec: 0 1 2

// With IIFE
for (var i = 0; i < 3; i++) {
    (function(j) {
        setTimeout(() => console.log(j), 1000);
    })(i);
}
// Output after 1 sec: 0 1 2

2. Closures with Immediately Invoked Function Expressions (IIFE)
An IIFE runs as soon as it's defined and is great for encapsulation:

const counter = (function() {
    let count = 0;
    return () => ++count;
})();

console.log(counter()); // Output: 1
console.log(counter()); // Output: 2

3. Module Pattern
Closures help implement modules:

onst module = (function() {
    const privateVar = 'I am private';

    return {
        publicMethod: function() {
            console.log(privateVar);
        }
    };
})();

module.publicMethod(); // Output: I am private

5 Difficult, Twisted Questions to Master Closures

Question-1:

function mystery() {
    let x = 10;
    return function() {
        console.log(x++);
    };
}
const func1 = mystery();
const func2 = mystery();
func1();
func1();
func2();

Output:

10
11
10

Question-2:

const funcs = [];
for (var i = 0; i < 3; i++) {
    funcs[i] = function() {
        return i;
    };
}
console.log(funcs[0]());
console.log(funcs[1]());
console.log(funcs[2]());

Output

3
3
3

Question-3:
What's wrong here, and how do you fix it without using let?

for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), i * 100);
}

Question-4:

const add = (function(x) {
    return function(y) {
        return x + y;
    };
})(5);

console.log(add(2));
console.log(add(3));

Question-5:
Why does the following code work differently when var is replaced with let?

function testClosures() {
    for (var i = 0; i < 3; i++) {
        setTimeout(() => console.log(i), 100);
    }
}

function testClosuresLet() {
    for (let i = 0; i < 3; i++) {
        setTimeout(() => console.log(i), 100);
    }
}

// Compare the outputs

Conclusion

Closures may seem daunting at first, but they're a powerful tool on your journey to mastering JavaScript and building a rewarding career. Remember, every expert once started with the basics—so keep practicing, exploring, and refining your skills.

And finally, thank you for reading this article on JavaScript closures. I hope it clarified how closures work and how you can apply them to enhance your code. That's all for now; be sure to check out the rest of my Never to Look Back series on Javascript. Happy coding!

Mastering Selection and Ranges in JavaScript: Never to look back again

Saurabh Raj — Fri, 10 Jan 2025 15:08:10 +0000

In the realm of web development, manipulating text selections and cursor positions is a powerful tool that can elevate user experiences to new heights. Whether you’re building a rich text editor, an annotation tool, or enhancing interactive elements on your web application, mastering JavaScript’s Selection and Range APIs is indispensable. This comprehensive guide, titled “Mastering Selection and Ranges in JavaScript: Never to Look Back Again”, aims to be your ultimate resource. After reading this, you’ll have no need to look elsewhere for understanding and utilizing these essential APIs.

Introduction to Selections and Ranges

Before diving into the technicalities, it’s essential to grasp the foundational concepts of Selections and Ranges in the Document Object Model (DOM).

Selection: Represents the portion of the document currently selected by the user or programmatically. This can be a single cursor position (collapsed selection) or a range of text.
Range: Defines a contiguous part of the document, bounded by a start and an end point. Ranges can encompass text nodes, elements, or parts thereof and are instrumental in manipulating document content.

Together, Selection and Range APIs provide granular control over text and element selections, enabling developers to create dynamic and interactive web experiences.

Understanding the Selection API

The Selection API is central to managing text selections and cursor positions. It provides properties and methods to access and modify the current selection within the document.

Retrieving the Current Selection
To interact with the current selection, use the window.getSelection() method:

const selection = window.getSelection();

This method returns a Selection object representing the user’s current selection or cursor position.

Key Properties of Selection
Understanding the properties of the Selection object is crucial for effective manipulation.

anchorNode: The node in which the selection starts.
anchorOffset: The character offset within the anchorNode where the selection starts.
focusNode: The node in which the selection ends.
focusOffset: The character offset within the focusNode where the selection ends.
isCollapsed: A boolean indicating whether the selection is collapsed (i.e., a single cursor position without a range).
rangeCount: The number of ranges within the selection. Typically, this is 1 as most browsers support single-range selections.
toString(): Returns the text currently selected.

Essential Methods of Selection

getRangeAt(index): Retrieves the Range object at the specified index.
addRange(range): Adds a Range to the current selection.
removeRange(range): Removes a specific Range from the current selection.
removeAllRanges(): Clears all ranges from the selection.
collapse(node, offset): Collapses the selection to a single point at the specified node and offset.
extend(node, offset): Extends the selection to a new node and offset.

Diving Deep into the Range API

The Range API complements the Selection API by allowing precise definition and manipulation of document fragments.

Creating and Configuring a Range
To work with ranges, start by creating a Range object:

const range = document.createRange();

Once created, set its boundaries using methods like setStart, setEnd, selectNode, or selectNodeContents.

Example: Setting Start and End Points:

const startNode = document.getElementById('startElement');
const endNode = document.getElementById('endElement');

range.setStart(startNode, 0); // Start at the beginning of startNode
range.setEnd(endNode, endNode.childNodes.length); // End at the end of endNode

Key Properties of Range

startContainer: The node where the range starts.
startOffset: The character or child node offset within startContainer.
endContainer: The node where the range ends.
endOffset: The character or child node offset within endContainer.
collapsed: A boolean indicating whether the range is collapsed (i.e., start and end points are the same).

Essential Methods of Range
setStart(node, offset): Sets the start position of the range.

setEnd(node, offset): Sets the end position of the range.
selectNode(node): Sets the range to contain the entire specified node.
selectNodeContents(node): Sets the range to contain the contents of the specified node.
collapse(toStart): Collapses the range to its start or end point based on the toStart boolean.
extractContents(): Removes the contents of the range from the document and returns a DocumentFragment.
cloneContents(): Clones the contents of the range and returns a DocumentFragment.
deleteContents(): Removes the contents of the range from the document.
insertNode(node): Inserts a node at the start of the range.
surroundContents(node): Wraps the contents of the range in a new node.
cloneRange(): Creates a duplicate of the range.

Manipulating Selections with addRange and removeRange

The Selection API allows you to programmatically control what is selected in the document using addRange and removeRange. These methods are instrumental in creating interactive features like text highlighting, custom cursors, and more.

Adding a Range to the Selection
To programmatically select a portion of the document:

Create a Range: Define the start and end points.
Clear Existing Selections: Remove any existing ranges.
Add the New Range: Apply the new range to the selection. Example: Programmatically Selecting Text

<!DOCTYPE html>
<html>
<head>
    <title>Programmatic Selection</title>
</head>
<body>
    <p id="text">This is a sample text for programmatic selection.</p>
    <button id="selectBtn">Select "sample text"</button>

    <script>
        document.getElementById('selectBtn').addEventListener('click', () => {
            const textElement = document.getElementById('text');
            const selection = window.getSelection();
            const range = document.createRange();

            // Assuming "sample text" starts at character index 10 and is 11 characters long
            range.setStart(textElement.firstChild, 10);
            range.setEnd(textElement.firstChild, 21);

            selection.removeAllRanges(); // Clear existing selections
            selection.addRange(range); // Add the new range
        });
    </script>
</body>
</html>

Explanation:

Identify the Target Text: Determine the node and offsets where the selection should start and end.
Create and Configure the Range: Use setStart and setEnd to define the selection boundaries.
Apply the Range: Clear existing selections and add the new range to highlight the desired text.

Removing a Range from the Selection
To remove a specific range or all ranges from the selection:
Example: Removing All Selections

const selection = window.getSelection();
selection.removeAllRanges(); // Clears all selections

Example: Removing a Specific Range

const selection = window.getSelection();
if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    selection.removeRange(range);
}

Note: Removing ranges can be useful after performing actions like highlighting to prevent unintended multiple selections.

Practical Applications and Examples

To solidify your understanding, let’s explore several practical examples demonstrating the use of Selection and Range APIs.

Example 1: Retrieving and Displaying Selection Details
This example captures the user’s text selection and displays detailed information about it.

<!DOCTYPE html>
<html>
<head>
    <title>Selection Details</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        #info { margin-top: 20px; }
    </style>
</head>
<body>
    <p id="paragraph">
        Select any portion of this text to see detailed information about your selection in the console.
    </p>

    <div id="info"></div>

    <script>
        document.addEventListener('mouseup', () => {
            const selection = window.getSelection();
            const infoDiv = document.getElementById('info');

            if (selection.rangeCount > 0) {
                const range = selection.getRangeAt(0);
                const selectedText = selection.toString();
                const startContainer = range.startContainer.nodeName;
                const endContainer = range.endContainer.nodeName;
                const isCollapsed = selection.isCollapsed;

                infoDiv.innerHTML = `
                    <strong>Selected Text:</strong> ${selectedText || 'None'}<br>
                    <strong>Start Container:</strong> ${startContainer}<br>
                    <strong>End Container:</strong> ${endContainer}<br>
                    <strong>Is Collapsed:</strong> ${isCollapsed}
                `;
            } else {
                infoDiv.innerHTML = `<strong>No selection.</strong>`;
            }
        });
    </script>
</body>
</html>

Explanation:

Event Listener: Monitors the mouseup event to detect when the user finishes a selection.
Retrieve Selection: Accesses the current Selection and extracts relevant details.
Display Information: Outputs the selected text and details about the range to a designated div.

Example 2: Programmatically Selecting Text
This example demonstrates how to programmatically select a specific portion of text within an element upon a button click.

<!DOCTYPE html>
<html>
<head>
    <title>Programmatic Text Selection</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        #text { border: 1px solid #ccc; padding: 10px; }
    </style>
</head>
<body>
    <div id="text">
        This is a sample text that will be programmatically selected when you click the button below.
    </div>
    <button id="selectBtn">Select "programmatically selected"</button>

    <script>
        document.getElementById('selectBtn').addEventListener('click', () => {
            const textElement = document.getElementById('text');
            const selection = window.getSelection();
            const range = document.createRange();

            const textToSelect = "programmatically selected";
            const textContent = textElement.textContent;
            const startIndex = textContent.indexOf(textToSelect);
            const endIndex = startIndex + textToSelect.length;

            if (startIndex !== -1) {
                range.setStart(textElement.firstChild, startIndex);
                range.setEnd(textElement.firstChild, endIndex);

                selection.removeAllRanges();
                selection.addRange(range);
            } else {
                alert(`Text "${textToSelect}" not found.`);
            }
        });
    </script>
</body>
</html>

Explanation:

Identify Target Text: Searches for the specific text to select within the element.
Calculate Offsets: Determines the starting and ending character indices of the target text.
Create and Apply Range: Defines the range based on the calculated offsets and applies it to the selection.

Example 3: Highlighting Selected Text
This example allows users to highlight selected text by wrapping it in a with a background color.

<!DOCTYPE html>
<html>
<head>
    <title>Highlight Selected Text</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .highlight {
            background-color: yellow;
        }
        #text { border: 1px solid #ccc; padding: 10px; }
    </style>
</head>
<body>
    <div id="text">
        Select any portion of this text and click the "Highlight Selection" button to highlight it.
    </div>
    <button id="highlightBtn">Highlight Selection</button>

    <script>
        document.getElementById('highlightBtn').addEventListener('click', () => {
            const selection = window.getSelection();
            if (selection.rangeCount > 0 && !selection.isCollapsed) {
                const range = selection.getRangeAt(0).cloneRange();
                const span = document.createElement('span');
                span.className = 'highlight';
                range.surroundContents(span);
                selection.removeAllRanges(); // Clear selection after highlighting
            } else {
                alert('Please select some text to highlight.');
            }
        });
    </script>
</body>
</html>

Explanation:

User Selection: The user selects text within the specified div.
Button Click: Triggers the highlighting process.
Clone and Surround: Clones the selected range and wraps its contents in a with the highlight class.
Clear Selection: Removes the selection to prevent multiple highlights from overlapping. Caution: The surroundContents method can throw errors if the range splits non-text nodes. For complex scenarios, consider alternative methods like insertNode with cloned content.

Example 4: Saving and Restoring Selections
This example showcases how to save a user’s current selection and restore it later, which is particularly useful in rich text editors.

<!DOCTYPE html>
<html>
<head>
    <title>Save and Restore Selection</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        #text { border: 1px solid #ccc; padding: 10px; }
    </style>
</head>
<body>
    <div id="text">
        This text allows you to save and restore your selection. Select any part of this text and use the buttons below.
    </div>
    <button id="saveBtn">Save Selection</button>
    <button id="restoreBtn">Restore Selection</button>

    <script>
        let savedRange = null;

        document.getElementById('saveBtn').addEventListener('click', () => {
            const selection = window.getSelection();
            if (selection.rangeCount > 0) {
                savedRange = selection.getRangeAt(0).cloneRange();
                alert('Selection saved!');
            } else {
                alert('No selection to save.');
            }
        });

        document.getElementById('restoreBtn').addEventListener('click', () => {
            if (savedRange) {
                const selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(savedRange);
                alert('Selection restored!');
            } else {
                alert('No saved selection to restore.');
            }
        });
    </script>
</body>
</html>

Explanation:

Saving Selection: Captures and clones the current range, storing it in a variable.
Restoring Selection: Applies the saved range back to the current selection, effectively restoring the cursor position or text selection.

Example 5: Setting Cursor Positions
This example demonstrates how to set the cursor (caret) at a specific position within an editable element.

<!DOCTYPE html>
<html>
<head>
    <title>Set Cursor Position</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        #editable {
            border: 1px solid #ccc;
            padding: 10px;
            width: 300px;
            height: 100px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div id="editable" contenteditable="true">
        Click the button to set the cursor at the end of this text.
    </div>
    <button id="cursorBtn">Set Cursor to End</button>

    <script>
        document.getElementById('cursorBtn').addEventListener('click', () => {
            const editable = document.getElementById('editable');
            editable.focus(); // Focus the editable element

            const selection = window.getSelection();
            selection.removeAllRanges();

            const range = document.createRange();
            range.selectNodeContents(editable);
            range.collapse(false); // Collapse to the end

            selection.addRange(range);
        });
    </script>
</body>
</html>

Explanation:

ContentEditable Element: An element with contenteditable="true" allows users to edit its contents.
Button Click: Sets the cursor at the end of the editable content by collapsing the range to its end point.

Advanced Techniques

Once you’re comfortable with the basics, exploring advanced techniques can further enhance your applications.

Working with Multiple Ranges

While most browsers support only single-range selections, understanding how to handle multiple ranges can be beneficial, especially for future-proofing your code or targeting browsers that might support multi-range selections.

Example: Handling Multiple Ranges

const selection = window.getSelection();
const rangeCount = selection.rangeCount;

for (let i = 0; i < rangeCount; i++) {
    const range = selection.getRangeAt(i);
    console.log(`Range ${i}:`, range);
}

Note: As multi-range selections are not widely supported in modern browsers, this technique is more theoretical but can be useful for specialized applications.

Handling Selections in ContentEditable Elements
Managing selections within contenteditable elements introduces additional considerations, such as maintaining cursor positions during DOM manipulations.

Example: Inserting an Element at Cursor Position

<!DOCTYPE html>
<html>
<head>
    <title>Insert at Cursor</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        #editable {
            border: 1px solid #ccc;
            padding: 10px;
            width: 300px;
            height: 150px;
            overflow: auto;
        }
        .inserted {
            background-color: lightblue;
            padding: 2px 4px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div id="editable" contenteditable="true">
        Click within this editable area and insert an element at the cursor position by clicking the button.
    </div>
    <button id="insertBtn">Insert Element</button>

    <script>
        document.getElementById('insertBtn').addEventListener('click', () => {
            const selection = window.getSelection();
            if (selection.rangeCount > 0) {
                const range = selection.getRangeAt(0);
                const span = document.createElement('span');
                span.className = 'inserted';
                span.textContent = 'Inserted Text';
                range.insertNode(span);

                // Move the cursor after the inserted node
                range.setStartAfter(span);
                range.collapse(true);
                selection.removeAllRanges();
                selection.addRange(range);
            } else {
                alert('No cursor position detected.');
            }
        });
    </script>
</body>
</html>

Explanation:

Insert Element: Adds a with specific styling at the current cursor position.
Maintain Cursor Position: Adjusts the range to place the cursor immediately after the inserted element, ensuring seamless user experience.

Integrating Selections with Undo/Redo Functionality

Implementing undo and redo actions in applications often requires tracking changes in selections and ranges.

Example: Basic Undo Functionality

<!DOCTYPE html>
<html>
<head>
    <title>Undo Selection Changes</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        #editable {
            border: 1px solid #ccc;
            padding: 10px;
            width: 300px;
            height: 150px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div id="editable" contenteditable="true">
        Edit this text and use the buttons to save and undo your selection changes.
    </div>
    <button id="saveBtn">Save Selection</button>
    <button id="undoBtn">Undo Selection</button>

    <script>
        let savedRange = null;

        document.getElementById('saveBtn').addEventListener('click', () => {
            const selection = window.getSelection();
            if (selection.rangeCount > 0) {
                savedRange = selection.getRangeAt(0).cloneRange();
                alert('Selection saved!');
            } else {
                alert('No selection to save.');
            }
        });

        document.getElementById('undoBtn').addEventListener('click', () => {
            if (savedRange) {
                const selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(savedRange);
                alert('Selection restored!');
            } else {
                alert('No saved selection to undo.');
            }
        });
    </script>
</body>
</html>

Explanation:

Saving Selection: Captures the current selection range.
Undoing Selection: Restores the saved selection, allowing users to revert to a previous state.

Advanced Implementation: For comprehensive undo/redo functionality, consider integrating this with a stack-based history mechanism to handle multiple states.

Best Practices and Common Pitfalls

While the Selection and Range APIs are powerful, they come with their own set of challenges and best practices to ensure robust and error-free implementations.

Best Practices

Always Check rangeCount: Before accessing a range, ensure that the selection contains the desired number of ranges to prevent errors.

const selection = window.getSelection();
if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    // Proceed with range operations
}

Clone Ranges When Necessary: If you plan to manipulate a range without affecting the original selection, clone it first.

const originalRange = selection.getRangeAt(0);
const clonedRange = originalRange.cloneRange();
// Manipulate clonedRange

Handle Exceptions Gracefully: Operations like surroundContents can throw errors if the range spans non-text nodes. Use try-catch blocks to handle such scenarios.

try {
    range.surroundContents(span);
} catch (e) {
    console.error('Error surrounding contents:', e);
}

**Normalize the DOM After Manipulations: **After inserting or removing elements, ensure the DOM remains consistent. This might involve normalizing nodes or reapplying necessary styles.

document.body.normalize();

Maintain User Experience: When manipulating selections, always consider the user’s perspective. Avoid unexpected changes to their selection or cursor position unless explicitly intended.

Common Pitfalls

1.Assuming Single-Range Support: While most modern browsers support single-range selections, always code defensively to handle unexpected scenarios.
2.Modifying the DOM During Selection Iteration: Changing the DOM structure while iterating through selections can lead to inconsistent states. Always plan DOM manipulations carefully.
3.Ignoring Cross-Browser Differences: While the APIs are standardized, minor differences might exist across browsers. Test your implementations across different platforms.
4.Overusing removeAllRanges: Clearing selections indiscriminately can frustrate users. Ensure that removing ranges is contextually appropriate.
5.Handling Nested Elements Incorrectly: Manipulating ranges within nested or complex DOM structures can result in unexpected behavior or errors.

Conclusion

Mastering the Selection and Range APIs in JavaScript opens doors to creating interactive, user-friendly web applications. From simple text highlighting to building complex rich text editors, these APIs provide the necessary tools to manipulate and interact with document content effectively.

Mastering the 'this' Keyword in JavaScript: Never to look back again

Saurabh Raj — Sun, 05 Jan 2025 15:46:36 +0000

JavaScript’s this keyword is a fundamental concept that often puzzles both beginners and seasoned developers alike. Its dynamic nature can lead to unexpected behaviors if not thoroughly understood. This comprehensive guide aims to demystify this, exploring its various contexts, nuances, and best practices, complete with illustrative examples and challenging problems to solidify your understanding.

Introduction to this

In JavaScript, this is a keyword that refers to the object from which the current code is being executed. Unlike some other programming languages where this is statically bound, JavaScript’s this is dynamically determined based on how a function is called.

1. Global Context

When not inside any function, this refers to the global object.

In Browsers: The global object is window.
In Node.js: The global object is global.

Example

console.log(this === window); // true (in browser)
console.log(this === global); // true (in Node.js)

Note: In strict mode ('use strict';), this in the global context remains the global object.

2. Function Context

I. Regular Functions

In regular functions, this is determined by how the function is called.

Default Binding: If a function is called without any context, this refers to the global object (or undefined in strict mode).

Example:

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

showThis(); // Window object (in browser) or global (in Node.js)

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

Example

const person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

person.greet(); // "Hello, I'm Alice"

We can use call, apply, or bind to explicitly set this.

function greet() {
  console.log(`Hello, I'm ${this.name}`);
}

const person = { name: 'Bob' };
greet.call(person); // "Hello, I'm Bob"

II. Arrow Functions

In JavaScript, arrow functions do not have their own this context. Instead, they inherit this lexically from the surrounding (enclosing) scope at the time the arrow function is created, not when it is called. This means that the value of this inside an arrow function is fixed based on where the function is defined, and it does not change based on how or where the function is invoked.

It cannot be changed using methods like .call(), .apply(), or .bind(). Example:

var name = "Saurabh"
const obj = {
  name: 'Alice',
  arrowFunction: () => {
    console.log(this.name);
  }
};

obj.arrowFunction(); // Outputs: Saurabh

const detachedArrowFunction = obj.arrowFunction;
detachedArrowFunction(); // Outputs: Saurabh

Explanation: Since arrow functions do not have their own this, this refers to the global object, not the person object.

Correct Usage with Arrow Functions:

const person = {
  name: 'Dana',
  greet: function() {
    const inner = () => {
      console.log(`Hello, I'm ${this.name}`);
    };
    inner();
  }
};

person.greet(); // "Hello, I'm Dana"

Challenging Aspect: If a method is assigned to a variable and called, this may lose its intended context.
Example

const calculator = {
  value: 0,
  add: function(num) {
    this.value += num;
    return this.value;
  }
};

console.log(calculator.add(5)); // 5
console.log(calculator.add(10)); // 15

const addFunction = calculator.add;
console.log(addFunction(5)); // NaN (in non-strict mode, this.value is undefined + 5)

3. Constructor Functions and this

When a function is used as a constructor with the new keyword, this refers to the newly created instance.

function Person(name) {
  this.name = name;
}

const alice = new Person('Alice');
console.log(alice.name); // "Alice"

Important Notes:
• If new is not used, this might refer to the global object or be undefined in strict mode.
• Constructors typically capitalize the first letter to distinguish them from regular functions.

4. The this in Event Handlers

In event handlers, this refers to the element that received the event.

Example

<button id="myButton">Click me</button>
<script>
  const button = document.getElementById('myButton');
  button.addEventListener('click', function() {
    console.log(this); // <button id="myButton">Click me</button>
  });
</script>

Arrow Function Caveat:
Using arrow functions in event handlers can lead to this referring to the surrounding scope instead of the event target.
Example:

button.addEventListener('click', () => {
  console.log(this); // Global object or enclosing scope
});

5. Explicit Binding with call, apply, and bind

JavaScript provides methods to explicitly set the value of this:

call: Invokes the function with this set to the first argument, followed by function arguments.

function greet(greeting) {
  console.log(`${greeting}, I'm ${this.name}`);
}

const person = { name: 'Eve' };
greet.call(person, 'Hello'); // "Hello, I'm Eve"

apply: Similar to call, but accepts arguments as an array.

greet.apply(person, ['Hi']); // "Hi, I'm Eve"

bind: Returns a new function with this bound to the first argument.

const boundGreet = greet.bind(person);
boundGreet('Hey'); // "Hey, I'm Eve"

Use Cases:

Borrowing methods from other objects.
Ensuring this remains consistent in callbacks.

6. this in Classes

ES6 introduced classes, which provide a clearer syntax for constructor functions and methods. Within class methods, this refers to the instance.
Exmaple:

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

const dog = new Animal('Dog');
dog.speak(); // "Dog makes a noise."

Arrow Functions in Classes:
Arrow functions can be used for methods to inherit this from the class context, useful for callbacks.

class Person {
  constructor(name) {
    this.name = name;
  }

  greet = () => {
    console.log(`Hello, I'm ${this.name}`);
  }
}

const john = new Person('John');
john.greet(); // "Hello, I'm John"

Common Pitfalls and Best Practices

I. Losing this Context

When passing methods as callbacks, the original context may be lost.
Problem

const obj = {
  name: 'Object',
  getName: function() {
    return this.name;
  }
};

const getName = obj.getName;
console.log(getName()); // undefined or global name

Solution
Use bind to preserve context.

const boundGetName = obj.getName.bind(obj);
console.log(boundGetName()); // "Object"

II. Using Arrow Functions Improperly

Arrow functions don’t have their own this, which can lead to unexpected behavior when used as methods.

Problem

const obj = {
  name: 'Object',
  getName: () => {
    return this.name;
  }
};

console.log(obj.getName()); // undefined or global name

Solution
Use regular functions for object methods.

const obj = {
  name: 'Object',
  getName: function() {
    return this.name;
  }
};

III. Avoiding Global this

Unintentionally setting properties on the global object can lead to bugs.

Problem

function setName(name) {
  this.name = name;
}

setName('Global');
console.log(window.name); // "Global" (in browser)

Solution
Use strict mode or proper binding.

'use strict';
function setName(name) {
  this.name = name;
}

setName('Global'); // TypeError: Cannot set property 'name' of undefined

Advanced Concepts

I. this in Nested Functions

In nested functions, this may not refer to the outer this. Solutions include using arrow functions or storing this in a variable.
Example with Arrow Function:

const obj = {
  name: 'Outer',
  nested: function() {
    const inner = () => {
      console.log(this.name);
    };
    inner();
  }
};

obj.nested(); // "Outer"

Example with Variable:

const obj = {
  name: 'Outer',
  nested: function() {
    const self = this;
    function inner() {
      console.log(self.name);
    }
    inner();
  }
};

obj.nested(); // "Outer"

II. this with Prototypes

When using prototypes, this refers to the instance.

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log(`Hi, I'm ${this.name}`);
};

const alice = new Person('Alice');
alice.greet(); // "Hi, I'm Alice"

Conclusion

The this keyword in JavaScript is a versatile and powerful feature that, when understood correctly, can greatly enhance your coding capabilities.

10 Tricky Problems to Master this

To truly cement your understanding of this, tackle the following challenging problems. Each problem is designed to test different aspects and edge cases of the this keyword in JavaScript. Solutions in the end.

Problem 1: The Mysterious Output

var name = 'Global';

const person = {
  name: 'Alice',
  getName: function() {
    return this.name;
  }
};

const getName = person.getName;
console.log(getName()); // What is the output?

Problem 2: Arrow Function Surprise

const name = 'Global';

const person = {
  name: 'Bob',
  greet: () => {
    console.log(`Hello, I'm ${this.name}`);
  }
};

person.greet(); // What is printed?

Problem 3: Binding this in a Callback

function Timer() {
  this.seconds = 0;

  setInterval(function() {
    this.seconds++;
  }, 1000);
}

const timer = new Timer();
setTimeout(() => {
  console.log(timer.seconds); // What is the expected output after 3 seconds?
}, 3000);

Problem 4: Using bind Correctly

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const retrieveX = module.getX;
console.log(retrieveX()); // Undefined

const boundGetX = retrieveX.bind(module);
console.log(boundGetX()); // What is the output?

Problem 5: this in Constructor Functions

function Car(model) {
  this.model = model;
  this.getModel = () => {
    return this.model;
  };
}

const car = new Car('Tesla');
const getModel = car.getModel;
console.log(getModel()); // What does this print?

Problem 6: Event Handler Context

<button id="myButton">Click Me</button>
<script>
  const obj = {
    name: 'Button',
    handleClick: function() {
      console.log(this.name);
    }
  };

  const button = document.getElementById('myButton');
  button.addEventListener('click', obj.handleClick);
</script>

Problem 7: Nested Functions and this

const obj = {
  name: 'Outer',
  outerFunc: function() {
    console.log(this.name); // What does this print?

    function innerFunc() {
      console.log(this.name); // What does this print?
    }

    innerFunc();
  }
};

obj.outerFunc();

Problem 8: this in Promises

const obj = {
  value: 100,
  getValue: function() {
    return new Promise(function(resolve, reject) {
      resolve(this.value);
    });
  }
};

obj.getValue().then(function(val) {
  console.log(val); // What is logged?
});

Problem 9: Chaining with bind

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

const double = multiply.bind(null, 2);
console.log(double(5)); // What is the output?

Problem 10: this with Classes and Inheritance

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    setTimeout(function() {
      console.log(`${this.name} barks.`);
    }, 1000);
  }
}

const dog = new Dog('Rex');
dog.speak(); // What is printed after 1 second?

Solutions to Tricky Problems

Solution to Problem 1:

When getName is assigned to a variable and called without any object context, this defaults to the global object. In non-strict mode, this.name refers to the global name, which is 'Global'. In strict mode, this would be undefined, leading to an error.

console.log(getName()); // "Global"

Solution to Problem 2:

Arrow functions do not have their own this; they inherit it from the surrounding scope. In this case, the surrounding scope is the global context, where this.name is 'Global'.

person.greet(); // "Hello, I'm Global"

Solution to Problem 3:

Inside the setInterval callback, this refers to the global object (or is undefined in strict mode). Thus, this.seconds++ either increments window.seconds or throws an error in strict mode. The timer.seconds remains 0.

console.log(timer.seconds); // 0

Solution to Problem 4:

After binding retrieveX to module, calling boundGetX() correctly sets this to module.

console.log(boundGetX()); // 42

Solution to Problem 5:

The arrow function getModel inherits this from the constructor, which refers to the newly created car instance.

console.log(getModel()); // "Tesla"

Solution to Problem 6:

In event handlers using regular functions, this refers to the DOM element that received the event, which is the button. Since the button doesn’t have a name property, this.name is undefined.

// Logs undefined

Solution to Problem 7:

First console.log(this.name); inside outerFunc refers to obj, so it prints 'Outer'.
Second console.log(this.name); inside innerFunc refers to the global object, so it prints 'Global' or undefined in strict mode.

// "Outer"
// "Global" (or undefined in strict mode)

Solution to Problem 8:

Inside the Promise constructor, this refers to the global object (or is undefined in strict mode). Thus, this.value is undefined (or causes an error in strict mode).

console.log(val); // undefined

Solution to Problem 9:

The multiply function is bound with the first argument a as 2. When double(5) is called, it effectively computes multiply(2, 5).

console.log(double(5)); // 10

Solution to Problem 10:

In the Dog class’s speak method, the setTimeout callback is a regular function. Thus, this inside the callback refers to the global object, not the dog instance. this.name is 'undefined' or causes an error if name is not defined globally.

// After 1 second, logs: "undefined barks."

To fix this, use an arrow function:

speak() {
  setTimeout(() => {
    console.log(`${this.name} barks.`);
  }, 1000);
}

Now, it correctly logs:

// "Rex barks."

Forem: Saurabh Raj

Learn Largest Contentful Paint (LCP) in simple words

How is an element's size determined?

How is LCP reported?

What is a good LCP score?

Examples

Conclusion

Learn requestAnimationFrame - Never to look back again

What is requestAnimationFrame?

How Does It Work?

The Browser's Rendering Pipeline

Why Before Step 2 is Perfect

Why Use requestAnimationFrame?

When Should You Use It?

Perfect For:

Not Necessary For:

Practical Examples

Simple Movement Animation

Time-Based Animation (More Robust)

Important Details

Canceling Animations

Handling Multiple Elements

Performance Tips

Browser Support

Wrapping up

Understanding XSRF Protection: Implementation in Fetch vs. Axios

How CSRF Attacks Work

CSRF Protection Mechanisms

Fetch API: Manual CSRF Protection

Example 1: Manual CSRF Token Implementation with Fetch

Example 2: CSRF Protection for All Fetch Requests

Example 3: Double Submit Cookie Pattern with Fetch

Axios: Built-in CSRF Protection

Default CSRF Protection in Axios

Example 1: Customizing CSRF Protection in Axios

Example 2: Global Axios Configuration for CSRF

Example 3: Manually Managing CSRF Tokens with Axios

Why This Difference Matters

Server-Side Considerations

Example of Express.js Server with CSRF Protection

FAQs

1. Will Chrome allow making a cross-origin request directly (as in a CSRF attack)

2. If the XSRF token is stored in the cookies, and cookie is being sent. Why won't this also be sent?

Conclusion

Understanding Fetch and Axios : Never to look back again

Axios vs Fetch: A Deep Dive into Modern HTTP Request Handling in JavaScript

1. The Fetch API

Core Concepts

Real Use Cases for Body Mixin

1. Inspecting or Cloning Request Bodies

2. Reading Request Body in Middleware (e.g., Service Worker)

2. Basic Usage of Fetch

GET Request

POST Request

3. Error Handling in Fetch

4. Request Cancellation with AbortController

5. Browser Compatibility

6. Pros and Cons of Fetch

Pros

Cons

Conclusion

2. Axios

Core Features

Basic Usage (GET Request)

Making Other Requests (POST, PUT, DELETE)

Interceptors

Error Handling

Request Cancellation

Pros of Axios

Cons of Axios

3. Fetch vs. Axios: Key Differences Summarized

Learn AbortController with Examples - Never to look back again

What is AbortController?

Core concept

Basic Usage with fetch()

Understanding the Components

1. AbortController:

2. AbortSignal:

Real-World Use Cases

1. 1. Search Suggestions (Live Typing)

4. Request Cancellation with `AbortController`

`window.innerHeight` and `window.innerWidth`

`window.outerHeight` and `window.outerWidth`

`window.scrollX` and `window.scrollY`

`window.screen` Properties

`element.clientHeight` and `element.clientWidth`

`element.offsetHeight` and `element.offsetWidth`

`element.scrollHeight` and `element.scrollWidth`

`element.scrollLeft` and `element.scrollTop`

`element.getBoundingClientRect()`

Understanding Comparators (`greater<int>` and `less<int>`):