JavaScript APIs You Don’t Know About — Smashing Journal

A few days in the past, I revisited the superior 2021 State of JS Survey. The state of JS is an internet survey that collects knowledge from builders around the globe to see the newest and upcoming traits within the JavaScript group. Among the many knowledge it collects, a piece is devoted to the native options JavaScript supplies, listed by their utilization and consciousness. As you’ll be able to think about, among the many most used options are common ones like Non-obligatory chaining, Nullish coalescing, Websockets, and so forth.

Nonetheless, I wasn’t considering essentially the most used or identified APIs. As a substitute, I used to be on the lookout for the least identified ones. I needed to know which APIs we aren’t speaking about sufficient, and amongst them, I discovered 4 fairly completely different APIs which are extraordinarily helpful:

On this article, we are going to see what they’re, the place we must always use them, and tips on how to use them.

Be aware: These APIs are all out there on this demo.

Web page Visibility API

This can be a little-known internet API that charges final fourth in consciousness within the State of JS Survey. It lets you understand when a consumer has left the web page. To be exact, the API triggers an occasion every time the web page visibility standing modifications, both when the consumer minimizes or maximizes the window or switches the tab.

Previously, you had to make use of gimmicks to know if a consumer had switched tabs or minimized the window. The most well-liked was utilizing the blur and focus browser occasions. Utilizing these occasions would lead to one thing like the next:

window.addEventListener("focus", operate () {
    // Consumer is again on the web page
    // Do One thing
});

window.addEventListener("blur", operate () {
    // Consumer left the web page
    // Do One thing
});

The earlier code works however not as supposed. For the reason that blur occasion is triggered when the web page loses focus, it may be triggered when the consumer clicks the search bar, an alert dialog, the console, or the window border. So, blur and focus solely inform us if the web page is lively however not if the content material of the web page is hidden or seen.

Use Instances

Typically, we wish to use the Web page Visibility API to cease pointless processes when the consumer doesn’t see the web page or, however, to carry out background actions. Some particular instances might be:

• to pause movies, picture carousels, or animations when the consumer leaves the web page;
• if the web page shows reside knowledge from an API, cease this conduct briefly whereas the consumer is away;
• to ship consumer analytics.

How To Use It?

The Web page Visibility API brings two properties and an occasion to entry the web page visibility standing:

• doc.hidden
  It’s globally out there and read-only. Attempt to keep away from it since it’s now deprecated, however when accessed, it returns true if the web page is hidden and false whether it is seen.
• doc.visibilityState
  It’s the up to date model of doc.hidden, however when accessed, it returns 4 doable values relying on the web page visibility standing: – seen
  The web page is seen, or to be actual, it isn’t minimized nor in one other tab. – hidden
  The web page isn’t seen; it’s minimized or in one other tab. – prerender
  That is the preliminary state of a visual web page when it’s prerendering. A web page’s visibility standing could begin at prerender after which change to a different state, however it could possibly’t change from one other state to prerender. – unloaded
  The web page is being unloaded from reminiscence.
• visibilitychange
  It’s an occasion supplied by the doc object that’s triggered when the web page visibilityState modifications.

doc.addEventListener("visibilitychange", () => {
    if (doc.visibilityState === "seen") {
        // web page is seen
    } else {
        // web page is hidden
    }
});

To see tips on how to use the Web page Visibility API, let’s use it to pause a video and cease fetching sources from an API when the consumer leaves the web page. To start out, I will likely be utilizing vite.js, which is an incredible instrument to start out a brand new undertaking shortly:

npm create vite@newest unknown-web-apis

When requested to pick out a framework, choose vanilla to create a vanilla javascript undertaking. And as soon as completed, go to the brand new folder, set up the mandatory npm packages and begin the developer server:

  cd unknown-web-apis
  npm set up
  npm run dev

Go to localhost:3000/, and you will notice your Vite undertaking up and working!

Firstly, we are going to direct to the /essential.js file and delete all of the boilerplate. Secondly, we are going to open /index.html, and contained in the #app div tag, we are going to add a video component with any video file you need. I used a dancing Yoshi one. 🙂

