409: Our Own Script Injection

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

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 accurate usage data on the app. Since there is nothing tracked that is an anonymity concern, and we do nothing with the data other than help inform ourselves on how to make a better app, we wear this gray hat. If you'd still like to block these requests, the path would be https://codepen.io/stats/fr/* Time Jumps

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 have actually lots of use-cases.) There are several complications along the way. One is that we need to fingerprint these files so we can cache-bust them when needed. We also need to be able to import the URLs in other parts of the repo, so we need manifest files that contain those URLs in multiple formats. Plus many of the files have their own build process, they aren't just entirely static files. In the end, building our own thing was probably the right move. The files go to Cloudflare R2, which, I suppose, is the CDN part. Time Jumps

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 Holographic Masks) Grainy textures (Grainy distorted interactive 1 gradient blobs) Innovative blurs (wavy wobbly lava orb, Bubbles Background Animation) New color spaces (OKLCH Swatch Example, CSS Color Functions, CSS oklch Gradation) Hot Pens Petr Knoll’s Glass Button (From February, well ahead of liquid glass) Mike Bespalov’s Monospace ASCII art generator (known to be “vibe coded”) Adam Kuhn’s Severance Lumon Macrodata Refinement Steve Gardner’s “Who Needs Shaders” Time Jumps

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 Elasticsearch had to offer anyway. For the power users out there: it's true that we've lost the ability to do in-code search for now. But it's temporary and will be coming back in time. Time Jumps

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 stop the crash. But it was very tricky to get working and not too jumpy. Fortunately, we got it all working, because our previous technique of instrumenting your JavaScript wasn't going to scale well to the 2.0 editor. Time Jumps

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 well as the potentially deployed site are password protected. Our new permissions model is intertwined in this. Now you can invite others directly to be a fellow Editor or simply a Viewer to an otherwise private Pen. If you set the privacy level to "collaborators only", that's the most private a Pen can possibly be. Time Jumps

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 like this, we change it 100% through the entire code base, down to the database itself. In order to do that, we had to chunk it into stages so that those stages can roll out independently, but in order, to make it seamless. Now that it's done, we were able to extend the functionality of Bookmarks a bit, such that bookmarking a template is extra useful. One place to see that is on the new Create page. As an extra bit of history, the idea for Bookmarks came from Katie Kovalcin when we worked with Sparkbox for a redesign ages ago, then Klare Frake took the idea home. Time Jumps

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'll be kicking off the podcast again talking about a huge and vital bit of CodePen infastructure: our email system. Outgoing email, that is. We get plenty of incoming email from y'all as well, but this is about the app itself sending email.  Timeline Links

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 reimagines software delivery. By attaching insightful data to feature flags, Split frees you to quickly deploy, measure, and learn the impact of every feature you release. So you can safely deliver features up to 50 times faster and exhale. What a Release. Start raising feature flags (and lowering stress). Visit Split.io/CodePen for a free trial.