CodePen Radio

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 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 problem, and solve future problems related to this. For one, we built a more permission JSON parser that would not panic on something as easy to fix as a string-as-int problem. This worked by way of some Go reflection that could tell what types the data was supposed to be and coerce them if possible. But what should the value fall back to if it's not savable? That was another tool we built to set the default values of Go structs to be potentially other values than what the defaults for their types are. And since this is all in the realm of data validation, we built another tool to validate the data in Go structs against constraints, so we can always keep the data they contain good. Once all these tools were in place, the new script to fix the data was much easier to write. Just call the safe JSON function to fix the data and put it back. And the result is a cleaned up code base and tools we can use for data safety for the long term. 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.

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

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 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 of the deep CSS trickery involved was Scott Kellum's Apple inspired pride clock. Scott has the oldest account of anyone in the list, over 10 years old! Huge fan of Steve Gardener's joke, though as well. 11 of the Top 100 were created for CodePen Challenges. 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.

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 a free trial.

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 and projects and cards. Each card we make sure has a very actionable tone to it and includes everything one might need to finish the task, including decisions, previous conversations, relevant other tickets, etc. Each card has things you might expect like who is working on it, the current status, whether it's blocked or not, and several other useful bits of metadata. It also contains time estimates, so we can, at a glance, see how far we've come and what's left on any given project. We know things like time estimates can change quite a bit, but everyone is well aware of that and isn't beholden to the numbers. It just gives us some idea of what is going on other than feeling like we're entirely driving blind. Each week we take a look at the progress together as a team. 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.

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 even more time. Dee joined me this week in talking about all this. It's a huge job! But we've been doing well at it, building our own tooling, doing lots of testing, and ultimately proving that it works by releasing it in small areas on the production site. It's all working out how we hoped it would: fast, cheap, and easier to reason about. 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 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, they might just be what you need to take your startup global. Visit metal.equinix.com/startups to take your startup to the next level.

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 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, they might just be what you need to take your startup global. Visit metal.equinix.com/startups to take your startup to the next level.

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 has has made it's way to surely hundreds or thousands of websites, some as big as Slack and some as awesome as CodePen itself. Time Jumps Sponsor: Notion For companies of all sizes, Notion provides one central and customizable workspace that can be tailored to fit any team and brings all teams together to get more done and move faster.Notion is an all-in-one team collaboration tool that combines note-taking, document sharing, wikis, project management, and much more into one space that's simple, powerful, and beautifully designed.With powerful integrations, an API, and seamless navigation, you'll have everything you need in one spot so you can make speed your advantage — without the silos and context switching that slow companies down.Plus, Notion has a worldwide network of millions of users creating templates, tutorials, and new inspiration. The product is getting better all the time, and you'll always have the support you need.Learn more and get started for free right now at notion.com.

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 […]

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 […]

In this show, Stephen and Chris get to talk about an internal technical detail we were improving in our database, which led to a public-facing feature for y’all. The idea is that all (most, anyway) database tables should have a deleted_at column. When you query against them, under regular circumstances, any rows that have a […]

CodePen will host your assets, like images, data models, libraries, whatever. It’s quite useful! They are easy to browse, easy to copy URLs or code snippets of usage, served with the right headers from a fast global CDN, and heck, we’ll even help optimize them. It’s easy to amass a lof of them, as we […]