<div id="app">
    <video controls id="video">
        <supply src="https://www.smashingmagazine.com/2022/09/javascript-api-guide/./yoshi.mp4" />
    </video>
</div>

Again to /essential.js, we are going to add an occasion listener to the doc object listening to the visibilitychange occasion. We then can entry the doc.visibilityState property to see when the web page is seen or hidden.

doc.addEventListener("visibilitychange", () => {
    console.log(doc.visibilityState);
});

You possibly can go to the web page’s console and see the web page visibility standing change once you decrease the window or change to a different tab. Now, contained in the occasion listener, we are able to examine the doc.visibilityState property, pause the video when it’s hidden, and play it when seen. (In fact, we first choose the video component utilizing doc.querySelector().)

const video = doc.querySelector("#video");

doc.addEventListener("visibilitychange", () => {
    if (doc.visibilityState === "seen") {
        video.play();
    } else {
        video.pause();
    }
});

Now the video stops every time the consumer leaves the web page. One other use of the Web page Visibility API is to cease fetching pointless sources when the consumer doesn’t see the web page. To see this, we are going to write a operate to continually fetch a random quote from the quotable.io API and pause this conduct when the web page is hidden. Firstly, we are going to create a brand new div tag to retailer the quote in /index.html.

<div id="app">
    <video controls id="video">
        <supply src="https://www.smashingmagazine.com/2022/09/javascript-api-guide/./yoshi.mp4" />
    </video>
    <div id="quote"></div>
</div>

Again in /essential.js, we are going to use the Fetch API to make a name to the quotable.io endpoint https://api.quotable.io/random after which insert it into the quote div.

const quote = doc.querySelector("#quote");

const getQuote = async () => {
attempt {
const response = await fetch("https://api.quotable.io/random");
const {content material, creator, dateAdded} = await response.json();
const parsedQuote = ` <q>${content material}</q> <br> <p>- ${creator}</p><br> <p>Added on ${dateAdded}</p>`;
quote.innerHTML = parsedQuote;
} catch (error) {
console.error(error);
}
};

getQuote();

Let’s shortly clarify what is occurring proper right here. We first choose the quote component from the DOM. We then declare the getQuote operate, which is an async operate that enables us to make use of the await key phrase to attend till we fetch the info from the API. The information fetched is in JSON format, so we use the await key phrase another time to attend till the info is parsed right into a JavaScript object. The quotable.io API offers us—amongst different issues—the content material, creator, and dateAdded properties that we’ll inject and show into the quote div. This works, however the quote is simply fetched as soon as, so we are able to use setInterval() to name the operate each 10 seconds.

const quote = doc.querySelector("#quote");

const getQuote = async () => {
attempt {
const response = await fetch("https://api.quotable.io/random");
const {content material, creator, dateAdded} = await response.json();
const parsedQuote = ` <q>${content material}</q> <br> <p>- ${creator}</p><br> <p>Added on ${dateAdded}</p>`;
quote.innerHTML = parsedQuote;
} catch (error) {
console.error(error);
}
};

getQuote();

setInterval(getQuote, 10000);

If the consumer minimizes the window or switches the tab, the web page would nonetheless fetch the quotes, creating an pointless community load. To resolve this, we are able to examine if the web page is seen earlier than fetching a quote.

const getQuote = async () => {
    if (doc.visibilityState === "seen") {
        attempt {
            const response = await fetch("https://api.quotable.io/random");
            const {content material, creator, dateAdded} = await response.json();
            const parsedQuote = `
            <q>${content material}</q> <br> 
            <p>- ${creator}</p><br> 
            <p>Added on ${dateAdded}</p>`;
            quote.innerHTML = parsedQuote;
        } catch (error) {
            console.error(error);
        }
    }
};

getQuote();

setInterval(getQuote, 10000);

Now, we are going to solely fetch the quote if the web page is seen to the consumer.

Assist

Broadly supported

Internet Share API

What Is It?

