CodePen Radio

432: Trends of 2026 (So Far) 03.07.2026

Marie has her eye on what seems to be super popular with CodePen users so far this year. Galleries (in different directions) https://codepen.io/thebabydino/pen/dPXVyqN https://codepen.io/luis-lessrain/pen/ZYpyoRV https://codepen.io/Nidal95/pen/qENQPBp https://codepen.io/ol-ivier/pen/emdjmBQ https://codepen.io/cbolson/pen/MYebgqj Custom Select https://codepen.io/editor/cbolson/pen/019cbfe5-85da-7d31-a7de-44b6b35e7c1c https://codepen.io/t_afif/pen/PwGPJOB shape(), border-shape, corner-shape https://codepen.io/una/pen/ogzRBWV https://codepen.io/una/pen/bNeLmoZ https://codepen.io/donotfold/pen/vEXvxjb scroll-timeline, animation-timeline https://codepen.io/danielhaim/pen/azmBEPL https://codepen.io/t_afif/pen/JoKYwXO CSS Functions https://frontendmasters.com/blog/the-fundamentals-and-dev-experience-of-css-function/ Sponsor: Notion With the recent launch of Custom Agents, Notion became the collaborative AI workspace where teams and agents work side by side. And now, their new Developer Platform is turning that workspace into infrastructure developers can build on. Time Jumps

431: Versions are Deeply Integrated into CodePen 30.06.2026

Rachel and Chris on the podcast this week discussion the (ahem, rather large news) that every CodePen 2.0 Pen is versioned. That's right, you can jump back in time to previous versions at any time in case mistakes were made. You can take a look at the preview and code of past versions in case you just need to reference something. It all works extremely fast and efficiently. We get into the why and how it all works. Time Jumps

430: The Wild World of Keyboard Shortcuts in Web Apps 24.06.2026

Shaw and Chris talk about how the keyboard shortcut situation is challenging, but in the best shape it's ever been in for our 2.0 editor. Between the operating system, browser, CodeMirror, and Emmet, the space is fairly crowded, but we've got enough room to offer lots of useful stuff. The commands are more findable than ever with our new Command system and the Omnibar. Time Jumps

429: Why CodePen Rebuilt Its Realtime Service 16.06.2026

We've had realtime features on CodePen for ages. Back when it was pretty damn hard. Our Collab Mode is an obvious one, where users can code together. (This "just works" in the 2.0 editor, it's not called anything special.) That and Professor Mode used to have realtime chat (until we pulled it because very few people used it). We went through iterations of this including our own implementations and using services like PubNub. Code collaboration in realtime is particularly difficult. We used FirePad/FireBase for a while for this, and honestly that was a nice abstraction. Increasing the difficulty though, we need to layer on additional needs like syncing settings, presence, and just arbitrary message delivery (e.g. "a new build is ready!"). We used Ably for much of this for quite a while. These days, our whole realtime system integrates with our caching layer, goes over the network using standard web sockets to our beefy Go servers, and is integrated with CRDTs/Y.js to keep everybody looking at the same thing. Plenty of open source software at work, but no more third-party services. This means lower operating costs and a simpler architecture. The cost is that problems are, well, our problems. Time Jumps

428: Improving The Entire Billing System (is Very Worth It) 09.06.2026

Rachel and Chris on the show this week to discuss a series of big changes over the last, say, six months or so with our billing system. We've essentially re-written this thing several times, and obviously this is the best time. Having three plans, two payment providers, teams, and fifteen years of history is a lot to manage. An important aspect of the journey was getting the billing information into a single table in our database, and relying more on dynamic calls out to the payment providers when needed rather than trying to keep too much data in sync. Of course we wanted to clean up the codebase and get payment APIs ported over to our latest system, but the biggest need this was all satisfying was UX. We wanted a proper pricing page, better pages for people to manage their billing, and really easy upgrade modals inside our 2.0 editor. The good news is, it all worked. Time Jumps

