Detecting Fonts Ready
Knowing when resources are loaded is a key part of building functional, elegant websites. We're used to using the DOMContentLoaded
event (commonly referred to as "domready") but did you know there's an event that tells you when all fonts have loaded? Let's learn how to use document.fonts
!
The document.fonts
object features a ready
property which is a Promise representing if fonts have been loaded:
// Await all fonts being loaded
await document.fonts.ready;
// Now do something! Maybe add a class to the body
document.body.classList.add('fonts-loaded');
Font files can be relatively large so you can never assume they've loaded quickly. One simply await
from document.fonts.ready
gives you the answer!
CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...
It's no secret that Facebook has become a major traffic driver for all types of websites. Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly. And of course there are Facebook "Like" and "Recommend" widgets on every website. One...
I was recently checking out Google Plus because they implement some awesome effects. I opened the console and same the following message:
WARNING!
Using this console may allow attackers to impersonate you and steal your information using an attack called Self-XSS.
Do not enter or paste code that you...
One thing I love doing is duplicating OS functionalities. One of the things your OS allows you to do easily is move from one item to another. Most of the time you're simply trying to get to the next or the previous item.