Learn 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!

WooCommerce supports Apple Pay at checkout now, which is a nice thing to offer. Some people have pretty strong preferences for how they pay online, and it's best to meet them there rather than force one particular payment method.

Stephen 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?

Chris Enns of Lemon Productions edits this podcast. Got a podcast you wanna outsource the editing on? Hit him up.

When 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 URL. And of course, all the existing code to be inspired by!

Did you see that Netlify bought FeaturePeek and rolled into into all Deploy Previews? They did! It's cool! Imagine you need to make a change to a website, and need approval from a client first. You can do a Pull Request against the site and your Netlify-hosted site will give you a URL with a Deploy Preview. They've done that forever, and it's incredibly useful. Now, it's even more useful, as that client can open up a little UI widget on the Deploy Preview and give feedback. They don't need to know anything about GitHub, yet their feedback can manifest as a GitHub Issue. And that's just one possible integration.

I got to chat with Stephanie this week, a senior web engineer at Microsoft, who I've given the prestigious gold-star award for top front-end web development content producer this year ;). She's got so many cool projects like Modern CSS, Style Stage, SmolCSS, and a beginner course on making a website. So many of the sites she makes are in Eleventy, she's taken to teaching that too, like on her site 11ty Rocks and on Egghead. She's always teaching, like through her podcast Word Wrap or in online workshops.

Catch up with Stephanie on CodePen, GitHub, Twitter, and her personal website.

Jetpack offers Full Site Backup (database, theme, assets... everything), but it doesn't just back everything up, it goes above and beyond. For one thing, you can get real-time backups if you need, meaning everything is backed up as it happens, not day-by-day. You can also restore your site to any previous backup with the click of a button. That's above and beyond right there. But if you're a WooCommerce user, you'll rest easy knowing that you won't lose eCommerce sales and product changes when you restore to a historical point. Those changes are then "replayed" on top of the backup.

Adam Created this brand new intro video animation for CodePen Radio (on TV). Like when we do a video instead of audio for the podcast. We got to get into his creative process a little bit. While the output of this was a video, Adam used web technology to produce it, using animation libraries like David Desandro's Zdog (David also worked on the CodePen logo) and Greensock. But you won't find those libraries on the final Pen, because to preserve animation performance, those were used only to produce a GIF used as a mask over the TV and static. Sometimes you need to get tricky to produce the final product!

Jetpack Boost is a plugin (separate from the core Jetpack plugin) that does three (for now) huge performance things for your site. 1) Lazy load images 2) Defer JavaScript 3) Critical CSS. All of those are really great things for web performance, and you essentially just flip them on with a switch. Critical CSS in particular is a rather difficult thing to implement by hand.

Over the last year, almost every metric that you want to go up has gone up at CodePen. More users creating and doing more things. You'd think that customer support would go up at the same level. And if it did, we would have thought that was very normal and dealt with it. But customer support doesn't have to be this static thing that just is the way it is forever. If you find that people have the same questions over and over, you can fix your app or documentation such to answer that question better. If people report bugs, you can fix them. In fact, if you do a lot of those things, you can reduce customer support even as the number of customers you support grows. That's exactly what we did at CodePen.

The result is that our customer support went from a job nearly impossible to get all done in a day, or the point where it is a part-time endeavor for whoever is on support that day. Even while our time-to-respond to tickets has also dramatically dropped. We're just over one hour right now, and of course hope to drop below that line. The truth is though, most tickets are half that, it's just some tickets that slip between the cracks and take days that hurt our average.

Netlify is throwing a totally free online conference: Headless Commerce Summit.

E-commerce is growing at an unprecedented rate, making everything from your site performance to your ability to iterate faster a critical business advantage.

Take have a day and go! Even if you aren't currently literally building a headless site, it would be good to have in your brain how other people are doing it and what they are getting out of it.

Marie and Chris discuss the big round of updates that went out around Team Management. There is a new "admin" role that it took us years of having a Teams product to understand that many teams could actually use. In the end, these updates to how Teams work make them way more useful. Teams can self-manage themselves in a way they never could before, and we're hoping that makes people much happier with the product, less likely to leave because of something silly like access controls, and reduce support.

Aside from Jetpack Backup just being really easy to use and the most trustworthy way to back up your entire WordPress site, it's the only backup solution that works with eCommerce (WooCommerce) in the way you really need it to. Say you need to rollback to a version of your site from 4 days ago because something bad happened that hosed the site. Rolling back is a good idea, that'll get you up and running right away, but when you revert a database back 4 days, that could wipe out all the eCommerce orders and product changes that have happened in that time: not good. Not with Jetpack Backup, it will restore to 4 days ago, but then replay all the orders and product changes, so your store is up to date with reality. Vital.

Being, ya know, human beings with thoughts and emotions trying to build something together, sometimes we clash. There are big clashes. Sometimes those end in drastic changes. We've done that. You might have noticed that we're down to two co-founders actively at the company. There are tiny clashes too, like needing to tell someone when they've made a mistake. Medium clashes (this is not a real classification by the way, it's just how it feels) are when multiple people feel pretty strongly about something and are not in alignment. It's not much of a clash if one person is at a 3 and the other is at a 9 on the care-o-meter. When you're both 10's, it's a clash of conflict. That happens to us sometimes (again, humans). The tricky part is that conflict resolution is never straightforward. If someone feels strongly that the direction should be A, another feels the direction should be B, sometimes the solution is C for compromise. But sometimes compromise weakens a vision, and resolution needs to be A or B so that the vision itself isn't weakened.

Are we experts in this? Far from it. Have we thought about it a lot? Ages. Do we have a long way to go in getting better at this? Sure do. The fact that we all still have extremely different temperaments for conflict at all is part of what makes it hard.

It's worth reading up on Netlify's new concept of Distributed Persistent Rendering (DPR) and how that works with On-demand builders. It might just make your existing Jamstack builds way faster and better, or make possible the Jamstack for something you thought could never be.

This isn't actually a podcast actually talking about what CodePen is. Well, it kinda is. But actually it's Stephen and Chris talking about and planning for what they would say if they only had five minutes (or so) to explain what CodePen is. So we need to hash out what the most important things are, what to lede with, and how to cover all the most vital things with clarity in such a short amount of time. We'll have to get around to actually trying to shoot a video like this soon!

Jetpack Boost is a brand spankin' new plugin from the Jetpack / Automattic gang. Jetpack has some very powerful performance features it offers, like giving you a global CDN for your images and core-WordPress-specific CSS and JavaScript. That particular feature is still a part of the Jetpack core plugin, but many performance-specific features are moving their way over to Jetpack Boost. Like Lazy Image loading (a huge performance win) is now in Jetpack Boost and you can turn it on with the flip of a switch. The most amazing, and brand new, feature of Jetpack Boost is that it does Critical CSS handling for you, which is also a big performance win and very difficult to do by hand.

Marie & Chris talk about the brand new event tracking feature in Appcues. We're still pretty stoked we can even afford Appcues, since it's super pricey software for our company. The fact that they just released event tracking dashboards makes it feel much more affordable though, because this unlocks super valuable information for us instantly. It's like we get what would get by also buying super expensive analytics software, only it's rolled into what we already pay for.

High five to Netlify for the sponsorship. This is a tiny part of Netlify, but just think about how cool Netlify Drop is. For all sorts of people, but particularly for beginners and teachers, this little feature makes the web feel real. Imagine you take a quick class learning HTML and CSS, and make a "fake" site on your local computer. That might feel kinda neat, but then you drop it on Netlify Drop, and it becomes an honest-to-god real website on the internet that anyone in the world can see. That's big.