Advertise on podcast: CodePen Radio

Chris and Alex are talking this week about CodePen's biggest release since the 2.0 drop. It's live! We'll be working on CodePen AI forever, since it's a fast-changing technology that regularly adds new abilities. That sounds like a trite thing to say, but we lived it as we were building this. We started out playing with the best and latest open-weight LLMs we could afford through vLLM. Then we did similarly with Amazon Bedrock, trying more models out as we built our own harness. Ultimately, OpenAI's ChatGPT-6 Luna had such affordable pricing and high quality, and our harness was getting so good, that it made us feel ready to ship. CodePen AI is an agent-based approach to helping with your Pens. There is a new AI panel where you interact with it. By it, I mean Penny, our mascot and really the brains behind the operation. Ask it to build something, debug some code, optimize something, or even just explain some code or tell you how a particular feature of CodePen works. Time Jumps

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's build process, and more. Time Jumps

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

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 to. Subdomains are a good choice, partially because they are free. Why is CodePen a good place to host? We take care of the asset decaching, everything is CDN-backed and super fast, deployment is instant, it's DDoS proof, and it's just included in your PRO plan without silly complicated limits. Time Jumps

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

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 PRO features, and all sorts of other things. The system is designed to be as flexible as it possibly can be, meaning no particular UI is enforced, and can be used on any page anywhere in the DOM, and can have any set of logic applied. The "system" part just comes in with the fact that we track when they are seen so we can not annoy you with too many. Time Jumps

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 Jumps

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

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 an old book by Spencer Johnson about people experiencing change in the workplace and learning to deal with it. You might call it a bit heavy handed, and the metaphor was plucked away by UX folks to describe interface changes, so consider this the end of the line for this already-stretched metaphor. That didn't stop us from using the icon in our documentation about this though. 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, their new Developer Platform is turning that workspace into infrastructure developers can build on. Time Jumps

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, their new Developer Platform is turning that workspace into infrastructure developers can build on. Time Jumps

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.

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 well, and a podcast is an RSS feed with an audio file. We also, quite importantly, use it for our docs. For 2.0, we re-wrote the docs and used a Custom Post Type in WordPress to organize them, which feels much more organized. Time Jumps Links

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 we're happy to report it's done. To be clear, at the time of publishing: all Projects have been converted to 2.0 Pens, so Projects doesn't even exist anymore. Someday we'll convert Pens too, but not particularly soon. Instead, you can choose to convert Classic Pens (with a button click under the Save menu) if you want to. 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, their new Developer Platform is turning that workspace into infrastructure developers can build on. Time Jumps

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/cbolson/pen/019cbfe5-85da-7d31-a7de-44b6b35e7c1c https://codepen.io/t_afif/pen/PwGPJOB shape(), border-shape, corner-shape https://codepen.io/una/pen/ogzRBWV https://codepen.io/una/pen/bNeLmoZ https://codepen.io/donotfold/pen/vEXvxjb scroll-timeline, animation-timeline https://codepen.io/danielhaim/pen/azmBEPL https://codepen.io/t_afif/pen/JoKYwXO CSS Functions https://frontendmasters.com/blog/the-fundamentals-and-dev-experience-of-css-function/ 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, their new Developer Platform is turning that workspace into infrastructure developers can build on. Time Jumps

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 how it all works. Time Jumps