The Internet Share API can be among the many least-known APIs however is extraordinarily helpful. It permits you to entry the operative system’s native sharing mechanism, which is very helpful to cell customers. With this API, you’ll be able to share textual content, hyperlinks, and information with out the necessity to create your individual sharing mechanisms or use third-party ones.

Use Instances

They’re fairly self-explanatory. You should utilize it to share content material out of your web page to social media or copy it to the consumer’s clipboard.

How To Use It?

The Internet Share API offers us two interfaces to entry the consumer’s sharing system:

1. navigator.canShare()
   Accepts the info you wish to share as an argument and returns a boolean argument relying on whether or not it’s shareable.

2. navigator.share()
   Returns a promise that can resolve if the sharing is profitable. It invokes the native sharing mechanism and accepts the info you wish to share as an argument. Be aware that it could possibly solely be known as if a consumer has pressed a hyperlink or button, i.e., it requires transient activation. The share knowledge is an object that may have the next properties:

   • url: URL to be shared,
   • textual content: textual content to be shared,
   • title: title to be shared,
   • information: array of File objects representing information to be shared.

To see tips on how to use this API, we are going to recycle our prior instance and make an choice to share our quotes utilizing the Internet Sharing API. To start out, we first need to make a share button in /index.html:

<div id="app">
    <video controls id="video">
        <supply src="https://www.smashingmagazine.com/2022/09/javascript-api-guide/./yoshi.mp4" />
    </video>
    <div id="quote"></div>
    <button kind="button" id="share-button">Share Quote</button>
</div>

We direct to /essential.js and choose the share button from the DOM. Then, we create an async operate to share the info we would like.

const shareButton = doc.querySelector("#share-button");

const shareQuote = async (shareData) => {
    attempt {
        await navigator.share(shareData);
    } catch (error) {
        console.error(error);
    }
};

Now, we are able to add a click on occasion listener to the shareButton component to callback the shareQuote operate. Our shareData.textual content worth would be the quote.textContent property and the shareData.url would be the web page URL i.e the location.href property.

const shareButton = doc.querySelector("#share-button");

const shareQuote = async (shareData) => {
    attempt {
        await navigator.share(shareData);
    } catch (error) {
        console.error(error);
    }
};

shareButton.addEventListener("click on", () => {
    let shareData = {
        title: "A Stunning Quote",
        textual content: quote.textContent,
        url: location.href,
    };

    shareQuote(shareData);
});

Now you’ll be able to share your quotes with anybody by means of your native operative system. Nonetheless, you will need to be aware that the Internet Share API will solely work if the context is safe, i.e., if the web page is served over https:// or wss:// URLs.

Assist

Poorly supported

Broadcast Channel API

What Is It?

One other API I wish to discuss is the Broadcast Channel API. It permits searching contexts to ship and obtain primary knowledge from one another. Looking contexts are parts like a tab, window, iframe, or anyplace a web page might be displayed. On account of safety causes, communication between searching contexts isn’t allowed until they’re of the identical origin and use the Broadcast Channel API. For 2 searching contexts to be of the identical origin, they have to share of their URL the identical protocol (e.g. http/https), area (e.g. instance.com), and port (e.g. :8080).

Use Instances

The Broadcast Channel API is usually used to maintain a web page’s state synced throughout completely different tabs and home windows to reinforce consumer expertise or for safety causes. It may also be used to know when a service is completed in one other tab or window. Some examples are:

• Log a consumer in or out throughout all tabs.
• Detect when an asset is uploaded and present it throughout all pages.
• Instruct a service employee to do some background work.

How To Use It?

The Broadcast Channel API entails a BroadcastChannel object that can be utilized to ship messages to different contexts. Its constructor has just one argument: a string that can work as an identifier to connect with the channel from different contexts.

const broadcast = new BroadcastChannel("new_channel");

As soon as we’ve got created a BroadcastChannel object with the identical identifier throughout two contexts, the brand new BroadcastChannel object can have two out there strategies to start out speaking:

• BroadcastChannel.postMessage() to ship a message throughout all linked contexts. It takes any sort of object as its solely argument with the intention to ship all kinds of knowledge.

broadcast.postMessage("Instance message");

