CodePen Radio
The CodePen team talk about the ins and outs of running a web software business.
Episodes
444: A Gosh-Dang Full-Blown Read/Write API
Marie and Chris are on the podcast to talk about our very new v2 API. This baby (slaps the hood) can do it all. It's complete read/write access to all your Pens, Collections, and Assets. This API isn't hamstrung by anything, so the door is open to whatever you want to build.
We've already seen people build a syncing engine, put their latest Pens on their blog as part of a Static Site Generator
443: Image Hosting is Quite Powerful on CodePen
We've made several upgrades to uploading/hosting images on CodePen lately. One change, moving to the open-source file-uploading library Uppy, was driven by business concerns. But the benefits are good for everyone: uploads are faster, and the money we saved let us increase file size limits and total storage limits on the higher PRO plans. Plus, we added a cropping feature to images everywhere.
442: Pens are Actually Websites
Stephen and Chris jump on the podcast to talk about our (ahem, super cool) deployment feature.
Any Pen can be a website!
Well, they kinda are already, but you know what I mean.
If you're a PRO user all you do is click a button and the Pen is instantly deployed at a *.codepen.app website. From there, it's pretty trivial to update a domain you own's DNS records to point to it, if you want
441: Challenges For We, Challenges For Thee
Marie and Chris talk about CodePen Challenges. We've been at it for many years! We get into the technology behind it, how we build our own CMS for it that powers the website and the emails that get sent about it. We also cover why they can be so beneficial for everyone involved.
Time Jumps
440: Hey! Hi! Right here! In-App Notifications That Like You
Rach and Chris jump on the podcast to talk about the brand-new in-app notification system we built and shipped. We're actively trying to balance a system that isn't annoying, but allows us to show targetting information to targetted users when we think that's valuable for both you and us. It started with "We launched 2.0!" and is useful for stuff like short downtime notifications, reminders about
439: Dragging! Drag Everything!
Stephen just implemented a great UI feature for the 2.0 editor where all the Panels that were previously stuck to the left side of the page can now be dragged away to become an "Editor Tab" just like a file (or Block!). Now you've got a lot more freedom for what you're looking at, and of course, the editor will remember your layout should you refresh or even come back in another browser.
Time J
438: Are Diffusion Models Better Than LLMs at Web Design?
Chris has Jacob Miller on the show, who is building a tool called DiffUI. The big idea is that it uses a diffusion model to do prompt-to-website design rather than an LLM, because image-based models are more interesting and creative. So stay there for a while, producing really detailed visual mockups and plans, then head to the LLM.
Time Jumps
437: The Cheese. It Has Been Moved.
Stephen and Chris hop on to talk about the couple of weeks post 2.0 launch. Things are certainly different in 2.0! Literally the location of certain buttons is in a new place, and that requires folks to poke around a bit and figure it out. Some people just do that and it's a non-issue. Some write in for help and even find delight in the new features. Some lash out.
The cheese metaphor is from
436: The Design & Message of Launch Emails (with MJML)
Just one week off our big 2.0 launch, Shaw and Chris hop on to talk about how email is actually a big part of the launch. Social media ain't what it used to be, and not everybody is on your app every single day waiting for a notification.
Sponsor: Notion
With the recent launch of Custom Agents, Notion became the collaborative AI workspace where teams and agents work side by side. And now, t
435: The 2.0 Launch & Team CodePen’s Favorite Features
The whole team is here! That's a first for us. Today we're launching 2.0, so we're having a little fun in this episode picking out our favorite features.
Time Jumps
Links
Plus a bonus appearance here of Marie's victory graphic.
434: Still Proudly on WordPress for our Blog, Podcast, and Documentation
Marie and Chris hop on CodePen Radio for a little chat on how we're still happily using WordPress for a variety of things here on CodePen. We've got it hosted on a subdomain and on a different (WordPress-specific) hosting plan than our main monorepo, so it has its own deployment process and such. We use WordPress for our blog, where this very podcast is published, because WordPress handles RSS wel
433: CodePen 2.0 is Backward Compatible with Any Classic Pen or Project
When we set out to build the 2.0 editor, another editor in the CodePen cannon, the goal was actually to reduce the number of editors we have and support. Ideally, reduce it to one. The trick is that anything an existing Pen or Project can do, this new editor needs to be able to do as well. All while making sure it's forever future extensible. That was the wild engineering task in front of us, and
432: Trends of 2026 (So Far)
Marie has her eye on what seems to be super popular with CodePen users so far this year.
Galleries (in different directions)
https://codepen.io/thebabydino/pen/dPXVyqN
https://codepen.io/luis-lessrain/pen/ZYpyoRV
https://codepen.io/Nidal95/pen/qENQPBp
https://codepen.io/ol-ivier/pen/emdjmBQ
https://codepen.io/cbolson/pen/MYebgqj
Custom Select
https://codepen.io/editor/c
431: Versions are Deeply Integrated into CodePen
Rachel and Chris on the podcast this week discussion the (ahem, rather large news) that every CodePen 2.0 Pen is versioned. That's right, you can jump back in time to previous versions at any time in case mistakes were made. You can take a look at the preview and code of past versions in case you just need to reference something. It all works extremely fast and efficiently. We get into the why and
430: The Wild World of Keyboard Shortcuts in Web Apps
Shaw and Chris talk about how the keyboard shortcut situation is challenging, but in the best shape it's ever been in for our 2.0 editor. Between the operating system, browser, CodeMirror, and Emmet, the space is fairly crowded, but we've got enough room to offer lots of useful stuff. The commands are more findable than ever with our new Command system and the Omnibar.
Time Jumps
429: Why CodePen Rebuilt Its Realtime Service
We've had realtime features on CodePen for ages. Back when it was pretty damn hard. Our Collab Mode is an obvious one, where users can code together. (This "just works" in the 2.0 editor, it's not called anything special.) That and Professor Mode used to have realtime chat (until we pulled it because very few people used it). We went through iterations of this including our own implementations and
428: Improving The Entire Billing System (is Very Worth It)
Rachel and Chris on the show this week to discuss a series of big changes over the last, say, six months or so with our billing system. We've essentially re-written this thing several times, and obviously this is the best time. Having three plans, two payment providers, teams, and fifteen years of history is a lot to manage.
An important aspect of the journey was getting the billing informatio
427: Next.js and The Journey of SSR
Having that first response from the server to users browsers be, ya know, full of good, useful, renderable HTML is certainly better than an empty <div id="app">. You can feel it and see it in the filmstrip view of the site loading. Not to mention you need it for at least things like <meta> tags if you want your URLs to "unfurl" properly on social sites.
Stephen and Chris jump on th
426: Browserslist in CodePen 2.0
Stephen and Chris chat about how the 2.0 editor (well, the compiler really) understands and supports Browserslist, a config format that lives in your package.json file that multiple blocks can understand and make browser support decisions against.
Sponsor: Notion
With the recent launch of Custom Agents, Notion became the collaborative AI workspace where teams and agents work side by side. A
425: Help Your Users Help You with Debug Logs
As we're getting close to rounding out the Beta period of the 2.0 editor, we're trying to close out any bugs we find or users report quickly. They could be browser-support related, network conditions related, account capability related, or just bugs in how the 2.0 editor and technology behind it works. It's complicated enough that the best way to debug things is to see exactly what the user sees w
424: File List Optimization
The 2.0 Editor can support hundreds of files per Pen, not to mention folders mixed in which don't count toward that total. This can be pretty weighty on the DOM and thus adversely affect performance. Especially as each file/folder has children, a variety of event listeners, are drag and drop enabled, etc. "Virtualizing" data like this is a common approach, but we've found if we just use Intersecti
423: 2.0 Templates
Stephen and Chris hop on the ol' podcast to talk about all the ways that Templates are way better in 2.0 land. You've always been able to make your own templates, but now you can select one even after you've arrived in the editor. There is a new place (the create page) which features bookmarked and official templates (as well as your own). Most importantly, there is a way to set a "default templat
422: Supporting Packages
Alex and Chris talk about how the 2.0 Editor supports packages from npm. The trick is both simple and complex. The idea is simple. We detect the packages you want to use, list them in an (editable) package.json file, then turn that into a <script type="importmap"> in your HTML files that import those packages from esm.sh. Complex in that, well, all those steps are fairly difficult to get right,
421: View Control of the 2.0 Editor
Stephen & Chris look at the UI of the 2.0 Editor and show all the control you have over what you're looking at. Way more control than the Classic editor! We share some of the thinking behind it. Don't miss the Omnibar!
Time Jumps
Links
Circle Round
Story Pirates Podcast
Who Moved My Cheese?
The freeCodeCamp Podcast
420: What are Blocks?
With CodePen 2.0, we've got a new word we're using: Blocks. A way to think about Blocks is anything that processes code. They are added as steps to the CodePen Compiler as needed. For example, TypeScript is a block, because it processes files in the TypeScript syntax into JavaScript files. But something like Lodash is not a block. Lodash is a package from npm (which we also handle, but that's a to
419: Why 2.0?
CodePen 2.0 was the most ambitious project that we've ever taken on in our lives. Why would we do such a thing? Chris and Alex explain the thinking behind it. We've been around a long time, know what our customers want, and are developers ourselves, so we know how this industry moves. We thought we could serve both in a powerful and flexible way, taking us into the future.
Time Jumps
418: CodeMirror 6
Chris Coyier and Stephen Shaw discuss the transition from CodeMirror 5 to CodeMirror 6, highlighting the significant improvements in accessibility, performance, and user experience. They delve into architectural changes, integration with modern JavaScript frameworks such as Next.js, and the new theming options available in the editor.
Time Jumps
417: Iframe Allow Attribute Saga
There 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. <iframe allow="...">). CodePen was calculating the appropriate values inside an iframe for a nested iframe. Th
416: Upgrading Next.js & React
Shaw 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
415: Babel Choices
Robert 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 tha
414: 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 t
413: Still indie after all these years
We're over 13 years old as a company now. We decide that we're not a startup anymore (we're a "small business" with big dreams) but we are still indie. We've seen trends come and go. We just do what we do, knowing the tradeoffs, and plan to keep getting better as long as we can.
Links
Timeline – Chris Coyier
115: Adam Argyle on Cracking the 2025 Web Dev Interview | Front-End Fire
T
412: 2.0 Embedded Pens
Or 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 fr
411: The Power of Tree-Sitter
Alex and Chris hop on the show to talk about a bit of technology that Alex calls "The 2nd best technological choice he's ever made." That technology is called Tree-sitter. It's a code parsing tool for building ASTs (Abstract Syntax Trees) out of code. GitHub uses it to power search and "go to" functionality. The creators now work on Zen, where a code parser is paramount. We use it to understand an
410: Trying to help humans in an industry that is becoming increasingly non-human
Chris & 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 abo
409: Our Own Script Injection
Chris and Stephen talk about how we use a Cloudflare Worker & HTMLRewriter to inject a very special <script> tag into the previews of the Pens you work on. This script has a lot of important jobs so it's presence is crucial, and getting it in there reliably can is a bit of a challenge.
Time Jumps
408: Proxied Third-Party JavaScript
Chris and Stephen hop on the podcast to discuss the concept of a proxy. Possibly the most "gray hat" thing that CodePen does. We use a third-party analytics tool called Fullres. We could just put a link to the <script> necessary to make that work directly to fullres.com, but being an analytics tool, it's blocked by a ton of ad blocking browsers and browser extensions. We made the conscious choi
407: Our Own CDN
Robert and Chris jump on to talk about our little CDN project. Maybe that's not the right term, but we struggled with naming it. Truth be told, it's the /public/ folder in our monorepo, where the purpose is getting files to the world wide internet at URLs that anyone can access. Our favicon is a good example, where many of our sites need access to that, but we only want it once in our repo (but we
406: Hot Trends of 2025
Marie and Chris jump on to discuss some of the trends of what people are building on CodePen here, approximately halfway through 2025.
New CSS!
Custom @functions (just landed)
if() function
clip-path & shape()
corner-shape and the superellipse
Scrolling stuff
The attr() power up
Hot Styles
Liquid glass (Jhey's demo, Spark)
Hard glitch (CRT-like effect with VFX
405: Elasticsearch → Postgres Search
Alex & Chris get into a fairly recent technological change at CodePen where we ditched our Elasticsearch implementation for just using our own Postgres database for search. Sometimes choices like this are more about team expertise, dev environment practicalities, and complexity tradeoffs. We found this change to be much better for us, which matters! For the most part search is better and faste
404: Preventing Infinite Loops from Crashing the Browser
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
403: Privacy & Permissions
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
402: Bookmarks
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.
Switch
401: Outgoing Email
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.
Thi
400: Hiatus
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: S
399: Data Munging
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
398: DevOops
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 lear
397: User-Generated Content Saftey
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 differen
396: Open Source
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 o
395: The Most Hearted of 2022
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 y
394: Very Remote Work
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 yo
393: Challenges in 2022
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 delive
392: Project Management Refresh
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 rel
391: Early TypeScript at CodePen
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
390: The Social Media Zeitgiest
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
389: Migrating a Ruby on Rails GraphQL API to a Go GraphQL API
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 R
388: Durable Objects
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 t
387: CodePen Co-Founders AMA
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
386: Hakim El Hattab
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, wh
385: Kristopher Van Sant
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 infras
384: The 300 Sparks Milestone
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 this magnitude. We have some interesting failsafe procedures in place. Plus we get into some of the analytic numb
383: Soft Delete All
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 non-null value will be filtered out. This is the concept of "soft" delete.
382: Bulk Actions for Assets
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 allow you upload many at a time.
But while we had Bulk Upload, as it were, we didn't offer any
381: Data on External Library Usage
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 add in the HTML by hand, Projects, imports, or otherwise) because we have
380: Ol’ Jake
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 post-CodePen.
Time Jumps
Sponsor: Memberful
Memberful is easy to use, best-in-class membersh
379: 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
378: Lee Martin
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 example, or Using Three.js to Hear the Dawn with Jack White. Keep up with Lee on Instagram, Twitter, o
377: Jase Smith
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 form of industry payback.
We didn't get to talk about as many of them
376: Ilithya
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 web can do that?" kind of feeling. Check out: personal website, collaboration with Eliza Struthers-
375: Craig Roblewsky
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 for animation. We get into all that, some of Craig's own favorite Pens, and so
374: Kevin Powell
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 joy to talk to. We took the opportunity to nerd out on a variety of mostly CSS-related thi
373: Script Injection with Cloudflare Workers
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 write on CodePen. A tiny example is removing the autofocus attribute when a Pen in shown in a grid view
372: Trends
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 really wonderfully creative Pens using Three.js and p5.js. Neon-on-dark is
371: Jon Kantner
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 wrote when I ran CSS-Tricks). We got to chat about some of his iconic Pens, his work, and some past fascina
370: Alex Trost
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 collaborative tool that not only helps organize your company's information bu
369: With Chris Smith
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 Kumar, Sara Vieira, Tanner Linsley – these are just a few of the names coming to thi
368: Lea Rosema
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. Several times that has taken the shape of Web Components. For example, a <shader-art> Web Component
367: With Micah Godbolt
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 found it fascinating that putting the word "Design Systems" into his book title "
366: Paulina Hetman
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 and things like her incredibly clever quizzes (as Pens!).
Time Jumps
Spons
365: Klare
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 with Klare here just a few days before her last day to reflect on her years here.
Time Jumps
