Chris Coyier

You know I’m a little obsessed with :has() in CSS and how useful it is. So I’m chuffed that Ahmad Shadeed made a killer interactive guide with loads of great examples. The basics are so satisfying like “Does this <figure> have a <figcaption>? Yes? OK then style it differently.” And that can be leveled up […]

A left-and-right layout is blissfully easy with CSS grid. Something like grid-auto-rows: 1fr; will do it — just put two elements as the children. This is how I like to roll though, making two equal columns that can shrink properly: But Ryan Mulligan found a very interesting way to make it complicated in The Fifty-Fifty […]

Eric Portis did a bang up job explaining color spaces on the web. sRGB is, as Eric puts it “the web’s dominant, default color space”, but he doesn’t spend much time on that. Thanks to recent evolutions in web tech, we have access to a wider gamut of colors (P3) and more color spaces than […]

Jake Archibald has some great examples of awkward gotchas with View Transitions. View Transitions are naturally great at tweening one state of a DOM element to the next, but you’ll see likely-unwanted ghosting if the element changes shape from one state to the next. You can either prevent it from changing shape by changing either […]

I’m already a little over all the green. What was I thinking? I’m much more of a nice gray color palette kinda guy with some fun poppy colors. That’s what we need to get to here. When we left off, we just had wireframes going. It’s time to get some style on this thing! Custom […]

Deno is getting in on the package registry business with JSR (“JavaScript Registry”). The name should help people understand it’s not Deno-specific, but instead built to support the ever-growing number of JavaScript runtimes. There isn’t much public information (it’s waitlisted), but David Bushell was able to take it for a spin.

We left off with a wireframe-y looking HTML-ized version of our design. Personally, I’m a little tempted to get some CSS on there, but let’s hold off and do the very basic JavaScript functionality first. That will make it, ya know, actually functional, and having some of the interactive stuff in place might inform some […]

Jeremey Keith uses the little-used CSS property content-visibility to improve the performance on a fairly heavy page. It works a treat. I did a before-and-after check with pagespeed insights on the page for Out On The Ocean. The “style and layout” part of the main thread work went down considerably. Total blocking time went from more than 600 […]

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

I hadn’t heard of the EditContext API at all, but apparently it’s landed in Chrome already. Aaron Iker has a nice thread on it. Using a <textarea> or the contenteditable attribute on HTML elements offers a pretty limited text editing experience. Some fancy text editing components actually hide the original editable element, which is part […]