Today I Learned - Rocky Kev

TIL about the Network Information API

POSTED ON:

TAGS: browser api networks

NOTE: This only works in Chrome/Chromium (like Edge)
Safari and Firefox have experimental versions that they're working on. But some requires the flag to be turned on.

MDN

The Network Information API provides information about the network types(e.g., 'wifi', 'cellular', etc.), save data mode, bandwidth and many more.


let preloadVideo = true;
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
if (connection) {
  if (connection.effectiveType === 'slow-2g') {
    preloadVideo = false;
  }
}

Direct link to the demo: https://demo.greenroots.info/web-apis/web-api-network-info/

via Tapas Adhikary's 10 lesser-known Web APIs you may want to use

Related TILs

Tagged: browser

TIL minimal responsive image component

So when I saw that JS frameworks made image wrapper components (like Nuxt was with nuxt-img), I was blown away and wanted this power at work.

TIL why google recommends you avoid document.write()

By injecting it with code, it bypasses the preload scanner. This means that the browser can’t request this file until it’s actually run the '<script>' block that inserts it, which is very much just-in-time (and too late).

TIL the history of fonts and COLRv1

COLRv1 fonts, have a smaller footprint, vector-scalable, reposition-able, gradient-featuring, and blend-mode powered fonts that accept parameters to customize the font per use case or to match a brand.