Authoring multi-stage code examples with editable code histories

Multi-stage code examples present multiple versions of a program where each stage increases the overall complexity of the code. In order to acquire strategies of program construction using a new language or API, programmers consult multi-stage code examples in books, tutorials and online videos. Authoring multi-stage code examples is currently a tedious process, as it involves keeping several stages of code synchronized in the face of edits and error corrections. We document these difficulties with a formative study examining how programmers author multi-stage code examples. We then present an IDE extension that helps authors create multi-stage code examples by propagating changes (insertions, deletions and modifications) to multiple saved versions of their code. Our system adapts revision control algorithms to the specific task of evolving example code. An informal evaluation finds that taking snapshots of a program as it is being developed and editing these snapshots in hindsight help users in creating multi-stage code examples.

[1]  Donald A. Norman,et al.  User Centered System Design: New Perspectives on Human-Computer Interaction , 1988 .

[2]  Steven K. Feiner,et al.  Editable graphical histories , 1988, [Proceedings] 1988 IEEE Workshop on Visual Languages.

[3]  John Millar Carroll.  The Nurnberg Funnel: Designing Minimalist Instruction for Practical Computer Skill , 1990 .

[4]  Rachel K. E. Bellamy,et al.  A view matcher for learning Smalltalk , 1990, CHI '90.

[5]  Peter Brusilovsky,et al.  WebEx: Learning from Examples in a Programming Course , 2001, WebNet.

[6]  Janet Rountree,et al.  Learning and Teaching Programming: A Review and Discussion , 2003, Comput. Sci. Educ..

[7]  John Hart,et al.  ACM Transactions on Graphics: Editorial , 2003, SIGGRAPH 2003.

[8]  Andrew Begel,et al.  Managing Duplicated Code with Linked Editing , 2004, 2004 IEEE Symposium on Visual Languages - Human Centric Computing.

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

[10]  Gleb Naumovich,et al.  JTutor: an Eclipse plug-in suite for creation and replay of code-based tutorials , 2004, eclipse '04.

[11]  Rastislav Bodík,et al.  Jungloid mining: helping to navigate the API jungle , 2005, PLDI '05.

[12]  Tessa A. Lau,et al.  DocWizards: a system for authoring follow-me documentation wizards , 2005, UIST.

[13]  Benjamin A. Motz,et al.  Time After Time: The Psychological Reality of the Ego- and Time-Reference-Point Distinction in Metaphorical Construals of Time , 2006 .

[14]  Casey Reas,et al.  Processing: programming for the media arts , 2006, AI & SOCIETY.

[15]  Brad A. Myers,et al.  An Exploratory Study of How Developers Seek, Relate, and Collect Relevant Information during Software Maintenance Tasks , 2006, IEEE Transactions on Software Engineering.

[16]  Lutz Prechelt,et al.  JTourBus: Simplifying Program Understanding by Documentation that Provides Tours Through the Source Code , 2007, 2007 IEEE International Conference on Software Maintenance.

[17]  Rob Miller,et al.  Codetrail: Connecting source code and web resources , 2008, 2008 IEEE Symposium on Visual Languages and Human-Centric Computing.

[18]  Jeffrey Heer,et al.  Graphical Histories for Visualization: Supporting Analysis, Communication, and Evaluation , 2008, IEEE Transactions on Visualization and Computer Graphics.

[19]  Brad A. Myers,et al.  Improving API documentation using API usage information , 2009, 2009 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC).

[20]  Frédo Durand,et al.  Interactive Visual Histories for Vector Graphics , 2009 .

[21]  Philip J. Guo,et al.  Two studies of opportunistic programming: interleaving web foraging, learning, and writing code , 2009, CHI.

[22]  Takeo Igarashi,et al.  Generating photo manipulation tutorials by demonstration , 2009, ACM Trans. Graph..

[23]  Tovi Grossman,et al.  Chronicle: capture, exploration, and playback of document workflow histories , 2010, UIST.

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

[25]  Brad A. Myers,et al.  Calcite: Completing Code Completion for Constructors Using Crowds , 2010, 2010 IEEE Symposium on Visual Languages and Human-Centric Computing.

[26]  Jan Gulliksen,et al.  User-centered System Design , 2011 .

[27]  Mira Dontcheva,et al.  A Framework for content-adaptive photo manipulation macros: Application to face, landscape, and global manipulations , 2011, TOGS.

[28]  Mira Dontcheva,et al.  Pause-and-play: automatically linking screencast video tutorials with applications , 2011, UIST.

[29]  Li-Yi Wei,et al.  Nonlinear revision control for images , 2011, SIGGRAPH 2011.

[30]  Fabio Pellacini,et al.  MeshFlow: interactive visualization of mesh construction sequences , 2011, ACM Trans. Graph..

[31]  Björn Hartmann,et al.  HyperSource: bridging the gap between source and code-related web sites , 2011, CHI.

[32]  Pei-Yu Chi,et al.  MixT: automatic generation of step-by-step mixed media tutorials , 2012, CHI Extended Abstracts.

[33]  Roel Vertegaal,et al.  SnipMatch: using source code context to enhance snippet retrieval and parameterization , 2012, UIST.

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

[35]  Thomas D. LaToza,et al.  Active code completion , 2011, 2012 34th International Conference on Software Engineering (ICSE).

[36]  Joel Brandt,et al.  Codelets: linking interactive documentation and example code in the editor , 2012, CHI.