Realizing 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 learn 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! Possibly add a category to the physique
doc.physique.classList.add('fonts-loaded');
Font information will be comparatively giant so you possibly can by no means assume they’ve loaded rapidly. One merely await from doc.fonts.prepared offers you the reply!
Create a CSS Flipping Animation
CSS animations are a variety of enjoyable; the fantastic thing about them is that via many easy properties, you possibly can create something from a sublime fade in to a WTF-Pixar-would-be-proud impact. One CSS impact someplace in between is the CSS flip impact, whereby there’s…
Create a Clearable TextBox with the Dojo Toolkit
Usability is a key characteristic when creating person interfaces; it is all within the particulars. I used to be just lately utilizing my iPhone and it dawned on my how superior the “x” icon is in its enter parts. No holding the delete key down. No urgent it a…
Translate Content material with the Google Translate API and JavaScript
Observe: For this tutorial, I am utilizing version1 of the Google Translate API. A more recent REST-based model is offered. In a really perfect world, all web sites would have a characteristic that allowed the person to translate a web site into their native language (or much more ideally, translation could be…
