706: Can You Vibe Code a Canvas App, Geolocation Part 2, & CodePen v2

March 16, 2026

54 min episode · 2 min read

Episode

54 min

Read time

2 min

AI-Generated Summary

Published Mar 17, 2026

Key Takeaways

✓Build-versus-buy economics: AI is shifting the calculation for self-hosting infrastructure. CodePen replaced a third-party WebSockets service that would have cost five figures monthly at scale, completing the migration in under two weeks using AI-assisted scaffolding on already-provisioned Go servers running at only 7% memory usage.
✓Vibe coding scope: AI-generated tools are most viable for personal micro-utilities, not replacing established software. The practical ceiling is small, single-purpose apps like image compressors or custom scrolling tools. Replacing full platforms like monday.com or Salesforce creates ongoing maintenance burdens that negate the initial time savings for most users.
✓HTML geolocation element CSS behavior: The new geolocation button element enforces three distinct CSS constraint categories: properties like translate are silently ignored, properties like font-size are clamped to a minimum of nine pixels, and contrast-failing color combinations are permitted but silently disable the button's functionality entirely.
✓TLDraw open-source tests risk: TLDraw opened a PR to move its test suite to a closed-source repository after recognizing that publicly available tests allow LLMs to reverse-engineer a functionally equivalent clone. The tests effectively serve as a complete behavioral specification, making open test suites a new form of replicable intellectual property exposure.
✓CodePen v2 classic block migration: CodePen v2 introduces a classic block that replicates the original editor behavior, injecting HTML directly into the body without requiring a full document structure. Users can set this as a default template, and existing pens will automatically migrate to use the classic block configuration when forced conversion rolls out.

What It Covers

Chris Coyier and Dave Rupert examine vibe coding's practical limits for micro-utilities versus enterprise software, the build-versus-buy math shift driven by AI, new HTML geolocation element CSS constraints, TLDraw's controversial test removal PR, and CodePen v2 public beta features including blocks, classic templates, and password-protected pens.

Key Questions Answered

•Build-versus-buy economics: AI is shifting the calculation for self-hosting infrastructure. CodePen replaced a third-party WebSockets service that would have cost five figures monthly at scale, completing the migration in under two weeks using AI-assisted scaffolding on already-provisioned Go servers running at only 7% memory usage.
•Vibe coding scope: AI-generated tools are most viable for personal micro-utilities, not replacing established software. The practical ceiling is small, single-purpose apps like image compressors or custom scrolling tools. Replacing full platforms like monday.com or Salesforce creates ongoing maintenance burdens that negate the initial time savings for most users.
•HTML geolocation element CSS behavior: The new geolocation button element enforces three distinct CSS constraint categories: properties like translate are silently ignored, properties like font-size are clamped to a minimum of nine pixels, and contrast-failing color combinations are permitted but silently disable the button's functionality entirely.
•TLDraw open-source tests risk: TLDraw opened a PR to move its test suite to a closed-source repository after recognizing that publicly available tests allow LLMs to reverse-engineer a functionally equivalent clone. The tests effectively serve as a complete behavioral specification, making open test suites a new form of replicable intellectual property exposure.
•CodePen v2 classic block migration: CodePen v2 introduces a classic block that replicates the original editor behavior, injecting HTML directly into the body without requiring a full document structure. Users can set this as a default template, and existing pens will automatically migrate to use the classic block configuration when forced conversion rolls out.

Notable Moment

Chris described how a friend could recreate Jeremy Keith's meticulously hand-curated Irish music database, the Session, simply by prompting an LLM to scrape and replicate it — raising the point that AI doesn't just learn from curated data, it can directly duplicate it.

Know someone who'd find this useful?