Select Page

Category: JavaScript

The Thinking Behind Simplifying Event Handlers

Events are used to respond when a user clicks somewhere, focuses on a link with their keyboard, and changes the text in a form. When I first started learning JavaScript, I wrote complicated event listeners. More recently, I’ve learned how to reduce both the amount of code I write and the number of listeners I need. Let’s start with a simple example: a few draggable boxes. We want to show the user which colored box they dragged. R Y G Drag a box See the Pen Dragstart events by Tiger Oakes (@NotWoods) on CodePen. The intuitive way to do...

Read More

A Few Functional Uses for Intersection Observer to Know When an Element is in View

You might not know this, but JavaScript has stealthily accumulated quite a number of observers in recent times, and Intersection Observer is a part of that arsenal. Observers are objects that spot something in real-time — like birdwatchers going to their favorite place to sit and wait for the birds to come. Different observers observe different things (not everyone watches hawks). The very first observer I came to know was the Mutation Observer that looks for changes to the DOM tree. It was a one-of-a-kind at the time, but now we have many more observers. Intersection Observer observes the...

Read More

Undefined: The Third Boolean Value

I wanted to implement a notification message in one of my projects, similar to what you’d see in Google Docs while a document is saving. In other words, a message shows up indicating that the document is saving every time a change is made. Then, once the changes are saved, the message becomes: “All changes saved in Drive.” Let’s take a look at how we might do that using a boolean value, but actually covering three possible states. This definitely isn’t the only way to do this, and frankly, I’m not even sure if it’s the best way. Either...

Read More

Differential Serving

There is “futuristic” JavaScript that we can write. “Stage 0” refers to ideas for the JavaScript language that are still proposals. Still, someone might turn that idea into a Babel plugin and it could compile into code that can ship to any browser. For some of these lucky proposals, Stage 0 becomes 1, 2, 3, and, eventually, an official part of the language. There used to be a point where even the basic features of ES6 were rather experimental. You’d never ship an arrow function to production &dash; you’d compile it to ES5 and ship that instead. But ES6 (aka ES2015, four years ago!) isn’t experimental anymore. Its features aren’t proposals, drafts, or candidates. They are finished parts of the language, with widespread support. The main sticking points with browser support are IE <= 11 and Safari <= 9. It's entirely possible you don't support those browsers. In that case, you're free to ship ES6 features to production, and you probably should, as your code will be smaller and more efficient than if you compiled it to ES5. Philip ran some tests and his results suggest both file sizes and parse/eval times can cut in half or better by adopting the new features. However, if you do need to support browsers that lack support, you’ll need to compile to ES5, but it doesn’t mean you need to ship ES5...

Read More

Understanding Event Emitters

Consider, a DOM Event: const button = document.querySelector("button"); button.addEventListener("click", (event) => /* do something with the event */) We added a listener to a button click. We’ve subscribed to an event being emitted and we fire a callback when it does. Every time we click that button, that event is emitted and our callback fires with the event. There may be times you want to fire a custom event when you’re working in an existing codebase. Not specifically a DOM event like clicking a button, but let’s say you want to emit an event based on some other trigger and have an event respond. We need a custom event emitter to do that. An event emitter is a pattern that listens to a named event, fires a callback, then emits that event with a value. Sometimes this is referred to as a “pub/sub” model, or listener. It’s referring to the same thing. In JavaScript, an implementation of it might work like this: let n = 0; const event = new EventEmitter(); event.subscribe("THUNDER_ON_THE_MOUNTAIN", value => (n = value)); event.emit("THUNDER_ON_THE_MOUNTAIN", 18); // n: 18 event.emit("THUNDER_ON_THE_MOUNTAIN", 5); // n: 5 In this example, we’ve subscribed to an event called “THUNDER_ON_THE_MOUNTAIN” and when that event is emitted our callback value => (n = value) will be fired. To emit that event, we call emit(). This is useful when working with async code and...

Read More