In this post, I want to share my experience integrating the IntersectionObserver API into a Vue app. By the end, we’ll have a custom directive that abstracts dynamically registering and unregistering DOM elements with an observer. Intersection Observer When you need to track an element coming into view, watching document scroll and calculating element offsets used to be the only way. The math isn’t particularly complex, but knowing which layout properties to use and just how to calculate position relative to the right elements is a painful task.…

When you have code to run that’s async, you have a few options. You can work with a Promise, schedule something to run at a later time with setTimeout, or schedule in coordination with the browser’s render cycle via requestAnimationFrame. Each has its own strength, but now there’s a new tool in our async toolkit: requestIdleCallback. I want to show off a trick to mix up promise-based tasks against the new requestIdleCallback API (we’ll just call it rIC).…

When performing I/O in Node.js servers, there is a lot of error handling to deal with. I always look to add as much context to errors as I can because it greatly reduces the time it takes me to find, understand, and fix bugs. We won’t go into an error propagation strategy here (that will be part of some of the upcoming material), but I wanted to share a quick idea for how to decorate errors with context as they propagate through the stack.…