21 May

Resize Observer

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 […]

The post Resize Observer appeared first on David Walsh Blog.

17 May

Recursive Array.flat

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, [3], [[4]]].flat(/* […]

The post Recursive Array.flat appeared first on David Walsh Blog.

14 May

Using Array reduce

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 […]

The post Using Array reduce appeared first on David Walsh Blog.

09 May

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.

<section>
  <div id="red" 

Read article

The post The Thinking Behind Simplifying Event Handlers appeared first on CSS-Tricks.

08 May

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 … Read article

The post A Few Functional Uses for Intersection Observer to Know When an Element is in View appeared first on CSS-Tricks.

08 May

Getting To Know The MutationObserver API

MutationObserver watches the DOM, specifically the places you tell it to, like:

document.querySelector('#watch-this');

...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:

See the Pen Sassmeister clone by Chris … Read article

The post Getting To Know The MutationObserver API appeared first on CSS-Tricks.

07 May

Type Conversion with JavaScript Arrays

JavaScript’s loose nature allows developers to employ amazing tricks to do just about anything you’d like. I’ve detailed how you can filter falsy values in arrays using a filter(Boolean) trick, but reader David Hibshman shared another trick for typecasting array values the same way. To typecast an array of elements, you can use map and […]

The post Type Conversion with JavaScript Arrays appeared first on David Walsh Blog.