• BroadcastChannel.shut() to shut the channel and point out to the browser that it gained’t obtain any extra messages so it could possibly accumulate them into the rubbish.

To obtain a message, the BroadcastChannel has a message occasion that we are able to take heed to utilizing an addEventListener or its onmessage property. The message occasion has a knowledge property with the info despatched and different properties to establish the context that despatched the message, equivalent to origin, lastEventId, supply, and ports.

broadcast.onmessage = ({knowledge, origin}) => {
    console.log(`${origin} says ${knowledge}`);
};

Let’s see tips on how to use the Broadcast Channel API through the use of our prior instance. Our purpose could be to make one other searching context with the identical origin and show the identical quote in each contexts. To do that, we are going to create a brand new folder named new-origin with a brand new /index.html and /essential.js information inside.

The /new-origin/index.html will likely be a brand new HTML boilerplate with a #quote div inside:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <hyperlink rel="icon" kind="picture/svg+xml" href="https://www.smashingmagazine.com/2022/09/javascript-api-guide/favicon.svg" />
        <meta title="viewport" content material="width=device-width, initial-scale=1.0" />
        <title>Vite App</title>
    </head>
    <physique>
        <div id="quote"></div>
        <script kind="module" src="./essential.js"></script>
    </physique>
</html>

Within the /new-origin/essential.js file, we are going to create a brand new broadcast channel and choose the #quote component from the DOM:

const broadcast = new BroadcastChannel("quote_channel");
const quote = doc.querySelector("#quote");

And in our prior /essential.js file, we are going to create a brand new BroadcastChannel object and join it to the "quote_channel". We can even modify the getQuote operate to ship the quote as a message to different contexts.

const broadcast = new BroadcastChannel("quote_channel");

//...

const getQuote = async () => {
attempt {
const response = await fetch("https://api.quotable.io/random");
const {content material, creator, dateAdded} = await response.json();
const parsedQuote = ` <q>${content material}</q> <br> <p>- ${creator}</p><br> <p>Added on ${dateAdded}</p>`;
quote.innerHTML = parsedQuote;
broadcast.postMessage(parsedQuote);
} catch (error) {
console.error(error);
}
};

Again within the /new-origin/essential.js file, we are going to take heed to the message occasion and alter the quote.innerHTML every time a brand new quote is distributed.

const broadcast = new BroadcastChannel("quote_channel");
const quote = doc.querySelector("#quote");

broadcast.onmessage = ({knowledge}) => {
    quote.innerHTML = knowledge;
};

Now you’ll be able to see how the quote in http://localhost:3000/new-origin/ modifications to the quote in http://localhost:3000. You too can discover how the quote doesn’t change when the http://localhost:3000 tab is hidden because it solely fetches a quote when its web page visibility standing is seen.

Assist

Broadly supported

Internationalization API

What It Ss?

When creating an online web page or app, it’s extraordinarily widespread to wish to translate its content material throughout different languages to achieve a wider viewers. Nonetheless, simply translating your web page’s textual content to whichever language you want isn’t sufficient to make your content material out there to audio system of that language since issues like dates, numbers, items, and so forth are completely different throughout international locations and will trigger confusion to your customers.

Let’s say you wish to show the date “November 8, 2022” in your webpage like “11/8/22”. This knowledge might be learn in three distinct methods relying on the reader’s nation:

• “November 8, 2022” or MM/DD/YY by individuals from the US.
• “August 11, 2022” or DD/MM/YY by individuals from Europe and Latam.
• “August 22, 2011” or YY/MM/DD by individuals from Japan, China, and Canada.

That is the place the Internationalization API (Or I18n API) comes to resolve formatting points throughout completely different languages and areas. The I18n API is an incredible instrument that has a number of makes use of, however we gained’t delve into them to not overcomplicate this text.

How To Use It?

The I18n API makes use of locale identifiers to work. A locale identifier is a string that expresses the consumer’s language, nation, area, dialect, and different preferences. To be exact, a locale identifier is a string that consists of subtags separated by hyphens. Subtags characterize consumer preferences like language, nation, area, or script and are formatted within the following manner:

