Chris Coyier

I’m no expert here, but I understand an “MCP server” as a way to make an AI system a bit “smarter” by having more context and capabilities. I find AI coding agents pretty darn smart already particularly when they have your entire codebase and your instruction for context. But if you’re using it to build […]

I’m just hearing about the closedby=”any” attribute/value for <dialog>. HTML popovers have this “light dismiss” behavior where you can “click outside” to close them, but not dialogs (until this). I forked a previous demo to try it and it works great (in Chrome & Firefox, just waiting for Safari). I’ve been using a custom <ClickOutsideDetector […]

In A Progressive Enhancement Challenge, I laid out a situation where the hardest thing to do is show a button you never want to show at all if the JavaScript loads and executes properly. I wrote of this state: It seems like the ideal behavior would be “hide the interactive element for a brief period, […]

When you’ve got two buttons with two different looks (and no cursor), how do you know which one you’re about to activate? You’ll need to be careful with the design.

All sorts of inputs have little microphone buttons within them that you can press to talk instead of type. Honestly, I worry my daughter will never learn to type because of them. But I get it from a UX perspective, it’s convenient. We can put those in our web apps, too. Pamela Fox has an […]

Should have done 150.

I liked this bit of JavaScript trivia from Cassidy Williams. There is a clear answer, and it’s something worth making sure you understand before heading into a job interview that involves JavaScript.

Will Mendes has a bit of CSS to highlight accessibility issues on HTML elements. Things like missing alt text and labels that aren’t linked properly to inputs. If you want to try it out quick on a website, I wrapped it in a little injection JavaScript so you could paste it in the console wherever. […]

We can use `shape()` to carve away the edges of an element to look like a folder tab. By hand.

With view() style scroll-driven animations, it’s helpful to think about how you want it to work then tweak the ranges toward that goal.