PODCAST

CodePen Radio

CodePen Blog

The CodePen team talk about the ins and outs of running a web software business.

technology

All Episodes

0:00

417: Iframe Allow Attribute Saga

CodePen Radio ·

2025/11/18

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

en-US

0:00

416: Upgrading Next.js & React

CodePen Radio ·

2025/11/05

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

en-US

0:00

415: Babel Choices

CodePen Radio ·

2025/10/28

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

en-US

0:00

414: Apollo (and the Almighty Cache)

CodePen Radio ·

2025/10/23

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

en-US

0:00

413: Still indie after all these years

CodePen Radio ·

2025/10/14

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

en-US

0:00

412: 2.0 Embedded Pens

CodePen Radio ·

2025/10/09

Or just "Embeds" as we more frequently refer to them as. Stephen and Chris talk about the fairly meaty project which was re-writing our Embeds for a CodePen 2.0 world. No longer can we assume Pens are just one HTML, CSS, and JavaScript "file", so they needed a bit of a redesign, but doing as little as possible so that existing Embed Themes still work. This was plenty tricky as it was a re-write from Rails to Next.js, with everything needing to be Server-Side Rendered and as lightweight as possible

en-US

0:00

411: The Power of Tree-Sitter

CodePen Radio ·

2025/10/01

Alex and Chris hop on the show to talk about a bit of technology that Alex calls "The 2nd best technological choice he's ever made." That technology is called Tree-sitter. It's a code parsing tool for building ASTs (Abstract Syntax Trees) out of code. GitHub uses it to power search and "go to" functionality. The creators now work on Zen, where a code parser is paramount. We use it to understand an entire Pen very quickly so we can understand how it all links together (among other things) and make a

en-US

0:00

410: Trying to help humans in an industry that is...

CodePen Radio ·

2025/09/23

Chris & Marie jump on the podcast to talk about just how drastically customer support has changed over the last few years. We still exclusively do customer support over email. Incoming email from real customers who need a hand with something where they type out that email in plain languages themselves are few and far between. Instead we get an onslaught of noise from users that don't exist about Pens and situations that don't exist. The influence of agentic AI is massive here, some of it with

en-US

0:00

409: Our Own Script Injection

CodePen Radio ·

2025/09/16

Chris and Stephen talk about how we use a Cloudflare Worker & HTMLRewriter to inject a very special <script> tag into the previews of the Pens you work on. This script has a lot of important jobs so it's presence is crucial, and getting it in there reliably can is a bit of a challenge.Time Jumps

en-US

0:00

408: Proxied Third-Party JavaScript

CodePen Radio ·

2025/09/09

Chris and Stephen hop on the podcast to discuss the concept of a proxy. Possibly the most "gray hat" thing that CodePen does. We use a third-party analytics tool called Fullres. We could just put a link to the <script> necessary to make that work directly to fullres.com, but being an analytics tool, it's blocked by a ton of ad blocking browsers and browser extensions. We made the conscious choice to have that <script> point to a codepen.io URL instead (a proxy) so that we get (much) more

en-US

0:00

407: Our Own CDN

CodePen Radio ·

2025/09/02

Robert and Chris jump on to talk about own own little CDN project. Maybe that's not the right term, but we struggled with naming it. Truth be told, it's the /public/ folder in our monorepo, where the purpose is getting files to the world wide internet at URLs that anyone can access. Our favicon is a good example, where many of our sites need access to that, but we only want it once in our repo (but we have actually lots of use-cases.)There are several complications along the way. One is that we

en-US

0:00

406: Hot Trends of 2025

CodePen Radio ·

2025/08/28