1. “zh”: Chinese language (language);
2. “zh-Hant”: Chinese language (language) written in conventional characters (script);
3. “zh-Hant-TW”: Chinese language (language) written in conventional characters (script) as utilized in Taiwan (area).

There are extra subtags to handle extra customers’ preferences (if you wish to be taught extra, you’ll be able to examine the RFC definition of language tags), however to maintain it brief, the I18n API makes use of these locale identifiers to know tips on how to format all of the language-sensitive knowledge.

To be extra exact, the I18n API supplies an Intl object that brings a bunch of specialised constructors to work with language-sensitive knowledge. For my part, a few of the most helpful Intl constructors for internationalization are:

• Intl.DateTimeFormat()
  Used to format dates and instances.
• Intl.DisplayNames()
  Used to format language, area, and script show names.
• Intl.Locale()
  Used to assemble and manipulate locale identifier tags.
• Intl.NumberFormat()
  Used to format numbers.
• Intl.RelativeTimeFormat()
  Used to format relative time descriptions.

For our instance, we are going to give attention to the Intl.DateTimeFormat() constructor to format the quote’s dateAdded property relying on the consumer locale. The Intl.DateTimeFormat() constructor takes two arguments: the locale string that defines the date formatting conference and the choices objects to customise tips on how to format the dates.

The Intl.DateTimeFormat() created object has a format() methodology that takes two arguments: the Date object we wish to format and the choices object to customise tips on how to show the formatted date.

const logDate = (locale) => {
    const newDate = new Date("2022-10-24"); // YY/MM/DD
    const dateTime = new Intl.DateTimeFormat(locale, {timeZone: "UTC"});
    const formatedDate = dateTime.format(newDate);
    console.log(formatedDate);
};

logDate("en-US"); // 10/24/2022
logDate("de-DE"); // 24.10.2022
logDate("zh-TW"); // 2022/10/24

Be aware: On the Intl.DateTimeFormat constructor’s choices argument, we set the timeZone property to "UTC" so the date isn’t formatted to the consumer’s native time. In my case, the date is parsed to “10/23/2022” with out the timeZone possibility.

As you’ll be able to see, the dateTime.format() modifications the date relying on the locale’s date formatting conference. We will implement this conduct on the quotes’ date utilizing the navigator.language world property, which holds the consumer’s most well-liked locale. To do that, we are going to create a brand new operate that takes a date string (in YYYY-MM-DD format) and returns the date formatted relying on the consumer’s locale.

const formatDate = (dateString) => {
    const date = new Date(dateString);
    const locale = navigator.language;
    const dateTimeFormat = new Intl.DateTimeFormat(locale, {timeZone: "UTC"});

    return dateTimeFormat.format(date);

};

We will add this operate contained in the getQuote() operate to parse the dateAdded date.

const getQuote = async () => {
    if (doc.visibilityState === "seen") {
        attempt {
            const response = await fetch("https://api.quotable.io/random");
            const {content material, creator, dateAdded} = await response.json();
            const parsedQuote = `
            <q>${content material}</q> <br> 
            <p>- ${creator}</p><br> 
            <p>Added on ${formatDate(dateAdded)}</p>`;
            quote.innerHTML = parsedQuote;
            broadcast.postMessage(parsedQuote);
        } catch (error) {
            console.error(error);
        }
    }
};

With this, our quotes are localized to the consumer’s most well-liked language! In my case, my navigator.language worth is "en", so my dates are formatted to MM/DD/YY.

Assist

Broadly supported

Conclusion

After studying this text, now you can flex about understanding the existence of those APIs and tips on how to use them. Though they had been ranked final in consciousness within the State of JS Survey, they’re extraordinarily helpful, and understanding tips on how to use them will certainly improve your creating expertise. The truth that these highly effective APIs aren’t very identified signifies that there are nonetheless helpful APIs you and I nonetheless don’t learn about, so it’s the right time to discover and discover that API that can simplify your code and prevent a ton of time creating.

I hope you favored this text and till the following time!

(vf, yk, il)