Last week, I decided to switch up how I learn. Instead of just reading tutorials and documentation, I tried something simple, asking three core questions about every new concept I came across, a technique recommended by my mentor.
Those three questions were:
- What does it do? (What’s its purpose or behavior?)
- What does it take? (What inputs, dependencies, or setup does it require?)
- What does it return? (What’s the output or result you can expect?)
This technique forces clarity and Using this approach, here’s what I explored last week.
1. Interception Observer
_What does it do?
_ interception Observer is used to detect interaction between the target element and its ancestor element. It is used to detect if some elements are visible at viewports or not.
It provides an efficient way to track visibility changes without constantly listening to scroll or resize events.
_What does it take?
_An Intersection Observer takes two main inputs:
-
A callback function
This function is triggered whenever the visibility of the observed element changes. It receives a list of IntersectionObserverEntry objects, which contain information about each observed target.
If an entry’s isIntersecting property is true, it means the target element is visible within the viewport or within the specified root element. -
An options object
This object can include the following properties:
a) root: Defines the element that is used as the viewport for checking the visibility of the target. It must be an ancestor of the target element. If not specified, the browser’s viewport is used by default.
b) threshold (sometimes misheard or mistyped as choiceOde): Can be a single number or an array of numbers between 0 and 1. It specifies how much of the target element must be visible before the callback is triggered.
Example: 0.5 means the callback fires when half of the element is visible; 1 means the callback fires only when the entire element is visible. The default value is 0.
c) rootMargin: Works similarly to CSS margins. It accepts one to four values (margin-top, margin-right, margin-bottom, margin-left) and can be used to expand or shrink the root’s bounding box. For example, “0px 0px -50px 0px” can trigger earlier or later than the actual visibility point.
_What does it return?
_It returns an observer object that provides methods such as .observe() and .unobserve()
allowing you to start or stop observing specific target elements for visibility changes.
_When to use Intersection Observer
_Intersection Observers are useful in many real world web interactions, including:
Lazy loading images – Only load images when they’re about to appear on the screen.
Detecting visibility – Check whether a specific element is within the viewport.
Autoplay or pause media – Automatically play a video when visible and pause when it scrolls out of view.
Infinite scrolling – Load more content when the user reaches the end of a page or list.
2.createElement()
_What does it do?
_
In an HTML document, the document.createElement() method is used to dynamically create new HTML elements using JavaScript. Instead of hardcoding everything inside your HTML file, this method lets you generate elements on the fly and attach them to the DOM. JavaScript dynamically builds and updates the interface by creating, modifying, and removing elements without reloading the page.
This makes the web app more efficient and interactive, as it allows constructing UI components directly with JavaScript rather than writing repetitive static HTML.
_What does it take?
_
The createElement() method takes one argument, a string representing the tag name of the element you want to create.
For example:
const button = document.createElement('button');
Here, a element is created in memory but not yet added to the page.
**_What does it return?
the new element.
3.Canva API
The Canvas API provides a means for drawing graphics via JavaScript and the HTML element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.
The Canvas API largely focuses on 2D graphics allowing developers to create visual elements dynamically including animations, charts, game graphics, image effects, and even real-time video processing.
_What does it take?
_
To use the Canvas API, you typically need:
a) An HTML element: This defines the drawing area in your document. For example:
b) A rendering context
In JavaScript, you access the drawing functions by retrieving the context
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
The getContext(‘2d’) method gives you the 2D drawing context, which contains all the methods needed to draw shapes, text, images, and more.
c) Drawing instructions
Once you have the context, you can call methods like:
ctx.fillRect(x, y, width, height) – Draws a filled rectangle.
ctx.beginPath() and ctx.lineTo() – Used to create complex paths and shapes.
ctx.drawImage() – Renders images or videos onto the canvas.
_What does it return?
_
- Channel Messaging API
_What does it do?
_
The Channel Messaging API allows two separate scripts running in different browsing contexts (such as two iframes or an iframe and its parent document) to communicate directly with each other.
It creates a two-way communication channel, where each side can send and receive messages asynchronously through dedicated message ports.
This makes it useful for scenarios where web components, embedded widgets, or isolated scripts need to share data safely and efficiently without relying on global variables or storage.
What does it take?
A message channel is created using the MessageChannel() constructor. Once created, the two ends of the channel can be accessed through: MessageChannel.port1 and MessageChannel.port2
The context that creates the channel uses port1, while the second context (such as an iframe) uses port2.
You can send messages through port2.postMessage() and transfer the port itself to another browsing context using window.postMessage() along with two arguments(the message to send, the object to transfer ownership of)
The receiving context listens for messages using onmessage, and grabs the message content from event’s data.
To reply, it can use its own MessagePort.postMessage() method.
When communication is no longer needed, MessagePort.close() can be called to close the connection on both ends.
*What does it return?
*
a communication bridge
- Geolocation API
_What does it do?
_
The Geolocation API allows users to share their physical location with web applications if they choose to.
For privacy and security reasons, the browser always asks for the user’s permission before sharing any location data. Once granted, the API enables a web app to access the device’s geographic position, using the best available method (such as GPS, Wi-Fi, or network information).
For browser extensions, any feature that accesses geolocation data must explicitly declare the “geolocation” permission in the manifest file.
_What does it take?
_
The Geolocation API takes:
1 User permission
The browser automatically prompts the user to grant or deny location access before the API can return any data.
2 Callback functions
The API works asynchronously and requires callback functions to handle success or error responses.
The Geolocation API is accessed via a call to navigator.geolocation; this will cause the user’s browser to ask them for permission to access their location data. If they accept, then the browser will use the best available functionality on the device to access this information. Developer can now access this location information in a couple of different ways:
a) Geolocation.getCurrentPosition(): Retrieves the device’s current location.
b) Geolocation.watchPosition(): Registers a handler function that will be called automatically each time the position of the device changes, returning the updated location.
Each of these methods can take up to three arguments:
1 A success callback (required) executed when location retrieval succeeds. It receives a GeolocationPosition object containing data such as latitude, longitude, and accuracy.
2 An error callback (optional) executed if retrieval fails. It receives a GeolocationPositionError object explaining what went wrong (e.g., permission denied, timeout, or unavailable data).
3 An options object (optional) that allows developers to configure retrieval settings such as accuracy, timeout, and caching behavior.
navigator.geolocation.getCurrentPosition(
(position) => {
console.log(position.coords.latitude, position.coords.longitude);
},
(error) => {
console.error(error);
},
{ enableHighAccuracy: true, timeout: 5000 }
);
_What does it return?
_
The Geolocation API returns a Geolocation object, which provides access to the methods and properties needed to retrieve and monitor location data.
When successfully executed, it provides a GeolocationPosition object containing detailed information such as:
- coords.latitude
- coords.longitude
- coords.accuracy
- timestamp
_When to use Geolocation API
_
Geolocation API can be useful when building
- Weather apps
- Maps and navigation
- Ride-hailing or delivery apps
- Logistics and fleet management
- Fitness and outdoor activity apps
- Storage API
_What does it do?
_
The Storage API provides a way for web applications to store data locally on a user’s device directly in the browser so that information can persist between sessions without needing a server connection.
It allows developers to save key value data, user preferences, and small amounts of application state, making websites faster and more interactive even when offline.
There are two main parts of the Storage API: - localStorage – Stores data permanently (until explicitly cleared by the user or the site).
- sessionStorage – Stores data temporarily for a single session (it’s cleared once the browser tab is closed).
_What does it take?
_
The Storage API takes: A key and a value. Data is stored in key value pairs, where both are strings.
localStorage.setItem('username', 'Adetola');
Here, ‘username’ is the key, and ‘Adetola’ is the value being stored.
A key (for retrieval or removal) –
To read stored data:const name = localStorage.getItem('username');
To remove data:localStorage.removeItem('username');
Or to clear everything at once:
localStorage.clear();
_What does it return?
_
The Storage API itself returns a Storage object, which provides methods (setItem(), getItem(), removeItem(), clear()) for interacting with stored data.
When data is retrieved using getItem(), it returns the string value associated with the specified key. If the key doesn’t exist, it returns null.
