CodePen Blog
Chris’ Corner: Web Components

I’d never heard of a CEM before. That’s a “Custom Elements Manifest” or a custom-elements.json file in your project. It’s basically generated documentation about all the web components your project has. Dave calls them the killer feature of web components.

With a Custom Element Manifest, community plugins can use that information to generate files, populate dropdowns, add red squiggles, provide autocomplete, and automate a lot of the mundane meta-system DX work that comes with supporting a component library

I love the idea of essentially getting “free” DX just be generating this file. I particularly like the language server idea so that code editors can offer all the fancy autocomplete and linting for your bespoke elements.

Sometimes web components seem so practical and straightforward, like Eric Meyer’s recent <aside-note. It yanks out some text into another element that gets positioned somewhere new, if a few media queries pass. And sometimes web components scare me, like when you read advice to make sure to have an asynchronous promise-resolving disconnectedCallback that is a mirror image of your connectedCallback because you can’t predict how the DOM will be changed. Maybe it’s best to roll up your sleeves and write your own define functions.

Let’s just take a quick stroll through some web components I saw people writing about recently. I do find it significant there is a low constant simmer of web component writing/sharing like this.

* Lea Verou made a <bluesky-likescomponent. I gave it a whirl just for fun.
* Zach Leatherman took the Web Awesome copy button and incorporated it into the Eleventy docs in his own way, with all the thinking toward performance and progressive enhancement as you’d expect.
* Pontus Horn got all declarative with ThreeJS thanks to web components.
https://blog.codepen.io/wp-content/uploads/2025/11/boxes-1024x575.png

CodePen Blog
Chris’ Corner: HTML

There’s a new term in town: soft navigations. Basically it means “single page app” (SPA) style navigations where page stuff changes, and the URL changes, but the browser didn’t do a traditional full-reload thing. I like the term in the sense that it sounds like a light insult. Whattaya too weak, child, to do a proper page load? Whattaya soft? Anyway the point of it is so that the browser itself has a way to detect these things, and testing Core Web Vitals is the entire reason. That feels like kind of a light reason to introduce a whole new API, but Google invented Core Web Vitals and their in-house initiatives like that get the juice.

And the out-of-house initiatives sometimes get the boot. So when there is a cool new image format in town, like JPEG XL, that isn’t from Google, things get weird. Declan Chidlow wrote about this in JPEG XL and Google’s War Against It. Google invented WebP in-house, so people feel it’s protected over better technology.

This would also partly explain why they adopted AVIF but not JPEG XL. AVIF wasn’t superior in every way and, as such, didn’t threaten to dethrone WebP.

JPEG XL, however, is better than WebP in every quantifiable way and would obsolete it.

But Google can do what they want with Chrome. It’s theirs, after all, a fact just recently confirmed. That’s for the better, if you ask me, but it does serve to tighten the iron grip they have over the web generally.

This is putting me in an HTML-y mood so allow me to share a few more HTML-y things.

I found Alex MacArthur’s article TIL: A Link’s Download Attribute Won’t “Just Work” for Cross-Origin Resources from a few years ago very useful recently. See, you’ll see advice where if you want a link-click on a website to immediately download a file, you just put the download attribute on it, like: a href="/files/thing.pdf" download>Download PDFa>
But what nobody tells you is that if the URL is cross-origin, that just straight up doesn’t work. a href="https://api.site.com/files/thing.pdf" download>Download PDFa>
So thankfully we have people like Alex to dig around and to the research and blog the answer, which is that you need the server to serve that file with a Content-Disposition header. Phew.

Ya know how there’s a little thing people call best practices? Some people seek them out. Some people poke fun at them like they know better. I’m more the former, myself. Be like Chesterton, before you tear down a fence, know why it was built in the first place. The best practices are the fence, see.

A classic best practice is that you don’t duplicate IDs on HTML attributes. You’re told to not do it, but less often, why not to do it. I best most of you could think of at least one reason. Right away I think about how getElementById will only find the first one, which may or may not be what any given code is aiming for. I think about hash links and they’ll only scroll to the first find, which again might be a mis-aim. Other elements that point toward an element with the ID (think for or aria-labelledby) might miss their aim too.

Welp, that’s three. Enough for you? Maybe you think… well those don’t apply to this current website I’m working on. And the fact that a #id selector matches multiple elements just fine in CSS is little a little shrine for you to hang your hat and say you just don’t care about this little “best practice”. Here’s Lee Amador with a couple of more examples. Maybe there are more. But that’s why this is a best practice. Just lock in your brain that you don’t duplicate IDs and you avoid every possible problem with no downside.

Created using Chatgpt 5.2

CodePen Blog
Chris’ Corner: Cloud Four

This is an appreciation post for the Cloud Four Blog. It’s one of those must-subscribes. I find myself adding almost every post they put out to my archive of posts to dig into. So since I’m overflowing with them a bit, and there is a hot-off-the-presses one, I figured I’d share that and a bunch of favorites.

In Responsive Letter Spacing, Tyler Sticka covers a scenario where you want to tighten up letter-spacing, but be smart about it. At big font sizes, some tightening looks good (I put it on my own starter) but at smaller font sizes, it harms readability. Using em is a good start as it scales with the font size automatically, but then it’s better to reduce it as it gets smaller. Fortunately Tyler found a great way to do it with clamp(). * { letter-spacing: clamp(
-0.05em,
calc((1em - 1rem) / -10), 0em
);
}
Great minds think alike as I was thinking about the UI/UX pattern of one-time password inputs lately too. Tyler again here tackles it his own way in Simple One-Time Passcode Inputs. We agree: don’t actually make it multiple elements, as tempting as that is from a styling perspective. There is simply too much JavaScript required to make that work nicely (which can easily break down) and you otherwise get for free if you don’t do that. Instead, use the proper set of attributes on an input for it: input type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6">
Then just style it with CSS to make it look however you want. That is, apply the input mask with styles alone.

