Codepen Radio

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 numbers behind what we're doing. Here's to another upcoming many hundred more! 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. Show Links: Riccardo Zanutta’s “Animations & Cool Effects”: https://codepen.io/collection/XgZLNA (started in 2014!)AndyMan’s “Patterns, filled

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. 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 opens the door for un-deleting things that perhaps were mistakenly deleted. This approach can be slightly more work. You'll need to offer a way to truly wipe data completely for users. You'll probably want a reaper to clean up data that has been deleted long enough. You'll need to comply with regulations about data deletion. You might have to build un-deletion features. You might need to be doing that filtering yourself throughout the app. It's work,

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 other "bulk" actions, until now. Stephen and I talk about how we added more bulk actions for assets, making them all the easier to manage. Shout out to our user with many thousands of assets which helped provide the motivation to get this out. Time Jumps Sponsor: Memberful Memberful is a best-in-class membership software used by the web's biggest creators. If you're building a membership website for a client, Memberful handles the hard stuff so you can complete your builds quickly and your clients can focus on creating content while earning revenue with ease. It seamlessly integrates with popular tools l

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 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 over time. Time Jumps Sponsor: Whiskey Web and Whatnot Whiskey Web and Whatnot is different than your typical dev podcast. We show a lighter, more human side of developers you know and love, like a fireside chat with your favorite devs. Past guests include Tom Preston-Werner, Kent C. Dodds, Charlie Gerard, Wes Bos, and the incomparable Chris Coyier! We have discussed everything from Next.js and TypeScript to Chuck’s past life as a bla

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 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 do best, while earning revenue quickly. Memberful seamlessly integrates with the tools you already use, like WordPress, Mailchimp, Discord, and lots more. With Memberful, you have full control and ownership of all things related to your brand, your audience, and your finances. Learn more at Memberful.com and get started for free — no credit card required.

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 still helpful. This is the answer to the build vs buy conundrum. It's a buy for everything in between. 9️⃣ Chris: The Co-Founder Relationship is at the heart of the business Every relationship between people at a company is important, but the relationship between the founders is crucial. It sets the culture and makes everything work. The company cannot continue with a broken relationship at the founder level. They say it is like marriage, and that analogy isn't far

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, 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 doing with Turn, Mock, and Listening Party. We got a chance to talk about a handful of Lee's favorite Pens, but there are more in the Collection he made. Time Jumps Sponsor: Whiskey Web and Whatnot Whiskey Web and Whatnot is different than your typical dev podcast. We show a lighter, more human side of developers you know and love, like a fireside chat with your favorite devs. Past guests include Tom Preston-Werner, Kent C. Dodds, Charlie Gerard, Wes Bos,

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 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 Twitter as @CSSBites, has a site of the same name, and is on LinkedIn. Time Jumps Sponsor: Reflect Reflect is an automated no-code testing tool that enables you to shave countless hours off of your end-to-end testing timeline, from writing and maintaining tests to root-causing and debugging errors. Features include cross-browser testing, email/SMS validation, visual validation, and more. All plans include unlimited users and unlimited test creation. As a special of

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-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, educators, and more. We take care of the hard stuff so you can focus on what you do best, while earning revenue quickly. With Memberful, you have full control and ownership of all things related to your brand, your audience, and your finances.

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 some of Craig's other professional history on the show. 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/codepen. Take your first step toward an organized, happier team, today.

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

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 <iframe>. A more significant example is that we need to inject some of our own JavaScript into your Pen, to power features of CodePen itself, like the console, which receives information from your rendered page (like logs, errors, etc) and can push commands to execute as well. So how do we inject a <script> into absolutely 100% arbitrary HTML? Well, it's tricky. We're starting to do it with Cloudflare Workers and the HTMLRewriter stuff they can do. Even then, it's not particularly easy, with lots of edge cases. Thank gosh for Miniflare for the ability to work on this stuff locally and write tests for

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 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 those details too early! Time Jumps

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 fascinations like Tweet-sized code experiments. Follow him on Twitter here. Time Jumps

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 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/codepen. Take your first step toward an organized, happier team, today.

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 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 engineers! The format of the event will be hybrid. The first day, June 17, will be streamed from the Amsterdam venue. The second day, June 21, and numerous free workshops will be streamed to the global audience online. Would you like to participate? Get 10% off on remote & in-person tickets with our discount code CodePen.

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 that takes some of the boilerplate work out of designing with them. See this Collection of examples. Time Jumps Sponsor: JS Nation Evan You, Kyle Simpson, Addy Osmani, Sarah Drasner – these are just a few of the speakers coming to this year’s JSNation, a 2-day conference focusing exclusively on JavaScript development. Discover the future of the JavaScript ecosystem and get connected to its stellar crowd! The format of the event will be hybrid. The first day (June 16) will be streamed from the Amsterdam venue. The second day (June 20) & numerous free workshops will be streamed to the global

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 "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 hasn't hurt sales! 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 clear why developers have been trusting Linode for projects both big and small since 2003.   Linode offers the industry’s best price-to-performance value for

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 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/codepen. Take your first step toward an organized, happier team, today.

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