JavaScript

HTML has a color input that is pretty decent: That’s it. Support across the board. However, browsers can and do have different approaches to what happens when the input is used. Ultimately: the user activates the input, may choose a color using the provided UI, and the color becomes the inputs value. It’s not my […]

Sometimes when crafting up some quick interactive vanilla JavaScript, I add an event listener and write the functionality I want to happen right there. For example, here’s a super basic character counter: Totally works. But, you won’t see any character count until you start typing something. That’s probably not ideal. It should count the characters […]

The concept of event delegation in JavaScript boils down to this: rather than attach event handlers directly to the element triggering the event, attach it to an element higher up in the DOM. The event should bubble up there anyway, and you can test the event’s trigger element to ensure you’re responding to the event […]

Ahmad Shadeed: Today I learned about the media scripting feature. It’s about detecting JS support via a CSS media query. Soon, we won’t need the .no-js or .js classes once this is widely available. Currently supported in Chrome 120, Firefox 119, Safari 17. Tweet

First: the Light DOM is just… the regular DOM. When people talk about native Web Components, the Shadow DOM comes up a lot. I have extremely mixed feelings about the Shadow DOM. On one hand, it’s a powerful scoping tool. For example, CSS applied inside the Shadow DOM doesn’t “leak” outside, meaning you can be […]

Keith Cirkel demonstrates a brand new concept (requires Chrome Canary and the Experimental Web Platform Features flag right now) called Invokers, a proposal from the Open UI group that is polyfillable. You “invoke” events directly on a specific element in the DOM: Then you can listen for the invoke event on that element. Adding interactive […]

Did you know you can declare number values in JavaScript with notation like 1_000_000? This is especially useful for large numbers where you might be used to seeing commas within the number to help readability (but commas themselves are invalid). It’s perhaps even more useful when declaring numbers in binary, hexadecimal, or BigInt notation.

“Reactivity” is how systems react to changes in data. There are many types of reactivity, but for this article, reactivity is when data changes, you do things.

I took a shot at coding TodoMVC with modern (ES6+), vanilla JavaScript, and it only took ~170 lines of code and just over an hour! Compare this to the old/official TodoMVC vanilla JS solution, which has over 900 lines of code. An 80%+ reduction in code! I ❤️ the new state of JavaScript. The code has received […]