#CodePen

Noting perhaps my largest personal career accomplishment, which is launching CodePen 2.0. Far more work, believe it or not, than the entire creation of the original CodePen. This isn’t the pl…

Stephen and Chris chat about how the 2.0 editor (well, the compiler really) understands and supports Browserslist, a config format that lives in your package.json file that multiple blocks can unde…

I built a Blender plugin that exports a scene as HTML + CSS 3D transforms. Instead of rendering...

Import Maps are pretty great! You get to write import thing from “place”; and then you get to map what you mean by “place”. You c…

Alex and Chris talk about how the 2.0 Editor supports packages from npm. The trick is both simple and complex. The idea is simple. We detect the packages you want to use, list them in an (editable)…

With CodePen 2.0, we’ve got a new word we’re using: Blocks. A way to think about Blocks is anything that processes code. They are added as steps to the CodePen Compiler as needed. For e…

CodePen 2.0 was the most ambitious project that we’ve ever taken on in our lives. Why would we do such a thing? Chris and Alex explain the thinking behind it. We’ve been around a long t…

Chris Coyier and Stephen Shaw discuss the transition from CodeMirror 5 to CodeMirror 6, highlighting the significant improvements in accessibility, performance, and user experience. They delve into…

Or just “Embeds” as we more frequently refer to them as. Stephen and Chris talk about the fairly meaty project which was re-writing our Embeds for a CodePen 2.0 world. No longer can we …

Chris and Stephen hop on the podcast to discuss the concept of a proxy. Possibly the most “gray hat” thing that CodePen does. We use a third-party analytics tool called Fullres. We coul…

Alex & Chris get into a fairly recent technological change at CodePen where we ditched our Elasticsearch implementation for just using our own Postgres database for search. Sometimes choices li…

First a quick heads up about… me. I have a weird itch to do “streaming”, so I’m letting myself just be a hardcore beginner and giving it a shot. The plan is just hang out wi…

We updated the Your Work section of CodePen recently. See, it used to have a dropdown menu like this that we labelled “View”: This allowed you to scope down the Pens you were looking at…

One of the best-known examples of CSS state management is the checkbox hack. What if we want a component to be in one of three, four, or seven modes? That is where the Radio State Machine comes in.…