Creating websites that are reactive and responsive used to be considered advanced but responsiveness is a necessity for successful websites and apps. We’ve added media queries, matchMedia, and a host of other APIs to help developers make responsiveness easier and now we get a new one: ResizeObserver. With the Resize Observer API, we can watch […]
There was much talk about Array.prototype.flat during its early stages, starting with the name alone. Many developers preferred the name flatten but the spec differed from MooTools’ implementation. MooTools would recursively flatten an array but the new, official flat implementation defaults one level of flattening,. The current implementation of Array.prototype.flat is: [1, 2, , []].flat(/* […]
Every developer who specializes in any programming language will tell you there’s a powerful tool the language provides that they rarely use and wish they knew more about. For me, it’s Array.prototype.reduce. I quite enjoy the other Array methods like map, filter, and find, but reduce is one that I knew was powerful but never […]
Let’s start with a simple example: a few draggable boxes. We want to show the user which colored box they dragged.
<section> <div id="red"
Different observers observe different things (not everyone watches hawks).
The post A Few Functional Uses for Intersection Observer to Know When an Element is in View appeared first on CSS-Tricks.
MutationObserver watches the DOM, specifically the places you tell it to, like:
...and it can tell you (trigger a callback) when stuff happens — like when a child is added, removed, changed, or a number of other things.
I used it just the other day to watch the
<head> of a Pen and detected newly-injected processed Sass code, so you could use CodePen to see Sass and CSS side by side: