Detecting Fonts Ready

Figuring out when sources are loaded is a key a part of constructing useful, elegant web sites. We’re used to utilizing the DOMContentLoaded occasion (generally known as “domready”) however do you know there’s an occasion that tells you when all fonts have loaded? Let’s discover ways to use doc.fonts!

The doc.fonts object contains a prepared property which is a Promise representing if fonts have been loaded:

// Await all fonts being loaded
await doc.fonts.prepared;

// Now do one thing!  Perhaps add a category to the physique
doc.physique.classList.add('fonts-loaded');

Font information may be comparatively massive so you may by no means assume they’ve loaded shortly. One merely await from doc.fonts.prepared offers you the reply!

Digicam and Video Management with HTML5
Consumer-side APIs on cell and desktop units are shortly offering the identical APIs. After all our cell units obtained entry to a few of these APIs first, however these APIs are slowly making their strategy to the desktop. A kind of APIs is the getUserMedia API…

Choose Dropdowns, MooTools, and CSS Print
I do know I’ve harped on this again and again nevertheless it’s essential to reinforce pages for print. You are able to do some issues utilizing easy CSS however at the moment’s put up options MooTools and jQuery. We’ll be taking the choices of a SELECT aspect and producing…