In the ever-evolving world of web development, many APIs have become familiar that we use without much thought. Yet, there are several lesser-known APIs that can greatly enhance your projects and streamline your coding process. In this blog, we’ll delve into some of these hidden gems, featuring code examples.

1. Intersection Observer API

The Intersection Observer API lets you watch when a target element comes into or goes out of view in the browser. This means you can easily know when elements are visible on the screen, allowing you to trigger actions based on whether they’re seen by the user.

Here’s a simple example

// Define the callback function
const callback = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element is visible in viewport!');
      // Perform actions like loading content or triggering animations
    } else {
      console.log('Element is out of view.');
    }
  });
};

// Create an observer instance
const observer = new IntersectionObserver(callback);

// Target the element to observe
const target = document.querySelector('#targetElement');
observer.observe(target);

Code Explanation

Callback Function: This function is called whenever the intersection state of the target changes. It receives an array of entries, each representing a target element being observed.

Observer Instance: An instance of IntersectionObserver is created using the callback function.

Observing Elements: You call observe() on the observer instance, passing in the target element.

Why Use Intersection Observer?

Performance Optimization: Instead of constantly checking the position of elements during scroll events, the Intersection Observer provides a more efficient way to track visibility.

Enhanced User Experience: You can create smooth animations, lazy load images, and implement infinite scrolling, all based on when elements come into view.

2. Resize Observer API

Maybe you’re working on a responsive design and need to adjust layouts dynamically. Enter Resize Observer API!, The Resize Observer API allows you to watch for changes in the dimensions of an element. This is super useful for creating responsive designs that adapt to various screen sizes or dynamic content changes.

How Does Resize Observer Work?

The Resize Observer lets you create a new observer that will call a callback function whenever an observed element changes size. Let’s take a look at how to use it!

Here’s a simple example

// Select the element you want to observe
const box = document.querySelector('.box');

// Create a new ResizeObserver instance
const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log('Element:', entry.target);
    console.log('New width:', entry.contentRect.width);
    console.log('New height:', entry.contentRect.height);
  }
});
// Start observing the element
observer.observe(box);

If you ever need to stop monitoring the box, you can call unobserve() on the observer instance. This is useful for performance reasons or when the element is no longer relevant.

Practical Use Cases :

• Responsive Layouts
• Dynamic Content Management

For a comprehensive resource, you might want to check out these fantastic YouTube tutorials Intersection Observer , Resize Observer, which I found very useful for understanding the concepts.

Thank you! Happy Coding!!