CodePen Blog
422: Supporting Packages

Alex and Chris talk about how the 2.0 Editor supports packages from npm. The trick is both simple and complex. The idea is simple. We detect the packages you want to use, list them in an (editable) package.json file, then turn that into a

➡️ preview

Simple card flip for beginners:

<!DOCTYPE html>
<html>
<head>
<style>
  .card {
    width: 200px;
    height: 300px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
    cursor: pointer;
  }

  .card.flipped {
    transform: rotateY(180deg);
  }

  .front, .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Hides the back side */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    
    /* Make image cover the whole card nicely */
    background-size: cover; 
    background-position: center;
  }

  /* Front Image */
  .front {
    background-image: url('https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?w=400');
  }

  /* Back Image (Rotated initially) */
  .back {
    background-image: url('https://images.unsplash.com/photo-1543466835-00a7907e9de1?w=400');
    transform: rotateY(180deg);
  }
</style>
</head>
<body>

  <div class="card" onclick="this.classList.toggle('flipped')">
    <div class="front"></div>
    <div class="back"></div>
  </div>

</body>
</html>

CodePen Blog
Chris’ Corner: URLs

In Fixing the URL params performance penalty, Barry Pollard sets up a very clear real-world conundrum. The content at these two URLs is probably the same:

* https://www.example.com/
* https://www.example.com/?utm_source=email

The content at these two URLs is probably not:

* https://www.example.com/products?productid=1234
* https://www.example.com/products?productid=5678

Who cares? Cache cares. Because content with different query params might be different, the various tech that deals with caching has to assume it will be different. But that sucks tho. And it’s not a new problem.

I’m not sure what the history or landscape of solutions is for this, but one from the Chrome gang that is rolling out from them is a new header: No-Vary-Search. The idea is that you get the control as the owner of the site to say how it works on your site. No-Vary-Search: params, except=("q" "productid")
So with a header like the above, you’re saying “query params never matter on this site, they will not effect the content on the page, except for these two, those two do.” That seems awfully useful to me. Just don’t get it wrong.

Speaking of URLs, you know what site used to have has great URLs? Flickr, the photo sharing site. Why did that have to fade away, anyway? I think it was basically infinite cloud storage of camera rolls on mobile phones and Instagram. I do hope there is a resurgance of “a social place to share my best photos” that does well again, but I digress. Flickr’s URLs were great, and Marcin Wichary sings their praises in Unsung heroes: Flickr’s URLs scheme.
flickr.com/photos/mwichary/favorites
flickr.com/photos/mwichary/sets
flickr.com/photos/mwichary/sets/72177720330077904
flickr.com/photos/mwichary/54896695834
flickr.com/photos/mwichary/54896695834/in/set-72177720330077904
This was incredible and a breath of fresh air. No redundant www. in front or awkward .php at the end. No parameters with their unpleasant ?&= syntax. No % signs partying with hex codes. When you shared these URLs with others, you didn’t have to retouch or delete anything. When Chrome’s address bar started autocompleting them, you knew exactly where you were going.

If you have found yourself on Flickr recently, it might be because NASA is on Flickr and the Artemis II mission posts their official photos there. There’s some really great photos there, still rocking those equally great URLs.

There are new ideas in clever URLs out there as well. You know how there are some unofficial but obvious conventions for certain pages? I mean like the contact page is probably /contact and the page for hiring is probably /hiring. What is the URL for changing your password? There is no real convention for that. It might exist on a dedicated URL or it might be part of a settings or account page.

If there was a strong convention (and here’s Eiji Kitamura suggesting just that) users, and perhaps more importantly password managers, would know how to get you there. The URL?
/.well-known/change-password
I don’t know much about that special directory, I know it’s just used for things like verifying DNS setups and payment processors and stuff. Seems like a perfectly good usage for me. And it doesn’t mean that URL is where you actually change your password, it just redirects to wherever makes sense in your site.

Too weird to take off? Here’s some sites already doing it:

* Google
* GitHub
* Facebook
* Twitter
* WordPress

Cool.

CodePen Blog
423: 2.0 Templates

Stephen and Chris hop on the ol’ podcast to talk about all the ways that Templates are way better in 2.0 land. You’ve always been able to make your own templates, but now you can select one even after you’ve arrived in the editor. There is a new place (the create page) which features bookmarked and official templates (as well as your own). Most importantly, there is a way to set a “default template” now, meaning all new Pens will start with the same setup as the Pen you pick as that.

Time Jumps
* 00:00:40 Templates aren’t new ’round here
* 00:05:23 One important change to templates
* 00:09:59 Official templates from CodePen
* 00:12:55 How to make a pen a template
* 00:18:58 If you want a minimalist experience, use Blank Classic template
* 00:23:32 Some templates are more available than others

Advertisement banner for website

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.

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 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

Cinematic single-page cybersecurity portfolio: terminal loader, matrix rain, particles, GSAP animations, security dashboard. Vanilla HTML/CSS/JS.

Tool takes website screenshots. No API key required.

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);
}

Glassphorism card for beginners:

<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.