In this post, I will cover some of the lesser known APIs that are useful for developers, with examples. ## [Fullscreen](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) To make elements to display themselves fullscreen, previously you could do it with css ```css position: fixed; left: 0; right: 0; top: 0; bottom: 0; ``` Things are getting easier with fullscreen API. ### Use cases - Creating a fullscreen video player or a fullscreen image viewer. - Entering focus mode ### Examples ```html

``` ```js const container = document.getElementById("wrapper"); const triggerBtn = document.getElementById("full"); const exitBtn = document.getElementById("exit"); triggerBtn.addEventListener("click", () => { // Go fullscreen container.requestFullscreen(); }); exitBtn.addEventListener("click", () => { // Exit fullscreen container.exitFullscreen(); }); ``` ## IntersectionObserver ### Use cases - Infinite scrolling - Lazy loading images - Event tracking ### Examples Hightlight images with border when they are fully visible on the screen. Previously to achieve this, you would have to do it in `pull` way by keep checking the boundary of the images intervally. With the `IntersectionObserver` API, you simply do the `observation` with specified `callback` and will get notified when it happens. [Full Demo](https://codesandbox.io/s/lazy-load-image-drsfih?file=/src/index.js) ```js // Populate mock images into html const container = document.getElementById("container"); for (let i = 0; i < 30; i++) { const imgElement = document.createElement("img"); imgElement.src = "https://avatars.githubusercontent.com/u/7504237?v=4"; imgElement.dataset.index = i; container.appendChild(imgElement); } // Specify the options for the observer (which mutations to observe) let options = { threshold: [0, 0.25, 0.5, 0.75, 1], // The timing of callback when intersetion reaches the threshold }; // Create the observer let observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.intersectionRatio === 1) { entry.target.style.border = "1px solid teal"; } else { entry.target.style.border = "none"; } }); }, options); let imgs = document.querySelectorAll("img"); for (let img of imgs) { // Observe observer.observe(img); } ``` ## [Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API) The `Page Visibility API` triggers an event whenever the page visibility status changes (i.e. becomes visible or hidden) ### Use cases - Pause or resume a video when the page is hidden or visible ### Examples ```js document.addEventListener("visibilitychange", function () { if (document.visibilityState === "visible") { // page is visible, resume video } else { // page is hidden, stop video } }); ``` ## [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API) The Web Share API provides a mechanism for sharing text, links, files etc with sharing mechanisms of the underlying operating system. ### Use cases - Share content from your page to social media. ### Examples [Full Demo](https://codesandbox.io/s/web-share-bji41q?file=/src/index.js:0-399) ```html ``` ```js const shareBtn = document.getElementById("share"); const share = (data) => { if (navigator.canShare(data)) { return navigator.share(data); } throw new Error("The data is NOT shareable"); }; shareBtn.addEventListener("click", () => { const shareData = { title: "MDN", text: "Learn web development on MDN!", url: "https://developer.mozilla.org", }; share(shareData); }); ``` ## [Number.prototype.toString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString) The `toString` method returns a string representatino of the specified number. ### Use cases - Get unicode representation of a number ### Example ```js let s = "你"; let codePoint = s.charCodeAt(0); console.log(codePoint); // 20320 let hex = codePoint.toString(16); // to hex format console.log(hex); // 4f60 console.log(String.fromCharCode("0x4f60", 20320)); // 你你 console.log("\u4f60"); // 你 ``` ## [JSON.stringify(value[, replacer[, space]])](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) The `JSON.stringify` method converts a JavaScript value to a JSON string. ### Use cases - Replace or filter values with a `replacer` argument, to avoid beforehand manipulation with original data. - Beautify the output with `space` argument ### Examples ```js // Replacer is a function - apply replacer before stringify the value JSON.stringify( { a: 4, b: [3, 5, "hello"], }, (key, val) => { if (typeof val === "number") { return val * 2; } return val; } ); //{"a":8,"b":[6,10,"hello"]} ``` ```js // Replacer is an array - use replacer as a white list to filter the keys JSON.stringify( { a: 4, b: { a: 5, d: 6, }, c: 8, }, ["a", "b"] ); //{"a":4,"b":{"a":5}} ``` ```js JSON.stringify( { a: [3, 4, 5], b: "hello", }, null, "|--\t" ); /** { |-- "a": [ |-- |-- 3, |-- |-- 4, |-- |-- 5 |-- ], |-- "b": "hello" } */ ``` ## [Date.prototype.getDate](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getDate) Returns the day of the month for the specified date according to local time. ### Use cases - Get the number of days in a month ### Examples ```js // The 0th day of next month is the last day of the current month. function daysInMonth(year, month) { let date = new Date(year, month + 1, 0); return date.getDate(); } /** * Note that date month in JS starts with 0 */ // How many days in March 2017 console.log(daysInMonth(2017, 2)); // 31 // How many days in Feb 2017 console.log(daysInMonth(2017, 1)); // 28 // How many days in Feb 2016 console.log(daysInMonth(2016, 1)); // 29 ```

n0rush

Useful APIs you probably don't know about

Join Our Newsletter. No Spam, Only the good stuff.