705: CodePen Public Beta, Anchor Positioning, and Build Awesome

March 9, 2026

58 min episode · 2 min read

Chris Coyier

Episode

58 min

Read time

2 min

AI-Generated Summary

Published Mar 10, 2026

Key Takeaways

✓CodePen 2.0 Block Architecture: CodePen's new editor uses a fully API-driven "blocks" system where zero lines of hard-coded processor logic exist in the compiler. Blocks announce their availability via API contract, making the system infinitely extensible. File extensions like `.ts` auto-detect required blocks, and users can layer multiple processors sequentially — for example, Sass, then Autoprefixer — rather than selecting one mutually exclusive preprocessor.
✓CSS Anchor Positioning Reliability: Anchor positioning fails silently when the anchored element is not "fully laid out" before the anchor resolves. The most reliable pattern is making both the anchor and the anchored element siblings in the DOM, with the anchor element appearing first in source order. Positioning the anchored element as `position: fixed` can resolve parent-child layout dependency conflicts that cause invisible failures.
✓AIM (Anchor Interpolated Morph) Technique: Adam Argyle's AIM pattern lets elements animate from one anchor point to a completely different anchor on exit. A dialog can appear to emerge from a button, then collapse into a trash icon on close. This requires `@starting-style`, `transition-behavior: allow-discrete`, and `:not([popover-open])` states to control both inbound and outbound animation paths independently.
✓AI Context Engineering Uncertainty: Research including MIT white papers shows that adding agent instruction files (like `agents.md` or `claude.md`) can on average produce worse AI completions, not better. Human-written skill instructions outperform LLM-generated ones. Cursor's multi-agent feature sends identical prompts to parallel agents using Git worktrees, letting developers compare divergent outputs — useful given the nondeterministic, slot-machine nature of LLM responses.
✓Blogging as Browser Influence: Writing detailed, specific blog posts about CSS bugs or missing features demonstrably influences browser engineers and spec authors. Browser team members at companies including Apple and Mozilla actively search for real-world documented problems with URLs they can reference in internal discussions. A single well-written post carries more weight than informal complaints because it signals a concrete, reproducible use case.

What It Covers

Shop Talk Show episode 705 covers CodePen 2.0's public beta launch (delayed by a GitHub Actions outage), CSS anchor positioning limitations and the AIM (Anchor Interpolated Morph) technique, AI context engineering unpredictability, classless CSS libraries, and the Eleventy-to-Build Awesome rebranding Kickstarter campaign.

Key Questions Answered

•CodePen 2.0 Block Architecture: CodePen's new editor uses a fully API-driven "blocks" system where zero lines of hard-coded processor logic exist in the compiler. Blocks announce their availability via API contract, making the system infinitely extensible. File extensions like `.ts` auto-detect required blocks, and users can layer multiple processors sequentially — for example, Sass, then Autoprefixer — rather than selecting one mutually exclusive preprocessor.
•CSS Anchor Positioning Reliability: Anchor positioning fails silently when the anchored element is not "fully laid out" before the anchor resolves. The most reliable pattern is making both the anchor and the anchored element siblings in the DOM, with the anchor element appearing first in source order. Positioning the anchored element as `position: fixed` can resolve parent-child layout dependency conflicts that cause invisible failures.
•AIM (Anchor Interpolated Morph) Technique: Adam Argyle's AIM pattern lets elements animate from one anchor point to a completely different anchor on exit. A dialog can appear to emerge from a button, then collapse into a trash icon on close. This requires `@starting-style`, `transition-behavior: allow-discrete`, and `:not([popover-open])` states to control both inbound and outbound animation paths independently.
•AI Context Engineering Uncertainty: Research including MIT white papers shows that adding agent instruction files (like `agents.md` or `claude.md`) can on average produce worse AI completions, not better. Human-written skill instructions outperform LLM-generated ones. Cursor's multi-agent feature sends identical prompts to parallel agents using Git worktrees, letting developers compare divergent outputs — useful given the nondeterministic, slot-machine nature of LLM responses.
•Blogging as Browser Influence: Writing detailed, specific blog posts about CSS bugs or missing features demonstrably influences browser engineers and spec authors. Browser team members at companies including Apple and Mozilla actively search for real-world documented problems with URLs they can reference in internal discussions. A single well-written post carries more weight than informal complaints because it signals a concrete, reproducible use case.

Notable Moment

During CodePen 2.0's planned public beta launch — representing roughly five years of development — a GitHub Actions outage prevented deployment entirely. The team had already celebrated on a group Zoom call before the error appeared, and some services received Git tags while others did not, requiring manual cleanup before retrying.

Know someone who'd find this useful?