ShopTalk 705: CodePen Public Beta, Anchor Positioning, and Build Awesome
Mar 9, 2026
A behind-the-scenes look at launching a major web tool and the deployment headaches that came with its public beta. Deep dives into editor architecture, composable blocks, and formatting workflows. A technical rant about anchor positioning and why CSS anchors misbehave. Exploration of classless CSS libraries, Quiet UI ideas, and a relaunch of Eleventy into Build Awesome.
AI Snips
Chapters
Transcript
Episode notes
CodePen 2.0 Blocks Make The Editor Infinitely Extensible
- Chris Coyier described CodePen 2.0 blocks as modular processors that transform code input into output, letting the editor chain arbitrary tools like Prettier or TypeScript automatically.
- He explained blocks are an API contract so the compiler has zero hard-coded knowledge of specific processors, making the system infinitely extensible.
Chain Processors Instead Of Single-Choice Preprocessors
- Use layered processors rather than single-choice preprocessors: chain multiple blocks (e.g., Sass then autoprefixer then Prettier) so files like .tsx get the proper multi-step transforms automatically.
- Chris suggested adding necessary blocks automatically if file types require them, and providing templates to capture preferred block setups.
Save A Default Template To Preserve Your Editor Setup
- Save a configured pen as a template and mark it as your default so every new pen opens with your exact blocks, settings, and UI preferences.
- Chris noted this avoids reconfiguring Prettier, format-on-save, or other build choices every time you start a new pen.