A Visual Web Inspector for Learning from Professional Webpages
UIST 2018, Berlin
Surveyed undergraduate web developers (n = 20)
In-person follow-up study (n = 10)
In line with Gross and Kelleher (2010), Brandt et al. (2010), Ko, Myers, and Aung (2004)
z-index depends upon
Hide visually-irrelevant code to minimize information overload and support novices’ visual intuition
Embed contextual guidance into inspector output to explain how properties coordinate
Building from Quintana et al. (2004)
Using annotations to surface design patterns (see paper)
A property is visually effective if and only if its deletion causes a regression
width: 100%; is effective
display: block; is ineffective
Does pruning ineffective properties help developers replicate features more quickly?
How does embedded guidance help novice developers learn new CSS concepts?
z-indexwould change as a result of
positionnot being fixed.
position: fixed;is doing something beyond pinning in place while you scroll.”
Production webpages can support authentic learning
CSS is nontrivial to understand – need semantic tools that support visual intuition
Learner-centered developer tools