With the rapidly changing technologies, developers are being provided with incredible new tools and APIs. But it has been seen that out of the 100+ APIs, only 5% of them are actively used by developers.
Let's take a look at some of the useful Web APIs that can help you skyrocket your website to the moon!🌕🚀
1. Screen Capture API
The Screen Capture API, as the name suggests, allows you to capture the contents of a screen, making the process of building a screen recorder a piece of cake.
You need a video element to display the captured screen. The start button will start the screen capture.
<video id="preview" autoplay>
Your browser doesn't support HTML5.
</video>
<button id="start" class="btn">Start</button>
const previewElem = document.getElementById("preview");
const startBtn = document.getElementById("start");
async function startRecording() {
previewElem.srcObject =
await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true,
});
}
startBtn.addEventListener("click", startRecording);
2. Web Share API
The Web Share API allows you to share text, links, and even files from a web page to other apps installed on the device.
async function shareHandler() {
navigator.share({
title: "Tapajyoti Bose | Portfolio",
text: "Check out my website",
url: "https://tapajyoti-bose.vercel.app/",
});
}
NOTE: To use the Web Share API, you need an interaction from the user. For example, a button click or a touch event.
3. Intersection Observer API
The Intersection Observer API allows you to detect when an element enters or leaves the viewport. This is exceptionally useful for implementing infinite scroll.
NOTE: The demo uses React because of my personal preference, but you can use any framework or vanilla JavaScript.
4. Clipboard API
The Clipboard API allows you to read and write data to the clipboard. This is useful for implementing the copy to clipboard functionality.
async function copyHandler() {
const text = "https://tapajyoti-bose.vercel.app/";
navigator.clipboard.writeText(text);
}
5. Screen Wake Lock API
Ever wondered how YouTube prevents the screen from being switched off while playing the video? Well, that's because of the Screen Wake Lock API.
let wakeLock = null;
async function lockHandler() {
wakeLock = await navigator.wakeLock.request("screen");
}
async function releaseHandler() {
await wakeLock.release();
wakeLock = null;
}
NOTE: You can only use the Screen Wake Lock API if the page is already visible on the screen. Otherwise, it would throw an error.
6. Screen Orientation API
The Screen Orientation API allows you to check the current orientation of the screen and even lock it to a specific orientation.
async function lockHandler() {
await screen.orientation.lock("portrait");
}
function releaseHandler() {
screen.orientation.unlock();
}
function getOrientation() {
return screen.orientation.type;
}
7. Fullscreen API
The Fullscreen API allows you to display an element or the entire page in full screen.
async function enterFullscreen() {
await document.documentElement.requestFullscreen();
}
async function exitFullscreen() {
await document.exitFullscreen();
}
NOTE: To use the Fullscreen API too, you need an interaction from the user.
Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja
Thanks for reading
Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork
Want to see what I am working on? Check out my Personal Website and GitHub
Want to connect? Reach out to me on LinkedIn
Follow me on Instagram to check out what I am up to recently.
Follow my blogs for bi-weekly new Tidbits on Dev
FAQ
These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.
-
I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles: Would you mentor me?
Sorry, I am already under a lot of workload and would not have the time to mentor anyone.
Top comments (49)
Liar - I knew them all 😜
Especially intersection observers should be used on many pages in order to increase the performance.
Another great tool for custom management systems or other content like this is the Broadcast channel Api. The Drag and Drop API is also interesting (to avoid library overhead)
Interesting.
Nice Post.
I'd suggest you to add links to the according MDN pages.
Note that the WebShare API is not available (yet) in Firefox Desktop: developer.mozilla.org/en-US/docs/W...
Learned one or two thanks 🙏
The clipboard API is one of the more powerful tools mentioned on this post, in my opinion. You can add entire files, including images, to a persons clipboard in association with any event. That's a lot of flexibility.
Really great API's.
Please is it possible to share media with the Web Share Api?
the MDN docs for the Web Share API does state:
the docs for the
navigator.share()
also includes a list of shareable types. so yes, you can indeed share "media files". (:I particularly like screen Capture API
Lovely
Wow it's just amazing, thanks dude. Such a helpful post. My takeaway, Screen Capture API & Intersection Observer API 😋
Lovely, thanks for sharing.
Wow! This is a great list. I wasn't aware of any of these native APIs. Thanks for sharing.👍