A Picture worth a Thousand Programmes
summary
Argues that visuals make code less abstract and demonstrably helps explain metaphors, space, and change over time; cites a real course Just JavaScript that maps syntax to shapes with animations and diagrams; shows concrete diagrams like useEffect timelines that make callback and dependency behavior visible; surveys historical visual languages and points to a working tool, stately.ai, that visualizes state machines and syncs with code in VS Code; claims current ratio is roughly 98% text to 2% images.
AI-written summary · about
chapters (11)
- 0:00Start
- 3:39Text is an ideal medium for abstract logic
- 7:26Physical Objects
- 11:55PROP DRILLING
- 14:19No dependency array Re-renders with useEffect
- 14:292. Empty dependency array
- 14:47With 'count and cleanup Cleanup function runs
- 16:18Wicked problems of visual programming
- 18:20The hard way
- 18:36The easier way
- 19:40What's a developer to do?
related talks
38mA Picture Is Worth a 1000 Lines of Code
30mVisualizing process evolution
21mGraphic Content Warning
49mFrom Doodles to Dashboards, Data Flows, and Docs
11mThe Effect of Richer Visualizations on Code Comprehension
19mSoftware Visualization: The humane solution
30mAesthetics of code.
21mAngular for the Visual Learner.