Html codes
Photo
CodePen Blog
Chris’ Corner: ZIP first?
I love ideas that feel clearly better than what was before. I used to feel that way about curved shower curtain bars. Like, instead of the shower curtain being perfectly straight against the edge of the shower, it curves outward. No harm in functionality, but it gives more space inside the shower. It’s just better. There are more factors, though, sadly. Surely they are harder to manufacture, package, and ship, and thus more expensive. Maybe you need longer shower curtains, too? Maybe there isn’t always space for it in smaller bathrooms? I still generally prefer it when possible. It’s an optional improvement.
Here’s another thing like that: Put the ZIP code first.
The big idea is that we should ask for the ZIP code in an address first, not last. Here’s what address forms often look like:
https://blog.codepen.io/wp-content/uploads/2026/04/Screenshot-2026-04-20-at-8.44.04-AM.png
ZIP code is 2nd to last there. Notably, before the City. But if we asked for the ZIP code first, the city would just be implied, saving time filling out the form. Time saved during e-commerce checkouts is a proven way to improve conversion rates.
As that microsite says:
From those 5 characters you can determine the city, the state, and the country. That’s 3 fields. Autofilled. From one input.
That’s just better, right?
Seems better to me, but I bet there are more factors. For one, it’s different, and different might feel weird to users and throw them off, maybe not saving time at all. People have addresses in their head in a certain way/order, and matching that might have its own benefit.
For another, this requires extra code to work. You need some kind of reliable and updated ZIP code matching software. Extra notably, the demo on that page doesn’t even work. I get a 404 for the API they are using:
https://blog.codepen.io/wp-content/uploads/2026/04/Screenshot-2026-04-20-at-8.50.42-AM-1024x313.png
Also, and this I know is true, but I am ignorant about the details: ZIP codes are weird. They have different formats and aren’t necessarily globally unique. So asking for the country first is actually probably best, even if that’s one of the most painful parts of address forms.
Still, maybe it’s an improvement! Maybe try it!
Ya know that screenshot from above? That’s actually from Stripe Elements, which is super incentivized to make payment forms that convert well. This is what they actually do by default (in their own demo):
https://blog.codepen.io/wp-content/uploads/2026/04/Screenshot-2026-04-20-at-8.55.37-AM.png
Me, I’d think that Address field would be full of magic. You could drop in the ZIP code and it would prefill stuff. Or you could single-line type your entire address and it would just know what you mean and deal with it. But no, actually, that’s just what it wants for your street address line, and if you fill it out and press Enter or Tab, it expands to show you all the fields it actually needs. Weird.
The more magic at helping me fill out forms, the better really. Make them accessible. Use all the fancy attributes to make them more understandable for tools and improve UX. Do fancy backend processing. Use the geolocation API. Whatever. Nobody loves filling out forms, they love what the form helps them do.
Chris’ Corner: ZIP first?
I love ideas that feel clearly better than what was before. I used to feel that way about curved shower curtain bars. Like, instead of the shower curtain being perfectly straight against the edge of the shower, it curves outward. No harm in functionality, but it gives more space inside the shower. It’s just better. There are more factors, though, sadly. Surely they are harder to manufacture, package, and ship, and thus more expensive. Maybe you need longer shower curtains, too? Maybe there isn’t always space for it in smaller bathrooms? I still generally prefer it when possible. It’s an optional improvement.
Here’s another thing like that: Put the ZIP code first.
The big idea is that we should ask for the ZIP code in an address first, not last. Here’s what address forms often look like:
https://blog.codepen.io/wp-content/uploads/2026/04/Screenshot-2026-04-20-at-8.44.04-AM.png
ZIP code is 2nd to last there. Notably, before the City. But if we asked for the ZIP code first, the city would just be implied, saving time filling out the form. Time saved during e-commerce checkouts is a proven way to improve conversion rates.
As that microsite says:
From those 5 characters you can determine the city, the state, and the country. That’s 3 fields. Autofilled. From one input.
That’s just better, right?
Seems better to me, but I bet there are more factors. For one, it’s different, and different might feel weird to users and throw them off, maybe not saving time at all. People have addresses in their head in a certain way/order, and matching that might have its own benefit.
For another, this requires extra code to work. You need some kind of reliable and updated ZIP code matching software. Extra notably, the demo on that page doesn’t even work. I get a 404 for the API they are using:
https://blog.codepen.io/wp-content/uploads/2026/04/Screenshot-2026-04-20-at-8.50.42-AM-1024x313.png
Also, and this I know is true, but I am ignorant about the details: ZIP codes are weird. They have different formats and aren’t necessarily globally unique. So asking for the country first is actually probably best, even if that’s one of the most painful parts of address forms.
Still, maybe it’s an improvement! Maybe try it!
Ya know that screenshot from above? That’s actually from Stripe Elements, which is super incentivized to make payment forms that convert well. This is what they actually do by default (in their own demo):
https://blog.codepen.io/wp-content/uploads/2026/04/Screenshot-2026-04-20-at-8.55.37-AM.png
Me, I’d think that Address field would be full of magic. You could drop in the ZIP code and it would prefill stuff. Or you could single-line type your entire address and it would just know what you mean and deal with it. But no, actually, that’s just what it wants for your street address line, and if you fill it out and press Enter or Tab, it expands to show you all the fields it actually needs. Weird.
The more magic at helping me fill out forms, the better really. Make them accessible. Use all the fancy attributes to make them more understandable for tools and improve UX. Do fancy backend processing. Use the geolocation API. Whatever. Nobody loves filling out forms, they love what the form helps them do.
Which of the following is a 'semantic' HTML element?
Anonymous Quiz
50%
<div>
25%
<article>
25%
<header>
CodePen Blog
424: File List Optimization
The 2.0 Editor can support hundreds of files per Pen, not to mention folders mixed in which don’t count toward that total. This can be pretty weighty on the DOM and thus adversely affect performance. Especially as each file/folder has children, a variety of event listeners, are drag and drop enabled, etc. “Virtualizing” data like this is a common approach, but we’ve found if we just use
Time Jumps
* 00:00:42 Files in the 2.0 Editor
* 00:06:26 Virtualization and optimization
* 00:10:49 The IntersectionObserver API
424: File List Optimization
The 2.0 Editor can support hundreds of files per Pen, not to mention folders mixed in which don’t count toward that total. This can be pretty weighty on the DOM and thus adversely affect performance. Especially as each file/folder has children, a variety of event listeners, are drag and drop enabled, etc. “Virtualizing” data like this is a common approach, but we’ve found if we just use
IntersectionObserver to see if they are visible or not, “freeze” them if they aren’t, and fade them in and out of life, it’s a great solution.Time Jumps
* 00:00:42 Files in the 2.0 Editor
* 00:06:26 Virtualization and optimization
* 00:10:49 The IntersectionObserver API
CodePen
424: File List Optimization
The 2.0 Editor can support hundreds of files per Pen, not to mention folders mixed in which don’t count toward that total. This can be pretty weighty on the DOM and thus adversely affect perf…
elite-cybersecurity-portfoliointeractive-security.zip
272.2 KB
Cinematic single-page cybersecurity portfolio: terminal loader, matrix rain, particles, GSAP animations, security dashboard. Vanilla HTML/CSS/JS.
New loader design for website :
/* From Uiverse.io by SchawnnahJ */
.loader {
position: relative;
width: 2.5em;
height: 2.5em;
transform: rotate(165deg);
}
.loader:before, .loader:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 0.5em;
height: 0.5em;
border-radius: 0.25em;
transform: translate(-50%, -50%);
}
.loader:before {
animation: before8 2s infinite;
}
.loader:after {
animation: after6 2s infinite;
}
@keyframes before8 {
0% {
width: 0.5em;
box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
}
35% {
width: 2.5em;
box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
}
70% {
width: 0.5em;
box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
}
100% {
box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
}
}
@keyframes after6 {
0% {
height: 0.5em;
box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
}
35% {
height: 2.5em;
box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
}
70% {
height: 0.5em;
box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
}
100% {
box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
}
}
.loader {
position: absolute;
top: calc(50% - 1.25em);
left: calc(50% - 1.25em);
}
❤3
Glassphorism card for beginners:
Please share your opinion on how the next code should be.
<body style="background: linear-gradient(45deg, #ff9a9e, #fad0c4); height: 100vh;">
<div style="
margin: 50px auto;
width: 300px;
padding: 2rem;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.3);
text-align: center;
color: white; font-family: sans-serif;">
<h2>Glass Card</h2>
<p>Modern UI design snippet.</p>
</div>
</body>
Please share your opinion on how the next code should be.
👍3👀1
CodePen Blog
425: Debug Logs
As we’re getting close to rounding out the Beta period of the 2.0 editor, we’re trying to close out any bugs we find or users report quickly. They could be browser-support related, network conditions related, account capability related, or just bugs in how the 2.0 editor and technology behind it works. It’s complicated enough that the best way to debug things is to see exactly what the user sees when they have trouble.
A very cool side effect to having built the 2.0 editor with Apollo is that we have a nearly complete look at what is happening in the editor by virtue of the Apollo Cache (we talked about what that is here). We built a tool that can export that as JSON data, and we can load it locally to see exactly what the user sees. It’s a bit fancier than that, doing things like saving browser console error logs and stuff, but that’s the gist of it.
Time Jumps
* 00:00:06 Debug logs
* 00:02:53 How to join the CodePen Discord
* 00:03:56 A super version of it for ourselves
* 00:07:12 What we do with the data logs
* 00:08:55 The importance of supporting versions
* 00:11:45 We can see the debug in a live version of the editor
* 00:14:12 Client side and then adding server side
425: Debug Logs
As we’re getting close to rounding out the Beta period of the 2.0 editor, we’re trying to close out any bugs we find or users report quickly. They could be browser-support related, network conditions related, account capability related, or just bugs in how the 2.0 editor and technology behind it works. It’s complicated enough that the best way to debug things is to see exactly what the user sees when they have trouble.
A very cool side effect to having built the 2.0 editor with Apollo is that we have a nearly complete look at what is happening in the editor by virtue of the Apollo Cache (we talked about what that is here). We built a tool that can export that as JSON data, and we can load it locally to see exactly what the user sees. It’s a bit fancier than that, doing things like saving browser console error logs and stuff, but that’s the gist of it.
Time Jumps
* 00:00:06 Debug logs
* 00:02:53 How to join the CodePen Discord
* 00:03:56 A super version of it for ourselves
* 00:07:12 What we do with the data logs
* 00:08:55 The importance of supporting versions
* 00:11:45 We can see the debug in a live version of the editor
* 00:14:12 Client side and then adding server side
CodePen
425: Debug Logs
As we’re getting close to rounding out the Beta period of the 2.0 editor, we’re trying to close out any bugs we find or users report quickly. They could be browser-support related, netw…
❤1
Html codes
Photo
CodePen Blog Chris’ Corner: Check It B4 U Wreck It
There is an airport in Bend, Oregon where I live. We’ve got a proper one in Redmond, the next town over, but a little baby municipal one here in Bend. There is a cafe there that I’m only just hearing about: Bend Airport Cafe. Looks nice, I should go!
I’m mentioning it for another reason,though. As soon as I saw that website, I SAW CLAUDE CODE immediately. https://blog.codepen.io/wp-content/uploads/2026/05/claude-1024x411.jpg Tell me I’m not crazy and you’ve seen it too.
This look is everywhere. To my eyes, it’s more prevalent than Bootstrap ever was, Tailwind UI, or even the purple-gradient-text era of crypto and early AI.
I feel like it happened as Anthropic started talking about skills and made their own design skill. The designs coming out of Claude Code are undeniably much nicer, but do look very same-y, like they have some pretty strict prompts baked in that choose between a very limited subset of design choices.
About this particular restaurant website, I feel like it’s quite decent looking and I don’t hate that maybe the design bar for low-end work gets pushed higher because of this, but also HEY EVERYBODY, let’s keep a close watch on all this. These AI slop websites are chockablock with really simple mistakes.
The navigation of the site is mostly jump links like #catering, which work fine when on the homepage. But the “Gallery” page links to /gallery, and when you’re on that page, the jump links don’t work anymore. Even the logo is just a link to #, so when you’re not on the homepage, it doesn’t get you back there.
https://blog.codepen.io/wp-content/uploads/2026/05/Screenshot-2026-05-08-at-10.14.13-AM-1024x695.png Now I can’t get back to the homepage from any sub page unless I hand-alter the URL.
I was reading Piccalilli’s in-depth guide to customising lists with CSS and thinking about what a nice touch customized lists are. Oh look, a nice customized list! Nah, just kidding, it’s a totally unsemantic div soup with a bunch of Tailwind classes.
https://blog.codepen.io/wp-content/uploads/2026/05/Screenshot-2026-05-08-at-10.14.49-AM-955x1024.png This is so chill to do now on real lists with ::marker.
This is what extra got me going the other day. Then I heard about another restaurant in Bend for the first time: Los Andes. https://blog.codepen.io/wp-content/uploads/2026/05/losandesbend.com_events-777x1024.png I know you can just smell the Claude design skill wafting off that sucker.
It doesn’t just look the same though, it’s full of dumbass simple mistakes. Like the one-field form doesn’t associate the label correctly. https://blog.codepen.io/wp-content/uploads/2026/05/Screenshot-2026-05-08-at-12.59.03-PM-1024x564.png The light gray text used isn’t even close to readable, even for someone with strong vision. https://blog.codepen.io/wp-content/uploads/2026/05/CleanShot-2026-05-08-at-12.59.47@2x-1024x640.png There is a little irony to me in that surely Clade Code could help anyone fix these problems so quickly and easily. But either people don’t know they are even problems or don’t care and both of those options are a bummer.
The same-y design choices are such a hilarious tell though. I had it help with a adding design to a Vue Template a while back, and honestly it looks pretty great I think! But it’s 100% that same exact design aesthetic happening here too.
The one-word-is-italic-in-the-header is hilariously common to me, along with the one-button-is-outline-one-is-solid, and the little-tiny all-caps header above headlines. BASK IN IT: https://blog.codepen.io/wp-content/uploads/2026/05/Screenshot-2026-05-08-at-1.05.33-PM-1024x734.png The one that gets me the most is how every “card” style element has a dang hover on it though. It’s just everywhere. And it can be a real problem. It means that sometimes it’s an or
There is an airport in Bend, Oregon where I live. We’ve got a proper one in Redmond, the next town over, but a little baby municipal one here in Bend. There is a cafe there that I’m only just hearing about: Bend Airport Cafe. Looks nice, I should go!
I’m mentioning it for another reason,though. As soon as I saw that website, I SAW CLAUDE CODE immediately. https://blog.codepen.io/wp-content/uploads/2026/05/claude-1024x411.jpg Tell me I’m not crazy and you’ve seen it too.
This look is everywhere. To my eyes, it’s more prevalent than Bootstrap ever was, Tailwind UI, or even the purple-gradient-text era of crypto and early AI.
I feel like it happened as Anthropic started talking about skills and made their own design skill. The designs coming out of Claude Code are undeniably much nicer, but do look very same-y, like they have some pretty strict prompts baked in that choose between a very limited subset of design choices.
About this particular restaurant website, I feel like it’s quite decent looking and I don’t hate that maybe the design bar for low-end work gets pushed higher because of this, but also HEY EVERYBODY, let’s keep a close watch on all this. These AI slop websites are chockablock with really simple mistakes.
The navigation of the site is mostly jump links like #catering, which work fine when on the homepage. But the “Gallery” page links to /gallery, and when you’re on that page, the jump links don’t work anymore. Even the logo is just a link to #, so when you’re not on the homepage, it doesn’t get you back there.
https://blog.codepen.io/wp-content/uploads/2026/05/Screenshot-2026-05-08-at-10.14.13-AM-1024x695.png Now I can’t get back to the homepage from any sub page unless I hand-alter the URL.
I was reading Piccalilli’s in-depth guide to customising lists with CSS and thinking about what a nice touch customized lists are. Oh look, a nice customized list! Nah, just kidding, it’s a totally unsemantic div soup with a bunch of Tailwind classes.
https://blog.codepen.io/wp-content/uploads/2026/05/Screenshot-2026-05-08-at-10.14.49-AM-955x1024.png This is so chill to do now on real lists with ::marker.
This is what extra got me going the other day. Then I heard about another restaurant in Bend for the first time: Los Andes. https://blog.codepen.io/wp-content/uploads/2026/05/losandesbend.com_events-777x1024.png I know you can just smell the Claude design skill wafting off that sucker.
It doesn’t just look the same though, it’s full of dumbass simple mistakes. Like the one-field form doesn’t associate the label correctly. https://blog.codepen.io/wp-content/uploads/2026/05/Screenshot-2026-05-08-at-12.59.03-PM-1024x564.png The light gray text used isn’t even close to readable, even for someone with strong vision. https://blog.codepen.io/wp-content/uploads/2026/05/CleanShot-2026-05-08-at-12.59.47@2x-1024x640.png There is a little irony to me in that surely Clade Code could help anyone fix these problems so quickly and easily. But either people don’t know they are even problems or don’t care and both of those options are a bummer.
The same-y design choices are such a hilarious tell though. I had it help with a adding design to a Vue Template a while back, and honestly it looks pretty great I think! But it’s 100% that same exact design aesthetic happening here too.
The one-word-is-italic-in-the-header is hilariously common to me, along with the one-button-is-outline-one-is-solid, and the little-tiny all-caps header above headlines. BASK IN IT: https://blog.codepen.io/wp-content/uploads/2026/05/Screenshot-2026-05-08-at-1.05.33-PM-1024x734.png The one that gets me the most is how every “card” style element has a dang hover on it though. It’s just everywhere. And it can be a real problem. It means that sometimes it’s an or
Html codes
CodePen Blog Chris’ Corner: Check It B4 U Wreck It There is an airport in Bend, Oregon where I live. We’ve got a proper one in Redmond, the next town over, but a little baby municipal one here in Bend. There is a cafe there that I’m only just hearing about:…
e>wrapping the entire contents of a card, meaning a title, copy, image, etc, which is just silly. Seriously, they need to read this.
Lemme leave you with some good articles.
* Dave writes about approaching light/dark styles at a component level, with optional inversion, made quite simple really.
* Eric writes about the
* Roma writes about Responsive Cyclic Margins with some absolutely wacky clamp/max functions in order to get truncation of text happening at the end of text and before an icon. Just try to get that right, Claude.
Lemme leave you with some good articles.
* Dave writes about approaching light/dark styles at a component level, with optional inversion, made quite simple really.
* Eric writes about the
infinity keyword in CSS. I love the use case where using it with word-spacing forces one-word-per-line. Clever.* Roma writes about Responsive Cyclic Margins with some absolutely wacky clamp/max functions in order to get truncation of text happening at the end of text and before an icon. Just try to get that right, Claude.