427: Next.js and The Journey of SSR 02.06.2026

Having that first response from the server to users browsers be, ya know, full of good, useful, renderable HTML is certainly better than an empty <div id="app">. You can feel it and see it in the filmstrip view of the site loading. Not to mention you need it for at least things like <meta> tags if you want your URLs to "unfurl" properly on social sites. Stephen and Chris jump on the podcast to discuss this journey for us as it relates to Next.js. We got it "for free" for our Ruby on Rails pages, but as we're slowly changing frameworks over the years, we've got new challenges, and some gray-hair inducing bugs. We started on Next.js' "page router" and made changes to our Apollo Cache setup to support SSR. Then, over time, moved to the "app router" and did lots more work getting ready getting the most complex page on our site, the 2.0 editor, completely SSRd. That meant getting rid of using things like localStorage for anything view related and fighting bugs related to React somehow mounting itself to the wrong root. Time Jumps

426: Browserslist in CodePen 2.0 27.05.2026

Stephen and Chris chat about how the 2.0 editor (well, the compiler really) understands and supports Browserslist, a config format that lives in your package.json file that multiple blocks can understand and make browser support decisions against. Sponsor: Notion With the recent launch of Custom Agents, Notion became the collaborative AI workspace where teams and agents work side by side. And now, their new Developer Platform is turning that workspace into infrastructure developers can build on. Jump Links

425: Help Your Users Help You with Debug Logs 12.05.2026

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

424: File List Optimization 29.04.2026

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

423: 2.0 Templates 22.04.2026

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

422: Supporting Packages 14.04.2026

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 <script type="importmap"> in your HTML files that import those packages from esm.sh. Complex in that, well, all those steps are fairly difficult to get right, handle all edge cases, and do extremely quickly. All of which the CodePen Compiler does. Time Jumps

421: View Control of the 2.0 Editor 08.04.2026

Stephen & Chris look at the UI of the 2.0 Editor and show all the control you have over what you're looking at. Way more control than the Classic editor! We share some of the thinking behind it. Don't miss the Omnibar! Time Jumps Links Circle Round Story Pirates Podcast Who Moved My Cheese? The freeCodeCamp Podcast

420: What are Blocks? 11.03.2026