Marie and I this week! Marie dug up some interesting data about “external library” usage on CodePen. In the Pen Editor (specifically), you have the option of adding external resources. These are literally placed in the Settings area and added to the end of your HTML. We’re specifically focused on these (not scripts you might […]

This week I got to speak with Jake Albaugh. Long-time listeners will remember Jake as an alumnus of Team CodePen. That’s a first for a podcast guest! We looked back a bit, where Marie dug up some of the best Jake classic Pens, and talked with him about what his professional life has looked like […]

Both Alex and I, the co-founders of CodePen, spent time trying to whittle down hopefully interesting and practical advice for you from our experience in running a SaaS company for a decade! Let’s go back and forth, combining into a top 10 like we did in the show. 🔟 Alex: The High Low Principle Only […]

This week I got to speak with Lee Martin! Lee is a fascinating fella, due in part to him having a job I think we all want: designing weird cool digital experiences for good bands. Fortunately for us, he often writes about them. Just check out the Inter Dimensional Video Player for Lord Huron, for […]

This week I got to speak with Jase Smith, a kindred spirit bouncing across the designer/developer line out of Denver, Colorado. Before you know it, we’re doing a bit of a rundown of Jase’s career path, all the way from that all-too-familiar fake-it-til-you-make it early days to being a successful developer and mentoring as a […]

This week I got to speak with Ilithya, who put together some favorite Pens, some of which we actually manage to get to during the show 😂. Like our chat with Lea Rosema, we really get into the magic of Shaders. Shaders are certainly of the web, but often feel extraordinary, giving off a “the […]

This week I got to speak with Craig Roblewsky! Craig does a lot of web animation and hangs around the Greensock forums quite a bit, giving him a unique perspective on solving animation problems and coming up with clever solutions to them. Craig has his own site, motiontricks.com, as well which is an educational resource […]

This week I got to speak with Kevin Powell! Kevin has had tremendous success on YouTube educating people about CSS ‘n’ friends. But like so many good content creators, he’ll meet with where you are at and what you need — his personal site has written articles, resources, courses, and a newsletter. Kevin is a […]

This week Shaw and Chris dig into some deepnerd tech stuff: manipulating HTML. In a perfect world, perhaps we wouldn’t need to, but today, and even moreso in the foreseeable future of CodePen, we need to do a smidge of HTML manipulation on the HTML that you write or that is generated by code you […]

This week Marie and Chris get together to chat about what’s been hot hot hot on CodePen lately. We’ve discovered there is a really taking to the creamy cardstock look, for one thing. Typography is always great, but we’re seeing more typographic trickery often including variable fonts. While not new, there are still loads of […]

I got to speak to Jon Kantner! Jon is an incredibly prolific creator, and I believe has the most appearances in the CodePen Spark of any creator. Like so many other creators I’ve talked to Jon also shares what he knows in a variety of ways, like writing (see his personal site, or articles he […]

This week I got to speak with Alex Trost! Alex has been hard at work created Frontend Horse, a clever brand celebrating the beautiful and clever things in our industry via a newsletter, articles, streaming, a Discord community and more. This is the way to do it! Time Jumps Sponsor: Notion Notion is an amazing […]

This week I got to speak with Chris Smith! We got to talk about all sorts of things from blogging, to pushing the boundaries of CSS, to logic in CSS, to digging into some of Chris’ most interesting Pens, to Chris’ actual favorite Pen of all time. Time Jumps Sponsor: React Summit Ken Wheeler, Tejas […]

I got to talk with Lea Rosema this week! She’s an incredibly talented digital artist and front-end developer. She does quite a bit of art with some of the trickiest web technology out there: shaders! But rather than just learn it and use it, she helps other people learn and get more out of it. […]

I got to talk with Micah Godbolt this week! Micah is is a long-hauler at Microsoft working on Design Systems and such. His CodePen account looks a lot like mine: steady consistent usage of “just trying to figure something out” Pens sprinkled with some ideas that somehow seem to click with the wider front-end world. […]

I got to talk to Paulina Hetman this week! Paulina is a heck of a creative coder, using her skills as an illustrator and all-around web developer to make ideas come to life. And she doesn’t keep all those ideas to herself, she spends time educating other budding developers both professionally and by building courses […]

Klare is moving on from design at CodePen to design at GitHub. Huge congrats Klare! If you didn’t know Klare was our one and only dedicated designer here at CodePen and left a massive mark here in the design and UX of CodePen, the app, as well as internally in our organization practices. I’m talking […]

I got to talk to Varun! Varun is an incredible artist and would have been interesting to talk with him about literally anything, but since he’s dipped numerous toes into the world of NFTs, I wanted to chat with him about that in conjunction with his own art and other artists he’s a fan of. […]

This week I got a chance to talk to Kyle Shook. Kyle has started a new job at Foxtrot so we talked about what that process was like. In addition to creating all sorts of incredibly creative work on CodePen (just look at this Collection of Menus), Kyle helps other people level up their front-end […]

This week I got to speak with Chris Nager! I’ve known Chris quite a while. I remember being inspired by his hand-drawn SVG plus symbol and subsequent guide to commands, which inspired my own shortly after I was properly obsessed with SVG. We talk about all sorts of things like accessibility, how far CSS […]

If you Command (Mac) or Control (PC) click the Fork button, it will open the newly forked Pen in a new tab in your browser. That’s new behavior. Before, it would open the fork in the same tab, no matter how you click. That was unfortunate, as Cassie called out: Why didn’t it work like […]

I got to talk to Sarah Fossheim this week! One of the impressive things that Sarah does is near photograph-quality recreations of iconic old technology in HTML & CSS. I enjoyed the fact that neither of us quite totally knows what some of these machines even did, but appreciate their incredible aesthetics. Perhaps my favorite […]

I had tons of fun talking to Tiffany Choong this week! I loved learning her process on creating countless code art Pokémon characters. Just look at it and wing it! Wild. While I’m not nearly as creative as Tiffany, I feel some kinship looking through her Pens. Like how there are all these amazingly creative […]

I got to chat with CJ Gammon this week! CJ is a creative technologist, a term he’s tried to hang onto as he does more development work, so he can continue to communicate that he’s a designer as well. CJ has been at Adobe for nearly 10 years and has played with a huge variety […]

This week I get to talk to Ryan Mulligan! Ryan put together a Collection of some of his personal picks for favorite Pens and we get a chance to talk through a lot of them. There are some classic moments here I really feel, like when something you consider pretty basic gets way more popular […]

I got to talk with Amit Sheen this week about his journey into creative coding. Even his early work is incredibly interesting and recent work is downright stunning. Now he’s entering a phase of sharing what he knows with workshops like Pushing CSS to the Limit. Here’s a list of Pens we talk about in […]

I grabbed Adam intending to chat about all sorts of CSS stuff and his work at Google and on VisBug. But then we chatted pretty much the entire time about color and what’s coming there to the web platform. Time Jumps Sponsor: WordPress.com WordPress.com is the fastest way to spin up a WordPress site. You’ll […]

We’ve got Steve Gardner on this week! We get into all sorts of nitty gritty detail on the ol’ Christmas Cannon, a Pen of pure joy. Steve has some absolute classics that show off the web at it’s very best, like the Airplanes Pen. Can’t beat Steve’s cleverness and execution. Time Jumps Sponsor: Netlify Quirrel […]

Louis Hoebregts (aka Mamboleoo) has been creating wonderfully creative Pens on CodePen for many years. His early work, as we learn on this episode, was inspired by the CSS trickery of Lea Verou! He rotates his tools between HTML and CSS, SVG, and canvas, but tends to have an aspect of motion and the unexpected. […]

Aysenur Turk had a number of appearances on this year’s Top Hearted of 2021, including #1! In this podcast, I get to catch up with her, find out where she gets ideas and inspiration, how much time it takes to build something like her amazing layouts, and what her favorites are. Time Jumps Sponsor: Retool […]

As you read this, CodePen is 100% on PostgreSQL for our main relational database. It was a transition that took a couple weeks of pretty intense effort, and lots of planning and prep before that. I’ve got Alex on the show to talk about it, as he was the main instigator and led the effort, […]

It’s back! We counted up all the hearts given to every Pen created in 2021 and created a list of the top 100. Marie and Chris chat about this year’s list. Who’s on it, what’s on it, and digging into the numbers where we can. Remember that people can heart pens up to 3 times […]