Today I Learned

TIL, 2021-10-24

Angular Basics: 10 Helpful Native Web APIs Every New JavaScript Developer Should Know

Reference

  • LocalStorage and SessionStorage.
    • sessionStorage - for the page sessions’ duration.
    • localStorage - not flushed when the browser is closed and reopened.
  • Clipboard API - Clipboard API to interact with clipboard commands like cut, copy, and paste.
// Copy some text in the clipboard
await navigator.clipboard.writeText("Text to copy");

// Read text inside the clipboard
const  clipText  =  await navigator.clipboard.readText();

// Listen to the copy event
document.addEventListener("copy", async  function () {
// ...
});

// Listen to the paste event
document.addEventListener("paste", async  function () {
// ...
});
  • Geolocation API
navigator.geolocation.getCurrentPosition(
  function (positions) {
    var coordinates = position.coordinates;
    console.log("Your current position is:");
    console.log(`Latitude : ${coordinates.latitude}`);
    console.log(`Longitude: ${coordinates.longitude}`);
    console.log(`More or less ${coordinates.accuracy} meters.`);
  },
  function (err) {
    console.warn(`ERROR(${err.code}): ${err.message}`);
  }
);

// Will call the first function each time the position of the device changes
const  watchId  = navigator.geolocation.watchPosition(
  function (positions) {
    var coordinates = position.coordinates;
    console.log("Your current position is:");
    console.log(`Latitude : ${coordinates.latitude}`);
    console.log(`Longitude: ${coordinates.longitude}`);
    console.log(`More or less ${coordinates.accuracy} meters.`);
  },
  function (err) {
    console.warn(`ERROR(${err.code}): ${err.message}`);
  }
);
  • The Page Visibility API - check when document becomes visible or hidden. Use cases:
    • Save resources and improve the page performance by avoiding unnecessary tasks when the document is not visible
    • Pause an image carousel and prevent it from advancing to the next slide unless the user views the page
    • Avoid pulling data from an API unless the page is focused
  • ResizeObserver API - triggered when the dimensions of an element API changes.
    • Reduce or increase font-size depending on element’s dimensions.
  • URL API
  • Vibration API
    • Physical feedback.
    • Can vibrate the hardware when the user does a specific action in the interface, and notify user that something happened.
  • Full screen API.
  • Lazy-load API.

This project is maintained by daryllxd