CodePen Radio

Dee 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. The biggest of which was around cleaning up our billing model and billing data into a much easier to manage and much cleaner place. While doing that work, we identified some users that needed to upgrade to maintain their status, so a big aspect of this release was reaching out to them about that, which meant building the lowest-friction-possible upgrading experience and giving us a chance to try out something we'd never tried before: discounts.

Jetpack has a brand new mobile app. It's essentially the WordPress app, except a bit more streamlined. It allows you to connect to your self-hosted WordPress sites and manage everything from content and comments to plugins and backups.

A 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 a very satisfying way. We're more consistent, secure, stable, and reliable.

Security compliance isn’t the biggest priority for startups...until it is. When it comes to enterprise deals, every large company requires a SOC 2 report. Secureframe allows companies to get SOC 2 compliant within weeks, rather than months and monitors 40+ services, including AWS, GCP, and Azure. Secureframe continuously collects audit evidence, runs security awareness training, manages vendors, monitors infrastructure, and more, all automatically.

Our customers save an average of 50% on their audit costs and hundreds of hours of their time. Learn more at secureframe.com

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.