ShopTalk 691: Charts + Graphs, Vibe Coding an App, and Debating Affordances
9 snips
Nov 17, 2025 Discover the quirky world of Balatro streamers and their post-game antics. Dive into creative uses of CSS random() for mesmerizing starfield effects. Hear about innovative charting ideas that challenge the status quo. Explore the pitfalls of AI-generated code and the delicate balance of constraints. Unpack the debate between affordances and conventions in UI design. Finally, learn how subtle cursor variations can enhance user experience and accessibility. An engaging blend of tech insights awaits!
AI Snips
Chapters
Transcript
Episode notes
CSS random() Unlocks Playful Deterministic Styles
- Chris and Dave highlight CSS random() as a powerful, playful tool for generative styles and deterministic seeds per element.
- They used unitless random values as multipliers to drive color, size, animation speed, and position in a star field example.
Riffing On A Web‑Component Chart Element
- Dave imagined a simple web-component chart element that inhales a table and renders charts with CSS tooltips and popovers.
- He riffed on starting charts at the top coordinate to simplify bar heights and make a primitive styleable HTML chart element.
Use CSS Reveal For JS Failure Fallbacks
- Use a CSS-based reveal as a progressive‑enhancement fallback when JS might fail to unhide content.
- Scott Jehl's keyframe trick hides content then lets JS remove the animation class to prevent flash if script runs.