CodePen Radio

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

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

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

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

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 plan for how to process the Pen (a "build plan"). It's fast, accurate, forgiving, and extensible. Just a heck of a learning curve. Jump Links

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