JavaScript

When I think of showing off syntax highlighted code on the web, I think of code that takes in a string of code, finds relevant substrings (tokens) with elaborate RegExes, then wraps them in <span>s with classes to that color can be applied to those classes. This is quite literally how it works. The really […]

URL, which stands for Uniform Resource Locator, is an address to access resources on the internet. Each URL points to a unique resource on the web. URLs can sometimes contain special characters or need to be manipulated dynamically. In this article, we’ll explore the modern techniques for working with URLs in JavaScript, and answer the […]

The <dialog> element in HTML is tremendous. We’ve got support across the board now, so using it is a smart plan. Just with basic usage, you get a centered modal dialog experience that comes up when you call it, a dimmed background, focus trapped within it, closes with the ESC key, and focus returning where […]

One of the Top Pens of 2023 was this Glowy Hover Effect by Ines. When I was taking a look at it, it finally clicked how it works. In a nutshell, there are two copies of the same HTML layered on top of one another. The top one has a fancy colors and such, but […]

Here’s a thing you’re sure to do in your web developer career: add form validation to a form. You can’t leave that name field blank! That doesn’t look like an email address! That quantity is too high! Forms are a part of the beating heart of the web, and especially important to business. You can’t […]

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