5 awesome JavaScript APIs

There are plenty of great JavaScript APIs around right now. Here we've picked five for you to explore in your web projects. Combine them with our pick of the best HTML APIs to help enhance your sites' user experience.

01. Intersection Observer

Status: Working draft
Read more: W3C summary

This JavaScript API can be used to understand the visibility and position of DOM elements (known as 'targets') relative to a containing element (the 'root'). Use it to fire a callback whenever an element enters and exits a certain area. This API is best for lazy loading or infinite scroll effects.

02. Reporting Observer

Read more: W3C summary

Part of the Reporting API, Reporting Observers observe some types of reports from JavaScript. Use them to get notified when the browser has to intervene – for example, if it has to provide a fallback for a slow-loading font.

03. OffscreenCanvas

Read more: Google Developers summary

Drawing to a <canvas> is an expensive task for a browser. This new API enables you to render graphics off the main thread, without hitting the DOM.

04. Internationalisation API

Read more: MDN web docs

Known by the namespace Intl, the ECMAScript Internationalization API provides language-sensitive string comparison, number formatting, and date and time formatting. Use it to avoid sending heavy libraries and show dates, numbers and strings in a format that makes sense in the user’s location.

05. CSS Paint API

Read more: Google Developers summary

The CSS Paint API – also known as CSS Custom Paint – enables you to programmatically generate an image whenever a CSS property expects one. Use JavaScript to generate dynamic backgrounds, borders and image masks and apply them in CSS without a heavy performance hit. This API is about to be enabled by default in Chrome Stable.

This article originally appeared in Web Designer magazine. Buy issue 280, or subscribe now.

Read more: