Shows
CodePen Radio417: Iframe Allow Attribute SagaThere was a day not long ago where a Google Chrome browser update left any page with a CodePen Embed on it throwing a whole big pile of red JavaScript errors in the console. Not ideal, obviously.
The change was related to how the browser handles allow attributes on iframes (i.e. ). CodePen was calculating the appropriate values inside an iframe for a nested iframe. That must have been a security issue of sorts, as now those values need to be present on the outside iframe as well.
We documented all this in a blog...
2025-11-1900 min
CodePen Radio416: Upgrading Next.js & ReactShaw and Chris are on the show to talk about the thinking and challenges behind upgrading these rather important bits of technology in our stack. We definitely think of React version upgrades and Next.js version upgrades as different things. Sometimes they are prerequisites. The Next.js ones are a bit more important as 1) the docs for the most recent version tend to be the best and 2) it involves server side code which is important for security reasons. Never has any of it been trivially easy.
Time Jumps
2025-11-0600 min
CodePen Radio415: Babel ChoicesRobert and Chris hop on the show to talk about choices we've had to make around Babel.
Probably the best way to use Babel is to just use the @babel/preset-env plugin so you get modern JavaScript features processed down to a level of browser support you find comfortable. But Babel supports all sorts of plugins, and in our Classic Editor, all you do is select "Babel" from a dropdown menu and that's it. You don't see the config nor can you change it, and that config we use does not use preset env.
So...
2025-10-2800 min
CodePen Radio414: Apollo (and the Almighty Cache)Rachel and Chris jump on the show to talk about a bit of client-side technology we use: Apollo. We use it because we have a GraphQL API and Apollo helps us write queries and mutations that go through that API. It slots in quite nicely with our React front-end, providing hooks we use to do the data work we need to do when we need to do it. Plus we get typed data all the way through.
Chris gets to learn that the Apollo Cache isn't some bonus feature that just helps makes things faster, but an...
2025-10-2300 min
CodePen Radio413: Still indie after all these yearsWe'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
2025-10-1400 min
CodePen Radio412: 2.0 Embedded PensOr just "Embeds" as we more frequently refer to them as. Stephen and Chris talk about the fairly meaty project which was re-writing our Embeds for a CodePen 2.0 world. No longer can we assume Pens are just one HTML, CSS, and JavaScript "file", so they needed a bit of a redesign, but doing as little as possible so that existing Embed Themes still work. This was plenty tricky as it was a re-write from Rails to Next.js, with everything needing to be Server-Side Rendered and as lightweight as possible (thank urql!).
Time Jumps
2025-10-0900 min
CodePen Radio411: The Power of Tree-SitterAlex 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 "...
2025-10-0100 min
CodePen Radio410: Trying to help humans in an industry that is becoming increasingly non-humanChris & Marie jump on the podcast to talk about just how drastically customer support has changed over the last few years. We still exclusively do customer support over email. Incoming email from real customers who need a hand with something where they type out that email in plain languages themselves are few and far between. Instead we get an onslaught of noise from users that don't exist about Pens and situations that don't exist. The influence of agentic AI is massive here, some of it with nefarious intent and some not. All of it needs work to mitigate.
2025-09-2300 min
CodePen Radio409: Our Own Script InjectionChris and Stephen talk about how we use a Cloudflare Worker & HTMLRewriter to inject a very special 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
2025-09-1600 min
CodePen Radio408: Proxied Third-Party JavaScriptChris 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 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 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...
2025-09-0900 min
CodePen Radio407: Our Own CDNRobert 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...
2025-09-0200 min
CodePen Radio406: Hot Trends of 2025Marie 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 ok...
2025-08-2800 min
CodePen Radio405: Elasticsearch → Postgres SearchAlex & 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...
2025-08-1900 min
CodePen Radio404: Preventing Infinite Loops from Crashing the BrowserStephen 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...
2025-08-0600 min
CodePen Radio403: Privacy & PermissionsChris & 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.
2025-07-2700 min
CodePen Radio402: BookmarksPins 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...
2025-07-1600 min
CodePen Radio401: Outgoing EmailHi!
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. Outg...
2025-07-1033 min
CodePen Radio400: HiatusMarie 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...
2023-02-0800 min
CodePen Radio399: Data MungingThere 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...
2023-02-0100 min
CodePen Radio398: DevOopsStephen 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...
2023-01-2600 min
CodePen Radio397: User-Generated Content SafteyI 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
2023-01-1832 min
CodePen Radio396: Open SourceRobert 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...
2023-01-1100 min
CodePen Radio395: The Most Hearted of 2022Marie 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 "...
2023-01-0400 min
CodePen Radio394: Very Remote WorkRach 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...
2022-12-1400 min
CodePen Radio393: Challenges in 2022Marie 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...
2022-12-0700 min
CodePen Radio392: Project Management RefreshDee 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...
2022-11-3000 min
CodePen Radio391: Early TypeScript at CodePenTypeScript 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
2022-11-2300 min
CodePen Radio390: The Social Media ZeitgiestMarie 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
2022-11-1600 min
CodePen Radio389: Migrating a Ruby on Rails GraphQL API to a Go GraphQL APIOne 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...
2022-11-0200 min
CodePen Radio388: Durable ObjectsRobert 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...
2022-10-1900 min
CodePen Radio387: CodePen Co-Founders AMAA 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
2022-10-0500 min
CodePen Radio386: Hakim El HattabThis 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...
2022-09-2800 min
CodePen Radio385: Kristopher Van SantThis 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 networ...
2022-09-1400 min
CodePen Radio384: The 300 Sparks MilestoneWe 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 numbers behind what we're doing. Here's to another upcoming many hundred more!
Time Jumps
Sponsor: Notion
Notion is an amazing c...
2022-09-0700 min
CodePen Radio383: Soft Delete AllIn 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 non-null value will be filtered out. This is the concept of "soft" delete. It's not really gone from the database, it just behaves like it is. This has two clear benefits:
Deleting is super fast, it's just manipulating a single value.It...
2022-08-3100 min
CodePen Radio382: Bulk Actions for AssetsCodePen 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 allow you upload many at a time.
But while we had Bulk Upload, as it were, we didn't offer any other "bulk" actions, until now. Stephen and I talk about how we added more bulk actions for assets, making them all the...
2022-08-2400 min
CodePen Radio381: Data on External Library UsageMarie 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 add in the HTML by hand, Projects, imports, or otherwise) because we have them in a special database table — good for exactly this kind of data analysis! We're also focusing on just JavaScript this time. We'll look at the top 10 in terms of usage ov...
2022-08-1700 min
CodePen Radio380: Ol’ JakeThis 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 post-CodePen.
Time Jumps
Sponsor: Memberful
Memberful is easy to use, best-in-class membership software for independent creators, publishers, podcasters, educators, and more. We take care of the hard stuff so you and your clients can focus on what you...
2022-08-1000 min
CodePen Radio379: Chris & Alex have been running CodePen for 10 Years. What have they learned? Here’s the top 10!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 do things that are either:
High time, high valueLow time, low value
As in, they take a long time but are going to make a big difference. Or they won't take too long, don't ask too much of you, but are...
2022-08-0300 min
CodePen Radio378: Lee MartinThis 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 example, or Using Three.js to Hear the Dawn with Jack White. Keep up with Lee on Instagram, Twitter, or his personal site. He's overflowing with ideas, not just doing all the freelancing but taking some of those ideas and scaling them, like he's...
2022-07-2700 min
CodePen Radio377: Jase SmithThis 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 form of industry payback.
We didn't get to talk about as many of them as I would have liked, but Jase graciously made a Collection of some of his favorites. Quite a few explorations of color!
Jase is on...
2022-07-2000 min
CodePen Radio376: IlithyaThis 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 web can do that?" kind of feeling. Check out: personal website, collaboration with Eliza Struthers-Jobin, shaders tutorial video with Alex Trost, NFTs.
Time Jumps
Sponsor: Memberful
Memberful is easy to use, best-in-class membership software for independent creators, publishers, podcasters, edu...
2022-07-1300 min
CodePen Radio375: Craig RoblewskyThis 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 for animation. We get into all that, some of Craig's own favorite Pens, and some of Craig's other professional history on the show.
Time Jumps
Sponsor: Notion
Notion is an amazing collaborative tool that not only helps o...
2022-07-0600 min
CodePen Radio374: Kevin PowellThis 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 joy to talk to. We took the opportunity to nerd out on a variety of mostly CSS-related things.
Time Jumps
2022-07-0100 min
CodePen Radio373: Script Injection with Cloudflare WorkersThis 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 write on CodePen. A tiny example is removing the autofocus attribute when a Pen in shown in a grid view . A more significant example is that we need to inject some of our own JavaScript into your Pen, to power features of CodePen itself...
2022-06-2200 min
CodePen Radio372: TrendsThis 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 really wonderfully creative Pens using Three.js and p5.js. Neon-on-dark is a fresh look. We get into those and more, a bit sneakily as we can take an internal look at what the Top 100 might look like this year, but we can't share...
2022-06-1500 min
CodePen Radio371: Jon KantnerI 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 wrote when I ran CSS-Tricks). We got to chat about some of his iconic Pens, his work, and some past fascinations like Tweet-sized code experiments. Follow him on Twitter here.
Time Jumps
2022-06-0800 min
CodePen Radio370: Alex TrostThis 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 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...
2022-06-0100 min
CodePen Radio369: With Chris SmithThis 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 Kumar, Sara Vieira, Tanner Linsley – these are just a few of the names coming to this year’s React Summit, the biggest React conference worldwide. Discover the future of the React and meet thousands of front-end and full-stack engin...
2022-05-2500 min
CodePen Radio368: Lea RosemaI 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. Several times that has taken the shape of Web Components. For example, a Web Component that takes some of the boilerplate work out of designing with them. See this Collection of examples.
Time Jumps
Sponsor: JS Nation
Evan...
2022-05-1800 min
CodePen Radio367: With Micah GodboltI 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 found it fascinating that putting the word "Design Systems" into his book title "Front-end Architecture for Design Systems" was suggested by the publisher, and they were right! Turns out the term Design Systems clicked a lot harder since the 2016 publication and I'm sure...
2022-05-1100 min
CodePen Radio366: Paulina HetmanI 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 and things like her incredibly clever quizzes (as Pens!).
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...
2022-05-0500 min
CodePen Radio365: KlareKlare 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 with Klare here just a few days before her last day to reflect on her years here.
Time Jumps
2022-04-2700 min
CodePen Radio364: Varun VachharI 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.
Time Jumps
Sponsor: Linode
Visit linode.com/codepen and see why over a million developers trust Linode for the infrastructure. From their award-winning support (offered 24/7/365 to every level of user) to ease of use and set up; it’s c...
2022-04-2000 min
CodePen Radio363: Kyle ShookThis 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 skills too, with sites like Frontend Practice.
Time Jumps
Sponsor: Notion
Notion is an amazing collaborative tool that not only helps organize your companies information, but helps with project management as well. We know that all to well...
2022-04-1300 min
CodePen Radio362: Chris NagerThis 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 has come, and some of the amazing stuff that has shipped recently in Safari Technical Preview. Check out Chris' Twitter, personal site, and classic great project Give 'n' Go, a CodePen/Dribbble crossover website.
Time Jumps
2022-04-0600 min
CodePen Radio361: Forks in a New TabIf 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 this before? Well, that's what Shaw and I get into in this podcast. It's a smidge complicated. The root of it is that that Fork button isn't a hyperlink. It's a button handled by JavaScript because of the nature of how it...
2022-03-3100 min
CodePen Radio360: Sarah FossheimI 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 part of the conversation was emphasizing that this work, while almost being a relaxing hobby in the vein of knitting, still levels up one's CSS ability. Sarah got me thinking that it's not just CSS, but perhaps equally or more importantly HTML ability, the ability...
2022-03-2300 min
CodePen Radio359: Tiffany ChoongI 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 ones that clearly took tons of effort, that don't have nearly the hearts they deserve (c'mon dino loader!), and then relatively simple practical Pens (like a menu) that go nuts with popularity and it's hard to know why.
Time Jumps
2022-03-1600 min
CodePen Radio358: CJ GammonI 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 of interesting creative technologies.
Time Jumps
2022-03-0933 min
CodePen Radio357: Ryan MulliganThis 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 than you ever thought it would. Ryan has a knack for feeling out really cool new technologies and then quickly using them to build great demos that play up what those technologies were born to do.
Time Jumps
Sponsor: Automattic
2022-03-0235 min
CodePen Radio356: Amit SheenI 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 the podcast (mostly):
Bubbling - https://codepen.io/amit_sheen/pen/BxQqxzTurning pages - https://codepen.io/amit_sheen/pen/WNweryvBouncing off the walls - https://codepen.io/amit_sheen/pen/abBgWvJHouse of CSS cards - https://codepen.io/amit_sheen/pen/QWGjRKRFlipBoxes...
2022-02-2300 min
CodePen Radio355: With Adam ArgyleI 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 be able to build any sort of site around it to power your business or hobby. How do you make the most of it? Subscribe to their brand spankin' new YouTube channel to learn more about...
2022-02-1600 min
CodePen Radio354: With Steve GardnerWe'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 Joins Netlify and now we have Scheduled Functions (in Beta)! Wanna run your cloud functions on a time-based schedule? Now you can without even leaving your repo.
2022-02-0900 min
CodePen Radio353: With Louis HoebregtsLouis 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. Some of the most popular Pens have an aspect of education to them as well. Here's a list of Louis' Pens he chose to talk about, covering some of his history here, each of which is symbolic of a personal era and often unlocking...
2022-02-0200 min
CodePen Radio352: With Aysenur TurkAysenur 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
Custom dashboards, admin panels, CRUD apps—build any internal tool faster in Retool. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship mo...
2022-01-2600 min
CodePen Radio351: Moving to PostgreSQL from MySQLAs 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, but everyone contributed in some way.
Wondering why? Well...
We were on a pretty old version of MySQL (5.6), and upgrading to something more modern (like 8) would have required just as much effort, so we thought we'd move on to something we saw...
2022-01-2100 min
CodePen Radio350: 2021’s Most HeartedIt'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 each, so if it looks like a Pen lower down the list has more hearts than one higher up the list, it's because of the density of hearts. The number you see on the card only reflects the number of people that have hearted not...
2022-01-1200 min
CodePen Radio349: With OliviaOlivia Ng has done loads of wonderful work here on CodePen and off (check out her super cool travel bucket list site) She got started just out of pure desire to build things. "I just really like the internet" she told me. Hear hear! Her eye for design takes all her work to the next level. She had a particular focus on grid for a while there, and used those interesting designs to teach it. Also find her on Twitter and on her personal website.
Time Jumps
Sponsor: Jetpack
There are lots of...
2022-01-0500 min
CodePen Radio348: With JheyJhey Tompkins is one of the most prolific CodePen creators out there! Find him as @jh3y on CodePen and @jh3yy on Twitter. His creations tend to have a twist of whimsey while being beautifully designed as well as pushing the platform in unique ways. You'll always be surprised at a Jhey Pen! I talk with him about the creative process, problem-solving, and sharing what you learn.
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...
2021-12-2900 min
CodePen Radio347: Using NotionRachel and Chris dig into the many, many ways in which we use Notion at CodePen. Heads up, Notion has sponsored a couple of episodes of CodePen Radio lately, but not this. It's just a tool we heavily use and this podcast is all about that sort of thing. Heck, this podcast itself was planned in a calendar database on Notion, which deals with dates, publication status, sponsors, and all sorts of stuff. And it's probably one of the least involved Notion setups we have. Much more involved is stuff like project planning and our individual structures for our...
2021-12-2200 min
CodePen Radio346: With Ben EvansYou might recognize Ben Evans from his absolutely incredible CSS "paintings", like the portrait of his daughter or the still life. Paintings aren't the quite word as Ben designs them all to be entirely scalable. And sometimes they have interactivity, like the slight parallax in the Vaccum from Space. Like so many other great artists, Ben's skills aren't isolated to CSS trickery, his portfolio reveals artist exploration across nearly every creative outlet there is, including moss, and as I learned in our conversation, even music.
Time Jumps
Sponsor: Notion
For companies of all...
2021-12-1500 min
CodePen Radio345: With Gabrielle WeeThis week I talk with Gabrielle Wee, who's done loads of creative coding work here on CodePen but like so many other creative people we talk to, her creativity explodes into so many other areas like illustration, photography, drawing, and even gardening. Plus a desire to share those techniques. Her path has led her to be working at Apple, a dream job.
Gabrielle on Dribbble and Twitter.
Some advice from Gabrielle: doing work that she was personally interested in, rather than pandering to any recent trend, was much more fun and led to more clear...
2021-12-0800 min
CodePen Radio344: With Aaron IkerToday I get the pleasure of talking with Aaron Iker. Aaron builds incredibly delightful bits and bobs of UI that give you the feeling of hey, I bet I could actually use this! And that's exactly what Aaron wants you to do. He takes care to make sure the code is easy for you to use if you wish. This idea of taking somewhat practical-looking UI elements, like buttons, loaders, toggles, etc, and then making them do something unexpected and fun is a perfect fit for popularity on CodePen. Last year, Aaron occupied 10 spots in the Top 100! Aaron's advice...
2021-12-0100 min
CodePen Radio343: cpshotsWe've been naming all our services cp____ lately. Get it? cp is short for CodePen. Clever, I know. We have many such services. The latest to join them is cpshots. We've been doing our own screenshotting for a long time now, but like all software we're always working on it for various everchanging reasons.
Robert and I discuss this last round of changes to this service. Part of the purpose of this round is that we wanted to bring image resizing in-house to keep costs down. We need screenshots in various sizes because we literally show them...
2021-11-2400 min
CodePen Radio342: WorkersChris and Shaw talk about how CodePen uses Cloudflare Works with the KV storage to power several things on CodePen. We do some cool stuff with them, like serve landing pages with the content provided by WordPress yet served on an entirely different Ruby on Rails powered site. We also serve up assets through them which provides lots of nice features both for us and for users indirectly and directly, like resizing and optimization.
Sponsor: Jetpack
Thanks to Jetpack for sponsoring CodePen Radio! Jetpack is a plugin, or perhaps now more like a suite of...
2021-11-1700 min
CodePen Radio341: ChallengesMarie and Chris talk about CodePen Challenges, which have been going strong for many years now. The gist is that you pop in and make something along a theme. The "challenge" is doing the work (they aren't meant to be tricky otherwise). We've seen people seriously level up their skills by participating, but of course, there is no obligation, and no prizes other than the satisfaction of a job well done.
One interesting twist is that Chris used to do a lot of the challenges while Marie was running the podcast, but we just up and switched...
2021-11-1100 min
CodePen Radio340: With George FrancisChris gets to chat with George Francis, an incredible digital artist in the generative art space as well as educator and all-around developer. George has been all over the place lately, producing really outstanding work (CSS-Tricks uses a Houdini paint worklet from George in the header and footer). Not only does George make art that has that little special something that turns heads, he helps you do it too by sharing all the tools and techniques he uses in blog posts.
Time Jumps
Sponsor: Netlify
Netlify has used the slogan "Static without limits" — wh...
2021-11-0300 min
CodePen Radio339: Apollo at CodePenRachel and Chris chat all things Apollo GraphQL. Apollo is in this weird category of software where like by far most websites do not need it or anything like it. But for CodePen, we consider it nearly essential. The typical sales pitch for GraphQL applies to us for sure (e.g. only ask for the data you need!) but you can add to that the fact that it is empowering for front-end developers, which we have plenty of here on the CodePen Staff. But beyond GraphQL, we need ergonomic ways to write those queries and trust technology to do...
2021-10-2800 min
CodePen Radio338: With Lynn FisherLynn Fisher is my guest this week! You might know her as @lynnandtonic on CodePen and most other platforms. We get to talk about her A Single Div project and all the CSS magic that goes into those, other creative projects and why those are so satisfying, a recent transition over to Netlify, and the fact that we've worked together on an illustration project without ever having met.
Time Jumps
Sponsor: VideoPress
There is a bit of a rebirth of VideoPress that just happened! If you run a self-hosted WordPress site like we...
2021-10-2000 min
CodePen Radio337: ES Modules on CodePenES Modules are a native feature of JavaScript! The import and export keywords are actually a mighty powerful thing for a language to have. You can use them right on CodePen of course. For example, with our URL extensions, you can export stuff from one Pen and import it in another without having to use the External Resources feature in Settings or anything, which might make your code more clear.
Then with incredible services like Skypack, you have the entire world of npm available to import. Here's a whole Collection of examples like that. React is easy...
2021-10-1400 min
CodePen Radio336: Cassie EvansCassie Evans is our special guest this week! Cassie is a front-end developer with a special talent and passion for animation and SVG, as evidenced in part by her amazing work on CodePen. She's recently became part of the team over at Greensock, a very popular JavaScript-powered animation framework.
We got to talk specifically about the Greensock 3.8 release and an SVG workshop she's got ready to that she does with the gang at Pland.
Time Jumps
Sponsor: Retool for Startups
After working with thousands of startups, we’ve noticed that technical fo...
2021-10-0600 min
CodePen Radio335: Code’s a DragThere are lots of types of dragging that can happen on websites. While they are all click (or tap), hold down, move, and let go, they are all quite a bit different. For instance:
Drag files/folders onto the browser window and drop them. The likely use case there is uploading.Drag an element on the screen to another (valid) area of the screen. The likely use case is dragging cards from one column to anotherDrag the position of an element. The likely use case is dividers between different areas.
There are native APIs for dragging stuff...
2021-09-2900 min
CodePen Radio334: Custom PropertiesChris & Shaw talk about a big ol' conversion to getting CodePen's color system to use --custom-properties all the way through, rather than Sass variables. Why? All sorts of reasons, kinda boiling down to the fact that they are just better. Here's a tiny one: you can use the Web Inspector and see what some other element is colored easily. Here's a huge one: ability to do theming way easier. But the refactoring isn't without some bumps in the road, like the fact that CSS doesn't have a way to alter colors (like lighten, darken, or add alpha) terribly easily...
2021-09-2200 min
CodePen Radio333: RobertNew CodePen team member! As we recorded this, it was just Robert's 2nd day at CodePen, and we snuck this podcast in within the hurricane of stuff happening during that time. There is a pile of new software to get access to and acquainted with. There is the dev environment stuff. There is getting acquainted with people, with the extra challenge of doing that remotely. There is understanding the flow and structure of our work days. There are meetings! So many meetings! Figuring out the Zoom culture.
For now though, we chat about Robert's history and how...
2021-09-1500 min
CodePen Radio332: Running the Finances of a StartupDee and Chris talk about "everything money-related" at CodePen. Dee has been managing this stuff since CodePen's beginning. First largely pro-bono (sorry, Dee), then later as a side gig and part-time job. Dee is full-time now at CodePen, but finance stuff is only part of her role (programming being the main job). It's a lot of work, but she likes being able to influence CodePen for the better from multiple angles.
At a big company, all this finance work would probably manifest as a COO. But CodePen is just a midling startup, too small really for a...
2021-09-0900 min
CodePen Radio331: Next.js + Apollo + Server Side Rendering (SSR)Our goal here was to explore server-side rendering (SSR) in Next.js using data from Apollo GraphQL, for faster client-rendering and SEO benefits.
There are a variety of approaches, but Shaw has set his sights on a very developer-ergonomic version here where you can leave queries on individual components and mark them as SSR-or-not.
There are two "official" approaches:
Apollo's documentationNext.js' example
These are sorta-kinda-OK, except...
They have to be configured per-pageThey are mostly limited to queries at the top page levelYou'd likely need to duplicate queries with slightly differently handling...
2021-09-0100 min
CodePen Radio#330: New Admin ToolsChris & Marie talk about a big long project that we've finished at CodePen: our new Admin Tools. Any web app is gonna need 'em. They do stuff that is unique to customer service on your app. Say you need to manually trigger a password reset email or hand-verify an account. You look them up in an Admin Tool, and perform those specialized actions. Our Admin Tools are heavily focused on users and content. We've totally re-built them to focus on the UX of actually doing customer support, as well as to make a clean UI that users the same...
2021-08-2500 min
CodePen Radio#329: Gathering DataMarie and Chris talk about all the sources of data we have, think about, and use to help us. We do have one main database on CodePen, and truth be told, it's got a bunch of data in it. If we want to know how many Pens there are, we can just ask it. We can learn a lot from asking that database questions, and we even have fancy charts that express information like that to us on dashboards. But that database isn't the only place we have data, because it doesn't know everything. It can't tell us, for...
2021-08-1937 min
CodePen Radio#328: Large Scale PlanningChris and Klare chat about the incredibly daunting task of planning a project that is huge and long-term. We know we're pretty OK at planning smaller-scale projects. We plan, we kanban, we get the job done. But a single basic kanban isn't going to cut it for a truly gigantic project. We get into talking about chopping the project into phases, chopping those phases into sections (sometimes with their own phases), and a databasing/kanbaning strategy to tie it all together. This also touches GitHub workflows and meeting structures, so there is a lot to think through here and...
2021-08-1139 min
CodePen Radio#327: 99.999% UptimeChris & Alex talk about DevOps, servers, and keeping CodePen online at all times. We were are 100% for the year until a few weeks ago when we had a 10 minute drop. That still keeps us in the realm of 99.99% uptime, where we get 52 minutes and 35 seconds of downtime per year, but next year we're shooting for 5-nines, that is, 99.999% uptime, where we only get 5 minutes and 16 seconds of downtime. Of course, our goals (and eventually, promises) can only be as strong as the service providers we use. Thankfully with providers like AWS and Cloudflare, we're in good hands.
...
2021-08-0432 min
CodePen Radio#326: Design Pattern Deepdives: Tabs and InfoBoxChris and Stephen pick out a couple of components from our design pattern library (which we talked about last here) and go into why they exist, what they do, what makes them complex, and the API choices. Relatively new to us is the idea of compound components which have, so far, been good to us as far as composing components in a way that makes them easier to use and more flexible.
Time Jumps
Sponsor: Jetpack
We're fans of Jetpack! You might recognize Instant Search right here in the CodePen docs. But we're...
2021-07-2929 min
CodePen Radio#325: New Embed ModalChris and Stephen talk about the New Embed Modal. We got to re-architect the thing into our modern stack, using all our latest design patterns, and improve the UX of it quite a bit while we were at it. This is something like the 4th generation of that experience, and we're already eyeing up future improvements. Such is the nature of software development.
Time Jumps
Sponsor: Clubhouse
Your project management tool should be a breeze to setup, at least mildly enjoyable to use, and help evolve your already existing development workflows so it's...
2021-07-2100 min
CodePen Radio#324: How can we help you better?Chris and Marie talk about customer support. If you're a regular listener of this show, you'll remember that we've had a lot of success with customer support over the last year, the point that our volume of direct support is rather low. That'll happen when you fix every major problem that comes up. But it also means that we have some space to do better! It's a big bummer when we have a customer leave when they never reach out at all to get a hand from us on whatever they might need. It leaves us thinking... what else...
2021-07-1417 min
CodePen Radio#323: TrendsChris & Marie talk about some of the types of Pens that have been particularly popular this year so far, now that's we're halfway through it. There is still plenty of time to make the best-of-the-year list (you could make a Pen the third week of December and still make it!). Heads up though, giving out hearts in general on CodePen is a great idea as it helps improve search results, helps improve your own personal feeds, and helps people feel good about what they make.
Some trends are eternal, some trends are ephemeral, and we talk about...
2021-07-0834 min
CodePen Radio#322: Upgrading UpgradesDee and Chris talk about a recent release where we re-built the upgrade experience on CodePen. For example, you're a free user, you want to upload an asset, you can upload via a modal that pops up, and get on with your task. You could kind of do that before, but it was much jankier UI and UX. This release brings that experience in line with current design patterns on CodePen.
But the reality of this release is much deeper than that. There were a half-dozen or more mostly behind-the-scenes releases that were stepping stones to this...
2021-06-3024 min
CodePen Radio#321: Six MillionA big milestone for us! We're now well over that number of registered users on CodePen. It's a fun number to watch — but we know it's not a particularly useful or industry-standard metric. Monthly active users, for example, is much more meaningful. In this podcast, Marie and Chris reminisce a bit on the early days and reflect on what is different between then and now. You'd think we'd have way more support work to do, but we don't. You'd think we'd have way higher server costs, but we don't. We all feel it in different ways. We're more boring in...
2021-06-2300 min
CodePen Radio#320: Andy and Una from Google’s Learn CSS ProjectLearn CSS is a very cool project from a whole team of people at Google (and outside). It does a great job of documenting where is right now, in a fairly comprehensive way. Learn CSS was spearheaded by Una Kravets and Andy Bell did the bulk of the writing, so they are two extra-special guests to have on the show to talk about it. Why CodePen Radio though? Because there are literally hundreds of Embedded Pens used in this course, all using a style guide base and are live editors in the site itself. Cool!
Time Jumps
2021-06-1632 min
CodePen Radio#319: Pattern LibraryStephen and Chris talk about cplibrary the Pattern Library that the CodePen Monorepo can use to share components. What goes in there and what doesn't? What are common and not-so-common components? Can components be combinations of other components?
Time Jumps
Sponsor: Lemon Productions
Chris Enns of Lemon Productions edits this podcast. Got a podcast you wanna outsource the editing on? Hit him up.
2021-06-0939 min
CodePen Radio#318: Anna Lytical on What CodePen IsWhen Anna Lytical heard Stephen and I talking about "What is CodePen?" she mentioned we did fab without her. So of course, I had to do one with her! Anna creates fun coding content all over the web, in addition to being an engineer at Google. Catch her on YouTube, Instagram, TikTok, and Twitter. For Anna, the appeal of CodePen is in the simplicity: nothing to set up, easy/free to get started, and you can get to the heart of learning quickly. Not to mention the sharing—as a teacher you can provide code as simply as sharing a...
2021-06-0229 min