DEV Community

Cover image for What are the most underrated browser features and APIs?

What are the most underrated browser features and APIs?

Sherry Day on June 02, 2022

Please share!

Collapse
 
brunoj profile image
Bruno

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

Collapse
 
jzombie profile image
jzombie

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

Collapse
 
deleanuradu profile image
Radu Deleanu

What is this thing? Looks massive.

Thread Thread
 
jzombie profile image
jzombie

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

Thread Thread
 
camco profile image
Camco

OMG. This is fantastic

Thread Thread
 
jzombie profile image
jzombie

Thank you!

Thread Thread
 
jzombie profile image
jzombie

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

Collapse
 
jankapunkt profile image
Jan Küster

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.

Collapse
 
stephanie profile image
Stephanie Handsteiner

I'll add the ResizeObserver to that list.

Collapse
 
giovannimazzuoccolo profile image
Giovanni Mazzuoccolo • Edited

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

Collapse
 
stephanie profile image
Stephanie Handsteiner

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

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

Collapse
 
giovannimazzuoccolo profile image
Giovanni Mazzuoccolo

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.

Collapse
 
codingjlu profile image
codingjlu

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.

Collapse
 
dannyengelman profile image
Danny Engelman • 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.

Collapse
 
codingjlu profile image
codingjlu

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.

Collapse
 
christiankozalla profile image
Christian Kozalla

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 😄

Collapse
 
phandungtri profile image
Phan Dũng Trí

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.

Collapse
 
agredalex profile image
Alex Ágreda

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

Collapse
 
christiankozalla profile image
Christian Kozalla

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 { /* ... */ }
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
agredalex profile image
Alex Ágreda

thanks

Thread Thread
 
christiankozalla profile image
Christian Kozalla

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

Collapse
 
ecyrbe profile image
ecyrbe

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

Collapse
 
jzombie profile image
jzombie

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

Collapse
 
dannyengelman profile image
Danny Engelman

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.

Thread Thread
 
jzombie profile image
jzombie

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/

Thread Thread
 
jzombie profile image
jzombie

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

Collapse
 
imagineeeinc profile image
Imagineee

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

MDN Web API

Collapse
 
ben profile image
Ben Halpern

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

subscribe btn

Collapse
 
rajeshj3 profile image
Rajesh Joshi

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

Collapse
 
jzombie profile image
jzombie

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

Collapse
 
dannyengelman profile image
Danny Engelman • Edited

SSE - Server Sent Events, and the EventSource API

Collapse
 
damientailhades profile image
Damien Tailhades ⚡

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

Collapse
 
jzombie profile image
jzombie

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.

Collapse
 
endymion1818 profile image
Ben Read

Love that you used the Mosaic logo for this. Brings back memories.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
frontendplace profile image
Ron Jonk

Broadcastchannel is more powerfull then window.postmessage api

Collapse
 
stephanie profile image
Stephanie Handsteiner

In regards to upcoming APIs, as in not yet fully supported, the Barcode Detection API is insane. developer.mozilla.org/en-US/docs/W...

Collapse
 
wetndusty profile image
wetndusty

XSLT transformation - good standardized way dynamically move logic from server side to client side

Collapse
 
dannyengelman profile image
Danny Engelman

+1
May Microsoft SharePoint live forever!

Collapse
 
gibbitz profile image
Paul Fox

And Ektron! srsly why dd we send so many angle brackets over the phone lines back then?