Addressing misconceptions about code with always-on programming visualizations

Lieber, Tom; Brandt, Jonathan; Miller, Rob

doi:10.1145/2556288.2557409

Cited by 62 publications

(26 citation statements)

References 18 publications

Supporting

Mentioning

Contrasting

Order By: Relevance

“…The left margin, alternatively called gutter or ruler, traditionally displays line numbers and simple icons (e.g., iMaus [81]). However, it can show also thin color bars (Diver [82]), thicker color fills (HyperSource [38]), "pills" containing text (Theseus [57]) or even a list of callers (Stacksplorer [83]).…”

Section: Locationmentioning

confidence: 99%

“…Finally, RegViz [80] slightly reflows the text so that the visual annotations do not overlap it. [57] displays the number of function calls in a JavaScript code in the left editor part; (b) RegViz [80] highlights regular expressions structure directly in code; and (c) Stench Blossom's [28] ambient smell detector that lives on the right edge of the program editor. Right augmentation components are pinned to the editor edges, which means that if the IDE window resizes (changes its width), the components move along with its edges.…”

Section: Locationmentioning

confidence: 99%

“…Most of the tools we identified were implemented as Eclipse plugins, which is obvious given the popularity and open architecture of this IDE. Some of them were created for other more or less popular IDEs such as Visual Studio (GhostFactor [97]), IntelliJ IDEA (wIDE [98]) or Brackets IDE (Theseus [57]). Examples of custom tools created from scratch are Omnicode [99], Shared-code editor [100], Code portals [79] and Code Bubbles [101].…”

Section: Idementioning

confidence: 99%

See 2 more Smart Citations

Visual augmentation of source code editors: A systematic mapping study

Sulír

Bacikova

Chodarev

et al. 2018

Journal of Visual Languages & Computing

View full text Add to dashboard Cite

c 2018. This manuscript version is made available under the CC-BY-NC-ND 4.0 license: http://creativecommons.org/licenses/by-nc-nd/4.0/. This is the accepted version of: M. Sulír, M. Bačíková, S. Chodarev, J. Porubän. Visual augmentation of source code editors: A systematic mapping study. AbstractSource code written in textual programming languages is typically edited in integrated development environments or specialized code editors. These tools often display various visual items, such as icons, color highlights or more advanced graphical overlays directly in the main editable source code view. We call such visualizations source code editor augmentation.In this paper, we present a first systematic mapping study of source code editor augmentation tools and approaches. We manually reviewed the metadata of 5,553 articles published during the last twenty years in two phases -keyword search and references search. The result is a list of 103 relevant articles and a taxonomy of source code editor augmentation tools with seven dimensions, which we used to categorize the resulting list of the surveyed articles.We also provide the definition of the term source code editor augmentation, along with a brief overview of historical development and augmentations available in current industrial IDEs.

show abstract

Section: Locationmentioning

confidence: 99%

Section: Locationmentioning

confidence: 99%

Section: Idementioning

confidence: 99%

See 1 more Smart Citation

Visual augmentation of source code editors: A systematic mapping study

Sulír

Bacikova

Chodarev

et al. 2018

Journal of Visual Languages & Computing

View full text Add to dashboard Cite

show abstract

“…However, as program complexity increases, such visualizations can become confusing [20], and navigating the traces may become-time consuming. Alternatively, recent debugging interfaces like Whyline [21] and Theseus [22] provide an overview of execution behavior and let a user find the cause of a bug through interactive question-answering or retroactive logging. Inspired by this prior work, this paper aims to augment program visualization to enable more efficient review of program traces.…”

Section: B Design Of Interactive Debugging Toolsmentioning

confidence: 99%

TraceDiff: Debugging unexpected code behavior using trace divergences

Suzuki

Soares

Head

et al. 2017

2017 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC)

View full text Add to dashboard Cite

Abstract-Recent advances in program synthesis offer means to automatically debug student submissions and generate personalized feedback in massive programming classrooms. When automatically generating feedback for programming assignments, a key challenge is designing pedagogically useful hints that are as effective as the manual feedback given by teachers. Through an analysis of teachers' hint-giving practices in 132 online Q&A posts, we establish three design guidelines that an effective feedback design should follow. Based on these guidelines, we develop a feedback system that leverages both program synthesis and visualization techniques. Our system compares the dynamic code execution of both incorrect and fixed code and highlights how the error leads to a difference in behavior and where the incorrect code trace diverges from the expected solution. Results from our study suggest that our system enables students to detect and fix bugs that are not caught by students using another existing visual debugging tool.

show abstract

“…To prevent visual clutter, the snapshots are initially collapsed (similar to [18]) and the user can expand a thumbnail for any snapshot, or drag it onto the heap view to restore it. This feature enables relational reasoning by comparing heap structures at different execution points.…”

Section: Temporal Viewmentioning

confidence: 99%

An Interactive System for Data Structure Development

Vechev

Hilliges

2015

Proceedings of the 33rd Annual ACM Conference on Human Factors in Computing Systems

View full text Add to dashboard Cite

Figure 1: We contribute a novel way of debugging, allowing the user to directly interact with a program's live heap. The heap graph is abstracted using a method for online parametric heap abstraction which allows us to only visualize the algorithm's essential operation. The user can change and refine these automatic abstractions interactively. Our system can be used during regular development (left) and in a classroom setting using a pen+touch user interface (right). ABSTRACTData structure algorithms are of fundamental importance in teaching and software development, yet are difficult to understand. We propose a new approach for understanding, debugging and developing heap manipulating data structures.The key technical idea of our work is to combine deep parametric abstraction techniques emerging from the area of static analysis with interactive abstraction manipulation. Our approach bridges program analysis with HCI and enables new capabilities not possible before: i) online automatic visualization of the data structure in a way which captures its essential operation, thus enabling powerful local reasoning, and ii) fine grained pen and touch gestures allowing for interactive control of the abstraction -at any point the developer can pause the program, graphically interact with the data, and continue program execution. These features address some of the most pressing challenges in developing data structures.We implemented our approach in a Java-based system called FluidEdt and evaluated it with 27 developers. The results indicate that FluidEdt is more effective in helping developers c 2015 Association for Computing Machinery. ACM acknowledges that this contribution was authored or co-authored by an employee, contractor or affiliate of a national government. As such, the Government retains a nonexclusive, royalty-free right to publish or reproduce this article, or to allow others to do so, for Government purposes only. find data structure errors than existing state of the art IDEs (e.g. Eclipse) or pure visualization based approaches.

show abstract

Addressing misconceptions about code with always-on programming visualizations

Cited by 62 publications

References 18 publications

Visual augmentation of source code editors: A systematic mapping study

Visual augmentation of source code editors: A systematic mapping study

TraceDiff: Debugging unexpected code behavior using trace divergences

An Interactive System for Data Structure Development

Contact Info

Product

Resources

About