Ply: A Visual Web Inspector for Learning from Professional Webpages
summary
Ply is a browser inspection tool that prunes ineffective properties by disabling CSS declarations and comparing screenshots to find which rules actually change the page, and it highlights implicit dependencies where one property’s effect disappears without another (e.g., z-index needing position). The implementation mimics DevTools, runs iterative visual tests, and surfaces tooltips explaining relationships. In two user studies novices using Ply reproduce complex components and reach early milestones much faster—about 50% faster overall—showing the approach speeds learning.
AI-written summary · about
chapters (9)
- 0:00Introduction and motivation
- 2:53Needfinding study findings
- 8:13Design principles for Ply
- 9:16Ply features demonstration
- 11:42Visual relevance testing explained
- 13:30First user study results
- 15:14Second user study on learning
- 16:58Takeaways and future work
- 18:06Q&A session
related talks
43mWork Smarter, not Harder with Chrome DevTools
21mFuture of Web Tooling
51mModern CSS Development: Tooling & Workflows
11mChrome DevTools for designers
40mModern CSS Development and Debugging
54mVisual Validation
35mJavaScript/Web tooling now and tomorrow
24mWhat You See is What You Deserve: Simple Visual Tools For All!