Sherry Day

Posted on Jun 2, 2022

What are the most underrated browser features and APIs?

#webdev #javascript #html #discuss

Please share!

Top comments (40)

Bruno • Jun 2 '22

I think the navigator APIs like deviceMemory are really worth understanding and making use of in a lot of cases. Whether checking on device capacity or network bandwidth preferences, tailoring the experience to the visitor is a great idea.

developer.mozilla.org/en-US/docs/W...

jzombie • Jun 2 '22

Interesting, I'll probably use that API in a program I'm developing: reshell.org/memory-info

Radu Deleanu • Jun 3 '22

What is this thing? Looks massive.

jzombie • Jun 3 '22

It's a UI that I'm making for a few projects which share some common base functionality, I'm creating under the monicker "Phantom architecture"...

github.com/zenOSmosis

Camco • Jun 3 '22

OMG. This is fantastic

jzombie • Jun 3 '22

Thank you!

jzombie • Jun 5 '22

@camco. Here's another version of it w/ audio streaming support: speaker.app/

Jan Küster • Jun 3 '22

MutationObserver: Detect changes in DOM elements, the right way.

IntersectionObserver: detect elements entering the viewport or are close to entering.

Both relieve you of writing code, that has a high chance of being imperformant or bloated.

Stephanie Handsteiner • Jun 4 '22

I'll add the ResizeObserver to that list.

Giovanni Mazzuoccolo • Jun 3 '22 • Edited

Html offers a basic accordion just using details and summary html tags. More on mdn developer.mozilla.org/en-US/docs/W...

Stephanie Handsteiner • Jun 4 '22

The <details>-Tag is still not a replacement for an accordion.

adrianroselli.com/2019/04/details-...

Giovanni Mazzuoccolo • Jun 4 '22

Thanks for the article!
Some reasons are valid however other ones are outdated (browser support, for example). It is not a replacement. It is something with basic functionality that reseems the behiavor of the accordion. And not using a javascript library to achieve something simple for me is a big win.

codingjlu • Jun 3 '22

I'd think that Web Components should be super popular right now, but right now only 5% to 8% of websites use it. That's slightly sad, I think. It's an amazing feature that should be emphasized, built right into the browser.

Danny Engelman • Jun 5 '22 • Edited

There are Browser Vendor and Userland Web Components.

The metrics do not count input, video and many other tags. Those are all built, by browser vendors, with Web Component technology. If you open YouTube, your are using Web Components.

codingjlu • Jun 6 '22

I'm not sure what you're trying to say here. Using Web Component technology doesn't mean you're using web components, and I'm certain most people wouldn't classify input and video tags as web components, albeit even if they're built with its technologies. The Web Components I'm emphasizing here isn't the technology or whatever, but rather the API as we all know it. Nice looking custom markup tags and a controller class with customElements.define magic. Also, in this post we're talking about underrated browser features as thought by web developers, not by random people that visit Youtube that's built on Polymer or whatever.

Christian Kozalla • Jun 2 '22

Nice question, I recently though about what would be my favorite browser API, because there are so many of them, and basically you get them for free (if support is available across the major browser vendors..)

For example, I saw an implementation of a custom parser for URL params.. written long time ago. And I thought. May the browser support of URLSearchParams wasn't that great at that time..(?)

But if we're looking for most unterrated browser APIs, the performance API comes to my mind first. Or the FormData interface which I recently used in a side-project. FormData makes it really easy to obtain data from a <form> without dealing with controlled components (in React) or whatever 😄

Phan Dũng Trí • Jun 4 '22

Yes, when people talk about form in React, they often make every field in the form become controlled component, which is not good for the performance. FormData is the powerful feature that allows working with form easily in an effective way.

Alex Ágreda • Jun 13 '22

can you point me to a good article about this: using FormData interface instead of dealing with controlled components, please

Christian Kozalla • Jun 13 '22

I've used MDN alot. For example this post
developer.mozilla.org/en-US/docs/W...

One thing I've learnt is to use Object.fromEntries(formData.entries()) to get the values from the form. See the snippet for more details

// html
<form id="myform">
</form>

// js
const formEl = document.getElementById("myform");
formEl.addEventListener("submit", submitFetch);

function submitFetch(event) {
  event.preventDefault();
  const formData = new FormData(this);

  // Obtain values from the named inputs inside the form
  const data = Object.fromEntries(formData.entries());

  try {
    fetch(url, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
     body: JSON.stringify(data),
   }).then((response) => {})
} catch { /* ... */ }

Alex Ágreda • Jun 13 '22

thanks

Christian Kozalla • Jun 13 '22

Oh, and if you are using it in React, you'd likely pass a ref to the FormData constructor - like new FormData(formElRef) instead of getting the element with document.getElementById

ecyrbe • Jun 3 '22

I think it's webrtc. It's used by all major communication and Real Time apps, but almost no one talks about it.

jzombie • Jun 3 '22

I'll second that.... WebRTC data channels and WebSockets are my thing.

Danny Engelman • Jun 5 '22

Ask anyone using WebRTC if they even know about Server Sent Events and the EventSource API

I see so many projects using a bloated WebRTC server, because a developer didn't read the F* manual.

jzombie • Jun 5 '22

So, this project actually uses a "virtual server" (peer in the middle) which proxies streams to all other participants. Maybe it's a bad idea, but here you go: speaker.app/

jzombie • Jun 5 '22

I had no clue about these APIs. Thanks for sharing.

Imagineee • Jun 4 '22

I mean just read the whole web API list, and I guarantee you will find something you never knew existed.

MDN Web API

Ben Halpern • Jun 2 '22

This is a post that deserves the subscribe button! Can't wait to see what people say.

Rajesh Joshi • Jun 5 '22

I wrote a post, on project that I currently working on.

It is using Chrome's APIs underneath.

Post -> Talk to people who are on the same site 🌎 | Chrome Extension

jzombie • Jun 3 '22

I love the fact that you can extend (or even override) some native browser APIs in order to do things such as spy on third party SDKs when they are opening WebSocket / Worker threads: reshell.org/native-spy-agent

Danny Engelman • Jun 5 '22 • Edited

SSE - Server Sent Events, and the EventSource API

Damien Tailhades ⚡ • Jun 3 '22

I often use the Intl API, really cool API I think.

jzombie • Jun 4 '22

developer.mozilla.org/en-US/docs/W...

Intl
The Intl object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting. The Intl object provides access to several constructors as well as functionality common to the internationalization constructors and other language sensitive functions.