Codepen Radio

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

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.

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 out into needs to match those types perfectly, or else it panics. We had found that our Go code was working around this in all sorts of ways that felt sloppy and inconsistent. One way to fix this? Fix any bad data going into the DB, then write a script to fix all the data in the DB. This is exactly the approach I took at first, and it would have absolutely fixed this problem. But Alex took a step back and looked at the problem a bit wider, and we ended up building some tools that helped us solve this proble

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 deployments to keep you honest) and used more tooling (shout out npx depcheck) to clean more of it up. Workspaces in a monorepo can also paper over missing dependencies — blech. Another change was moving off using a .dev domain for local development, which oddly actually caused some strange and hard-to-diagnose DNS issues sometimes. We're on .test now, which should never be a public TLD. Time Jumps Sponsor: Notion Notion is an amazing collaborative tool that not only helps organize your company

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 treatment. This is a daily and never-ending war. Time Jumps Sponsor: Notion Notion is an amazing collaborative tool that not only helps organize your company’s information but helps with project management as well. We know that all too well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com. Take your first step toward an organized, happier team, today.

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 on Fosstodon, which is an open-source-focused instance. 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.

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's winner, at #13 with Liquid Transition Effect, and there were two NFT-themed landing pages (1, 2) in the Top 100. A lot of Pens attract attention when they have that "I could use this" feel to them, demonstrated by Ryan Mulligan's Logo Wall at #2! High five to Greensock for taking #3 with a re-creation of Brian Cross' lovely Pen. The tag "gsap" was used a ton in the Top 100. Jon Kantner took #4 and 10 other spots making this the most appearances on the Top 100 list ever, and also took a spot with a Pen made on December 13th! Aaron Iker and Yoav Kadosh both had 4 spots. Perhaps my favorite because o

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 you have to choose where those words will go that make the most sense. Right now, it's a balance between Notion, GitHub, Slack, and even our codebase itself. 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

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

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 can be put off until we're literally working on that release. Without at least that prioritization, things would take much longer. The releases are also chunked into sub-projects with a no-too-little and not-too-big quality, and within those projects is where the kan-baning happens. If we can keep the whole team on one project (or at least a group of 2-3), it limits the context switching which also helps speed and productivity. We use Notion for most of this work, and it's been nice to keep literally all of it (all the way up through all the phases) in one big database, then we scope the views down to phases

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

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 Rails. We proved out this combination of technologies for ourselves, building a whole set of admin tools with it. Now we're ready to keep that train going as we build out more of CodePen with the same stack. But removing Rails means moving off of our Rails-based GraphQL implementation. This means re-writing that API in Go, another bit of tech we've had a lot of luck with. Turns out that re-writing an API is more time-consuming than writing it to begin with, especially as we need to run them side-by-side and behave identically. No refactoring allowed! Unless of course we want to refactor it on both sides and take e

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 Cloudflare data center that owns the Durable Object. In their intro blog post a few years back, they call the "killer app" real-time collaborative document editing, which is obviously of interest to us. So we've been tinkering and playing with how that might work with CodePen's future technology. 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 Koord and INVISV to build their competitive edge with infrastructure. Equinix Metal provides real time guidance and support to help

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, which is a button that expands to show a spinner. This concept started with Hakim and has now made its way to surely hundreds or thousands of websites, some as big as Slack and some as awesome as CodePen itself. Time Jumps Sponsor: Equinix Metal 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. Equinix Metal provides real-time guidance and support to help startups grow faster. With up to $100,000 in infrastructure credit, access to Equinix’s global ecosystem of over 10,

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. Equinix Metal provides real time guidance and support to help startups grow faster. With up to $100,000 in infrastructure credit, access to Equinix’s global ecosystem of over 10,000 customers and 1,800 networks, see why startups choose Equinix Metal. It’s not just about the infrastructure, it's about the people behind it. Are you ready to go global? Visit metal.equinix.com/startups to take your startup to the next level.