I was just bemoaning the loss of JPEG XL the other day, but in On Container Queries, Responsive Images, and JPEG-XL a couple years back, Jason Grigsby was already in grief. Container Queries, one of the great CSS revelations of our time, is spiritually connected to responsive images in that they want to do the most-appropriate thing with the information available on how they are displayed on the page. You’d think they would get along and share information, but you’d be wrong. We could evolve the syntaxes to help, and probably should, but it’s intereseting that JPEG-XL, and image format, was actually somewhat designed to help with this and would have been a serendipitous gift for web developers, if we actually were able to use it.

Speaking of images, I think we all know we’re not really supposed to be using GIF anymore as the performance sucks and we can replicate it with video. I tend to like the video approach, but there are significant drawbacks to be aware of:

* Colin Bendell pointed out that browsers don’t preload video, which can impact perceived performance.
* By default, the video experience isn’t very GIF-like: You need a magic combination of autoplay, loop, muted and playsinline attributes to achieve similar behavior.
* The video element exposes more playback control possibilities, which can be good for accessibility, but it lacks an alt attribute for alternative text. (The title and fallback content don’t seem to be exposed to assistive devices in a similar way, but maybe aria-label or aria-labelledby would work?)

Tyler looked at alternatives and there are some really strong contenders in the form of newfangled image formats. But (surprise surprise) the browser support story is dicey.

Gerardo Rodriguez talks about Testing HTML Light DOM Web Components: Easier Than Expected! Good to know, really. Testing here meaning load up the component in a browser-like environment and make sure what you expect to be there in the DOM is there and interacting with it does what you expect.

It’s not like you can’t test Web Components that use the Shadow DOM, but in practice it’s an annoying barrier that you have to manually account for in many places, and other [...]

tools need to be aware of and work with as well. Nice to have so uch example code here to reference.

OK fine one more. This is a nice demo of a common web app interaction. It’s a good reminder that we really need to implement “bulk actions” in more places on CodePen properly.

new year.html

How do you like the codes? What suggestions do you have for them?

CodePen Blog
Chris’ Corner: Freshly-Fallen CSS

First corner of the new year, so, ya know:
✺◟(＾∇＾)◞✺
I feel like we should do CSS for this one. It’s easily my favorite technology thing and basically BFFs with the spirit of CodePen.

In brand-spanking-new news (gnu neues?) the whole “masonry” saga is starting to come to a close. The naming is (drumroll please): .container { display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } I like it. Lanes. Like you’re playing a driving video game or something. The WebKit gang has the story, and they’ve got demos ready.

Try out Grid Lanes in Safari Technology Preview 234! All of the demos at webkit.org/demos/grid3 have been updated with the new syntax, including other use cases for Grid Lanes.

I’d credit David DeSandro for the name “masonry”, which is certainly a lot more stuck in people’s heads. He’s understandably disappointed in the new name. I can’t get past the idea that a brick wall (the “masonry” connection) doesn’t look like this looks (it’s wrong by 90 degrees). So color me a fan of the new naming.

In the “I had no idea this was coming” category is text-grow and text-shrink. I’ve probably used Dave Rupert’s (ancient) fittext more times than I can count in my career. First, viewport units kinda obsoleted it, but that required magic numbers to get just right. Now it’s going to… just work? Although I think it’s just a prototype so far. (via Adam) h1 { text-grow: per-line scale; } https://blog.codepen.io/wp-content/uploads/2026/01/CleanShot-2026-01-01-at-13.31.33.gif

And another entry in the “I had no idea this was coming” is scroll-triggered animations. I’m very aware of scroll-driven animations and find that whole API extremely cool, but this is something else. Normally when you apply an animation it just runs immediately when the page loads, possibly with a manual delay. With the driven animations you can attach it to a timeline based on the scroll progress of an element or the position related to the viewport. With this, you can also have it triggered instead. A trigger is a custom ident like: animation: my-animation 0.5s; animation-trigger: --thing-in-view play-forwards;
Then you create that trigger: timeline-trigger-name: --thing-in-view; timeline-trigger-source: view();
Which could be the same or a different element. Cool. I obviously love that there is a bunch of demos in a Collection.

I was aware of (newly) customizable selects and I’ve had my own plays with it, but Brecht De Ruyte is the master. I’ll link up part 4 of his so-far-five-part series on the matter. This is what’s happening: https://blog.codepen.io/wp-content/uploads/2026/01/CleanShot-2026-01-02-at-05.04.24.gif Like: whaaaaat. But I suppose I could have guessed. At one time CSS gave us a :checked selector and HTML has labels-connected-to-inputs and people used those things to build absolutely amazing things. There is much more interactivity on offer in a

Do you know tangram game?

👨‍💻 Programmer, I think you should try this once.

I found a platform where you can post code 🧩, share projects 🚀, and connect with other developers 🤝.

People here actually discuss real tech, real problems, and real solutions — not random stuff.

👉 My favourite part: you earn from your content 💰
Just post one image, a code snippet, a tip, or any coding project — and you get rewarded.

I’m personally earning $2–$5 daily, and this is not clickbait.

🎁 Bonus:
If you join using my link, you’ll get $1 instantly.

Worth checking once 👇
https://bit.ly/4pIinck