Ply: A Visual Web Inspector for Learning from Professional Webpages

While many online resources teach basic web development, few are designed to help novices learn the CSS concepts and design patterns experts use to implement complex visual features. Professional webpages embed these design patterns and could serve as rich learning materials, but their stylesheets are complex and difficult for novices to understand. This paper presents Ply, a CSS inspection tool that helps novices use their visual intuition to make sense of professional webpages. We introduce a new visual relevance testing technique to identify properties that have visual effects on the page, which Ply uses to hide visually irrelevant code and surface unintuitive relationships between properties. In user studies, Ply helped novice developers replicate complex web features 50% faster than those using Chrome Developer Tools, and allowed novices to recognize and explain unfamiliar concepts. These results show that visual inspection tools can support learning from complex professional webpages, even for novice developers.

[1]  Fred Paas,et al.  Automation and schema acquisition in learning elementary computer programming : implications for the design of practice , 1990 .

[2]  Kyle J. Harms.  Applying cognitive load theory to generate effective programming tutorials , 2013, 2013 IEEE Symposium on Visual Languages and Human Centric Computing.

[3]  Marcia C. Linn,et al.  The case for case studies of programming problems , 1992, CACM.

[4]  C.-H. Luke Ong,et al.  Detecting redundant CSS rules in HTML5 applications: a tree rewriting approach , 2014, OOPSLA.

[5]  Brian P. Bailey,et al.  Getting inspired!: understanding how and why examples are used in creative design practice , 2009, CHI.

[6]  Emina Torlak,et al.  Automated reasoning for web page layout , 2016, OOPSLA.

[7]  Margaret M. Burnett,et al.  An exploration of design opportunities for “gardening” end-user programmers' ideas , 2011, 2011 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC).

[8]  Claudia Eckert,et al.  Sources of inspiration: a language of design , 2000 .

[9]  Haoqi Zhang,et al.  Telescope: Fine-Tuned Discovery of Interactive Web UI Feature Implementation , 2016, UIST.

[10]  B. Adelson,et al.  The Role of Domain Expenence in Software Design , 1985, IEEE Transactions on Software Engineering.

[11]  Ranjitha Kumar,et al.  Bricolage: example-based retargeting for web design , 2011, CHI.

[12]  David Klahr,et al.  Dual Space Search During Scientific Reasoning , 1988, Cogn. Sci..

[13]  Mitchel Resnick,et al.  “Thick” authenticity: new media and authentic learning , 1999 .

[14]  Margaret M. Burnett,et al.  A principled evaluation for a principled idea garden , 2015, 2015 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC).

[15]  Vincent Quint,et al.  On the analysis of cascading style sheets , 2012, WWW.

[16]  Björn Hartmann,et al.  Tutorons: Generating context-relevant, on-demand explanations and demonstrations of online code , 2015, 2015 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC).

[17]  Brad A. Myers,et al.  Six Learning Barriers in End-User Programming Systems , 2004, 2004 IEEE Symposium on Visual Languages - Human Centric Computing.

[18]  Scott R. Klemmer,et al.  Example-centric programming: integrating web search into the development environment , 2010, CHI.

[19]  Morgan Dixon,et al.  Prefab: implementing advanced behaviors using pixel-based reverse engineering of interface structure , 2010, CHI.

[20]  Scott R. Klemmer,et al.  Rehearse : Helping Programmers Adapt Examples by Visualizing Execution and Highlighting Related Code , 2010 .

[21]  Caitlin Kelleher,et al.  Toward transforming freely available source code into usable learning materials for end-users , 2010, PLATEAU '10.

[22]  Brad A. Myers,et al.  WebCrystal: understanding and reusing examples in web authoring , 2012, CHI.

[23]  Shin Yoo,et al.  Observational slicing based on visual semantics , 2017, J. Syst. Softw..

[24]  Matthias Keller,et al.  CSS Code Quality: A Metric for Abstractness; Or Why Humans Beat Machines in CSS Coding , 2010, 2010 Seventh International Conference on the Quality of Information and Communications Technology.

[25]  Ronen I. Brafman,et al.  Designing with interactive example galleries , 2010, CHI.

[26]  Joseph Krajcik,et al.  A Scaffolding Design Framework for Software to Support Science Inquiry , 2004, The Journal of the Learning Sciences.

[27]  John Sweller,et al.  Cognitive Load Theory: Instructional Implications of the Interaction between Information Structures and Cognitive Architecture , 2004 .

[28]  Mike Y. Chen,et al.  SeeSS: seeing what i broke -- visualizing change impact of cascading style sheets (css) , 2013, UIST.

[29]  Ali Mesbah,et al.  Automated analysis of CSS rules to support style maintenance , 2012, 2012 34th International Conference on Software Engineering (ICSE).

[30]  Mark Guzdial,et al.  Learning on the job: characterizing the programming knowledge and learning strategies of web designers , 2010, CHI.

[31]  John R. Anderson,et al.  Cognitive Tutors: Lessons Learned , 1995 .

[32]  Vincent Quint,et al.  Editing with style , 2007, DocEng '07.

[33]  Bruce L Sherin,et al.  How Students Understand Physics Equations , 2001 .

[34]  A. Telier,et al.  Drawing things together , 2012, INTR.

[35]  Paul J. Feltovich,et al.  Categorization and Representation of Physics Problems by Experts and Novices , 1981, Cogn. Sci..

[36]  K. Weick.  FROM SENSEMAKING IN ORGANIZATIONS , 2021, The New Economic Sociology.

[37]  Michael D. Ernst,et al.  Explaining Visual Changes in Web Interfaces , 2015, UIST.

[38]  Mark Weiser,et al.  Programming Problem Representation in Novice and Expert Programmers , 1983, Int. J. Man Mach. Stud..

[39]  Brad A. Myers,et al.  FireCrystal: Understanding interactive behaviors in dynamic web pages , 2009, 2009 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC).

[40]  Ranjitha Kumar,et al.  Webzeitgeist: design mining the web , 2013, CHI.