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!
![Welcome to My New Office]()
My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...
![Regular Expressions for the Rest of Us]()
Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...
![Create a Sexy Persistent Header with Opacity Using MooTools or jQuery]()
I've been working with the Magento eCommerce solution a lot lately and I've taken a liking to a technique they use with the top bar within their administrative control panel. When the user scrolls below a specified threshold, the top bar becomes attached to the...
![Create Twitter-Style Dropdowns Using MooTools]()
Twitter does some great stuff with JavaScript. What I really appreciate about what they do is that there aren't any epic JS functionalities -- they're all simple touches. One of those simple touches is the "Login" dropdown on their homepage. I've taken...
