CodePen Radio

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

Robert and Chris jump on to talk about our 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...

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

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

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

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

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

Hi! We're back! Weird right? It's been over 2 years.  We took a break after  episode 400,  not because we ran out of things to talk about, but because we were so focused on our CodePen 2.0 work, it got old not being able to discuss it yet. We'll be talking plenty about that going forward. But CodePen has a ton of moving parts, so we'll be talking about all of it.  This week we'...

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

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

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

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

Robert and I jump on the podcast to have a little chat about open source generally and what we do with open source at CodePen. CodePen itself is not open source, aside from the small bits we've made public and the open-source things we include within it. But all Public Pens on CodePen are open source, so we certainly handle a lot of it! Enough that I felt comfortable making our Mastodon presence o...

Marie and I hop on the show to discuss our recently released Most Hearted of 2022 Pens . We only did the calculations the day before, so this is more of a first reaction than a deep dive. Congrats to Hyperplexed for #1 and a massive year on CodePen. Last year, just one entry on the Top 100, and this year, nine. "Full layouts" like this appeared a number of times, including Aysenur Turk, last year'...

Rach lives in Australia, so for our otherwise U.S.-based team, that's about as remote as it gets. We've always been remote at CodePen, so we have it built-in to our culture already, but that doesn't mean we don't have to plan for it, think about it, and adjust things to make sure we're all doing the best we can. Writing is a fundamental aspect of it all, but even that is funny sometimes because yo...

Marie and Chris talk about the year in CodePen Challenges . If you participate, this might be an interesting look into how we think about them. If you don't, it might help you understand what they are and how they might just tickle your fancy. Time Jumps Sponsor: Split This podcast is powered by Split . The Feature Management & Experimentation Platform that reimagines software delivery. By att...

Dee and Chris chat about our latest take on Project Management (PM), a somewhat tricky topic for us with such a small team where literally everyone is an individual contributor (IC) with a lot on their shoulders aside from PM. We're attempting a project of large scale, so part of what has helped us so far is scoping the project into phases releases. That way work that we know is in a later release...

TypeScript ain't exactly new, but it's a bit new to us. Robert was the most knowledgeable about TypeScript on the team and felt like it could be valuable for us. What does that mean though? Where would we use TypeScript? What blockers were there? What does it actually help with? The implementation hasn't been trivial, so has it been worth it? Will it be worth it? Robert, Chris, and Stephen discuss...

Marie and I talk about what's going on in the world of social media, and what that might mean for CodePen and front-end developers. Twitter doesn't feel particularly healthy at the moment, but has been the biggest player for front-end developers for a lot of years. Are we moving? Not? Where? Time Jumps

One thing that's been keeping us very busy at CodePen is moving our main API. We decided on GraphQL long ago and it's served us pretty well. We originally built it in Ruby on Rails alongside a lot of the rest of our app. But while Rails served us well, we've been moving off of it. We like our React architecture and we're better served leaning into that, with frameworks like Next, than staying on R...

Robert and I jump on to chat about Cloudflare's product Durable Objects . It's part of their Workers platform, which we already use at CodePen a good bit, but with Durable Objects... Global Uniqueness guarantees that there will be a single instance of a Durable Object class with a given ID running at once, across the world. Requests for a Durable Object ID are routed by the Workers runtime to the...

A few months back, Alex and I did a 10-year anniversary episode that took the form of 10 bits of advice formed in the fires of running a software company for a decade. That was us talking at you. We thought it would be fun to turn the tables and have you talk at us in the form of an Ask-Me-Anything follow-up to that 10-year show. Time Jumps

This week I got to speak with Hakim El Hattab . I feel pretty special as Hakim told me he doesn't do public stuff very often. I get it! He's a busy man with a family, a successful company , and ambitious other projects . I think of Hakim as the master of simple but satisfying UI concepts that have a way of becoming bigger than demos. Consider Ladda , which you can find as part of his personal site...

This week I got to talk to Kristopher Van Sant ! Again ! This time we got to talk about Kristopher's professional work as well as some favorite Pens . Time Jumps Sponsor: Equinix Metal’s Startup Partner Program Equinix Metal’s Startup Partner Program helps early stage companies level up. Their experts work with startups like GenesysGo and Cuemby to build their competitive edge with infrastructure....

We just recently published the 300th CodePen Spark . Marie joins me on the show, as she leads up the creation of the vast majority of Spark newsletters. We get into things like why we do it, how we create it, how we send it, and things we've learned along the way sending a newsletter of this magnitude. We have some interesting failsafe procedures in place. Plus we get into some of the analytic num...