CodePen Radio

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) package.json file, then turn that into a <script type="importmap"> in your HTML files that import those packages from esm.sh. Complex in that, well, all those steps are fairly difficult to get right, handle all edge cases, and do extremely quickly. All of which the CodePen Compiler does.

Time Jumps

Stephen & Chris look at the UI of the 2.0 Editor and show all the control you have over what you're looking at. Way more control than the Classic editor! We share some of the thinking behind it. Don't miss the Omnibar!

Time Jumps

Links

Circle Round

Story Pirates Podcast

Who Moved My Cheese?

The freeCodeCamp Podcast

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 example, TypeScript is a block, because it processes files in the TypeScript syntax into JavaScript files. But something like Lodash is not a block. Lodash is a package from npm (which we also handle, but that's a topic for another podcast). Lodash doesn't process code, it's just a library that is linked up or bundled.

Time Jumps

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 time, know what our customers want, and are developers ourselves, so we know how this industry moves. We thought we could serve both in a powerful and flexible way, taking us into the future.

Time Jumps

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 architectural changes, integration with modern JavaScript frameworks such as Next.js, and the new theming options available in the editor.

Time Jumps