448: CSS Modules is Cool Again

Shaw and Chris talk CSS Modules, a rather old bit of technology in the CSS-in-JS category. CodePen now supports them, which took a little work because the way they process code is a smidge unusual. We use CodePen Modules (with Sass!) here at CodePen so we knew we wanted to support them, but we got a little push when GitHub blogged about how useful they find them, and lots of folks raised their hands saying they still use them too. Time Jumps

Chris & Shaw are chatting this week about the newfangled web technology, WebMCP. It involves new browser APIs like document.modelContext, meaning it needs to be a web standard, and that process is chugging along, but certainly not a done deal. That said, CodePen already has it conditionally implemented for browsers that support it, so you can use it now if you're an early adopter and into AI stuff. It means you can control the CodePen Editor from an AI agent much faster and more efficiently, using whatever agent you like. Time Jumps Links

CodePen has "feeds" for exploring content, like our Trending feed for showing off what's popular lately all across CodePen, and our Following feed showing off the work of people you've chosen to follow on CodePen. Both of those require some fairly fancy technology to pull off! We've pulled this tech in-house, so we have more control and can evolve and offer more with these feeds over time. Marie & Chris get into all the details. Time Jumps

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