With CodePen 2.0, we've got a new word we're using: Blocks. A way to think about Blocks is anything that processes code. They are added as steps to the CodePen Compiler as needed. For example, TypeScript is a block, because it processes files in the TypeScript syntax into JavaScript files. But something like Lodash is not a block. Lodash is a package from npm (which we also handle, but that's a topic for another podcast). Lodash doesn't process code, it's just a library that is linked up or bundled. Time Jumps

419: Why 2.0? 05.03.2026

CodePen 2.0 was the most ambitious project that we've ever taken on in our lives. Why would we do such a thing? Chris and Alex explain the thinking behind it. We've been around a long time, know what our customers want, and are developers ourselves, so we know how this industry moves. We thought we could serve both in a powerful and flexible way, taking us into the future. Time Jumps

418: CodeMirror 6 21.02.2026

Chris Coyier and Stephen Shaw discuss the transition from CodeMirror 5 to CodeMirror 6, highlighting the significant improvements in accessibility, performance, and user experience. They delve into architectural changes, integration with modern JavaScript frameworks such as Next.js, and the new theming options available in the editor. Time Jumps

417: Iframe Allow Attribute Saga 18.11.2025

There was a day not long ago where a Google Chrome browser update left any page with a CodePen Embed on it throwing a whole big pile of red JavaScript errors in the console. Not ideal, obviously. The change was related to how the browser handles allow attributes on iframes (i.e. <iframe allow="...">). CodePen was calculating the appropriate values inside an iframe for a nested iframe. That must have been a security issue of sorts, as now those values need to be present on the outside iframe as well. We documented all this in a blog post so hopefully we could get some attention from Chrome on this, and for other browser makers as well since it affects all of us. And I posted it on the ol' social media: Huge thanks to Bramus Van Damme who saw this, triaged it at Chrome, and had a resolution within a day: I think the patch is a great change so hats off to everyone involved for getting it done so quickly. It's already in Canary and don't really know when it'll get the stable but that sure will be good. It follows how Safari is doing things where values that aren't understood are just ignored (which we think is fine and inline with how HTML normally works). Fortunately we were able to mitigate the problem a little until then. For most Embedded Pens, a <script> is loaded on the page embedding it, and we dynamically create the <iframe> for you. This is just nice as it makes making an accessible fallback easier and gives you access to API-ish features for the embeds. We were able to augment that script to do a little browser user-agent sniffing and apply the correct set of allow attributes on the iframe, as to avoid those JavaScript errors we were seeing. But there's the rub: we'd rather not do any user-agent sniffing at all. If we could just put all the possible allow attributes we want on there, and not be terribly concerned if any particular browser didn't support any particular value, that would be ideal. We just can't have the scary console errors, out of concern for our users who may not understand them. Where we're at in the saga now is that: We're waiting for the change to Chrome to get to stable. We're hoping Safari stays the way it is. OH HI FIREFOX. On that last point, if we put all the allow attributes we would want to on an <iframe> in Firefox, we also get console-bombed. This time not with red-errors but with yellow-warnings. So yes, hi Firefox, if you could also not display these warnings (unless a reporting URL is set up) that would be great. We'd be one less website out there relying on user-agent sniffing.

416: Upgrading Next.js & React 05.11.2025

Shaw and Chris are on the show to talk about the thinking and challenges behind upgrading these rather important bits of technology in our stack. We definitely think of React version upgrades and Next.js version upgrades as different things. Sometimes they are prerequisites. The Next.js ones are a bit more important as 1) the docs for the most recent version tend to be the best and 2) it involves server side code which is important for security reasons. Never has any of it been trivially easy. Time Jumps

415: Babel Choices 28.10.2025

Robert and Chris hop on the show to talk about choices we've had to make around Babel. Probably the best way to use Babel is to just use the @babel/preset-env plugin so you get modern JavaScript features processed down to a level of browser support you find comfortable. But Babel supports all sorts of plugins, and in our Classic Editor, all you do is select "Babel" from a dropdown menu and that's it. You don't see the config nor can you change it, and that config we use does not use preset env. So we're in an interesting position with the 2.0 editor. We want to give new Pens, which do support editable configs, a good modern config, and we want all converted Classic Pens a config that doesn't break anything. There is some ultra-old cruft in that old config, and supporting all of it felt kinda silly. We could support a "legacy" Babel block that does support all of it, but so far, we've decided to just provide a config that handles the vast majority of old stuff, while using the same Babel block that everyone will get on day one. We're still in the midst of working on our conversion code an verifying the output of loads of Classic Pens, so we'll see how it goes! Time Jumps

414: Apollo (and the Almighty Cache) 23.10.2025

Rachel and Chris jump on the show to talk about a bit of client-side technology we use: Apollo. We use it because we have a GraphQL API and Apollo helps us write queries and mutations that go through that API. It slots in quite nicely with our React front-end, providing hooks we use to do the data work we need to do when we need to do it. Plus we get typed data all the way through. Chris gets to learn that the Apollo Cache isn't some bonus feature that just helps makes things faster, but an inevitable and deeply integrated feature into how this whole thing works. Time Jumps

413: Still indie after all these years 14.10.2025

We're over 13 years old as a company now. We decide that we're not a startup anymore (we're a "small business" with big dreams) but we are still indie. We've seen trends come and go. We just do what we do, knowing the tradeoffs, and plan to keep getting better as long as we can. Links Timeline – Chris Coyier 115: Adam Argyle on Cracking the 2025 Web Dev Interview | Front-End Fire Time Jumps