JavaScript Tutorials
JavaScript print Events
Media queries provide a great way to programmatically change behavior depending on viewing state. We can target styles to device, pixel ratio, screen size, and even print. That said, it's also nice to have JavaScript events that also allow us to change behavior. Did...
How to Control CSS Animations with JavaScript
When it comes to animations on the web, developers need to measure the animation's requirements with the right technology -- CSS or JavaScript. Many animations are manageable with CSS but JavaScript will always provide more control. With
document.getAnimations
, however, you can use JavaScript to manage...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...How to Internationalize Numbers with JavaScript
Presenting numbers in a readable format takes many forms, from visual charts to simply adding punctuation. Those punctuation, however, are different based on internationalization. Some countries use
,
for decimal, while others use.
. Worried about having to code for all this madness?How to Extend Prototypes with JavaScript
One of the ideological sticking points of the first JavaScript framework was was extending prototypes vs. wrapping functions. Frameworks like MooTools and Prototype extended prototypes while jQuery and other smaller frameworks did not. Each had their benefits, but ultimately all these years later I still...
How to Use window.crypto in Node.js
I've been writing a bunch of jest tests recently for libraries that use the underlying
window.crypto
methods likegetRandomValues()
andwindow.crypto.subtle
key management methods. One problem I run into is that thewindow.crypto
object isn't available, so I need to shim it.To use thewindow.crypto
...Convert Fahrenheit to Celsius with JavaScript
The United States is one of the last bodies that refuses to implement the Celsius temperature standard. Why? Because we're arrogant and feel like we don't need to change. With that said, if you code for users outside the US, it's important to provide localized weather...
Detect System Theme Preference Change Using JavaScript
JavaScript and CSS allow users to detect the user theme preference with CSS'
prefers-color-scheme
media query. It's standard these days to use that preference to show the dark or light theme on a given website. But what if the user changes their preference...How to Use Storage in Web Extensions
Working on a web extension is an interesting experience -- you get to taste web while working with special extension APIs. One such API is
storage
-- the web extension flavor of persistence. Let's explore how you can usesession
andlocal
storage within...Skip or Only Run a Test with JavaScript Mocha
Whenever I start to feel anxiety about a big change I'm making, I start writing more unit tests. I'll write down my fear and then write a test that attacks, and eventually relaxes, that fear. There are two actions that I've been frequently using...