Useful APIs you probably don't know about
Published: 2022-10-10 16:28:13

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
<!--  html -->
<div id="wrapper">
  <button id="full">Enter full screen</button>
  <button id="exit">Exit full screen</button>
</div>
```

```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
<!-- html -->
<body>
  <button id="share">Share</button>
</body>
```

```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
```