Marie and Chris jump on to discuss some of the trends of what people are building on CodePen here, approximately halfway through 2025. New CSS! Custom @functions (just landed) if() function clip-path & shape() corner-shape and the superellipse Scrolling stuff The attr() power up Hot Styles Liquid glass (Jhey's demo, Spark) Hard glitch (CRT-like effect with VFX-JS, Glitchy button hover effect with VFX-JS, ❍ Cinematic Glitch Slideshow) Holographics (CSS

en-US

0:00

405: Elasticsearch → Postgres Search

CodePen Radio ·

2025/08/19

Alex & Chris get into a fairly recent technological change at CodePen where we ditched our Elasticsearch implementation for just using our own Postgres database for search. Sometimes choices like this are more about team expertise, dev environment practicalities, and complexity tradeoffs. We found this change to be much better for us, which matters! For the most part search is better and faster. Postgres is not nearly as fancy and capable as Elasticsearch, but we werent taking advantage of what

en-US

0:00

404: Preventing Infinite Loops from Crashing the Browser

CodePen Radio ·

2025/08/06

Stephen and Chris hop on to talk about how we're saving everyone from crashed browser tabs in CodePen's 2.0 editor. One simple:Executing JavaScript can cause a browser tab to entirely lock up, preventing you from doing anything, like potentially saving your work. It can even crash other same-domain tabs. But not on our watch! CodePen is now using a "heartbeat" technique to report up from the preview iframe to the parent page, and if we don't hear the heartbeat, we can rip out the iframe and

en-US

0:00

403: Privacy & Permissions

CodePen Radio ·

2025/07/27

Chris & Rachel hop on the show to talk about the expanded privacy (access) model in the 2.0 editor (in Private Beta as we speak). Private Pens have always been a big deal, but as private as they are, if someone has the URL, they have the URL, and it doesn't always feel very private. There are two new levels of privacy in the 2.0 editor: password protected and collaborators only. Passwords are an obvious choice we probably should have done long ago. With it, both the Pen in the editor itself, as

en-US

0:00

402: Bookmarks

CodePen Radio ·

2025/07/16

Pins are dead!Long live bookmarks! Pins was never a good name for the feature we have on CodePen where you can mark a Pen or Collection to more quickly jump back to it from anywhere on the site. The word is too similar to "Pen" that it's just awkward, not to mention it's not exactly and obvious metaphor. A bookmark is a much more clear term and icon, so we decided to switch to it. Switching the UI is kind of the easy part. It's kind of a cultural thing at CodePen, but when we make a change

en-US

0:00

400: Hiatus

CodePen Radio ·

2023/02/08

Marie and I jump on the show to tell y'all we're taking a little break! It feels like years since we've been eluding to the fact that we're working on a new major upgrade to CodePen. Rather than keep dancing around it, we're going to minimize or remove working on anything that isn't working on that. We can't wait to come back for episode 401 and tell you all about it.Time Jumps Sponsor: Split This podcast is powered by Split. The Feature Management & Experimentation Platform that

en-US

0:00

399: Data Munging

CodePen Radio ·

2023/02/01

There was a small problem in our database. Some JSON data we kept in a column would sometimes have a string instead of an integer. Like {"tabSize": "5"} instead of {"tabSize": 5} of the like. Investigation on how that happened was just silly stuff like not calling parseInt on a value as it came off a <select> element in the DOM. This problem never surfaced because our Rails app just papered over it. But we're moving our code to Go in when you parse JSON in Go, the struct type that you parse it

en-US

0:00

398: DevOops

CodePen Radio ·

2023/01/26

Stephen and I hop on the podcast to chat about some of our recent tooling, local development, and DevOps work. A little while back, we cleaned up our entire monorepo's circular dependency problems using Madge and elbow grease. That kind of thing usually isn't the biggest of deals and the kind of thing a super mature bundler like webpack deals with, but other bundlers might choke on. Later, we learned that we had more dependency issues like inter-package circular dependencies (nothing like production

en-US

32:52

397: User-Generated Content Saftey

CodePen Radio ·

2023/01/18

I was asked about the paradoxical nature of CodePen itself recently. CodePen needs to be safe and secure, yet we accept and gleefully execute user-authored code, which is like don't-do-that 101 in web security. Marie and I hop on the show to talk this through as an update from quite a long time ago. It's wonderfully-terribly complicated. Part of what complicates it is that there are many different kinds of worrisome code, from malicious, to distasteful, to spam, and they all need different

en-US

116 results

CodePen Radio

All Episodes

Similar Podcasts

Lead With AI

Tamara Nall

Linux in the Ham Shack

Black Sparrow Media

Data Engineering Podcast

Tobias Macey

Eye On A.I.

Craig S. Smith

Reflections

Livewire Labs