Information about source code changes is important for many software development activities. As such, modern IDEs, including, IntelliJ IDEA and Visual Studio Code, show visual clues within the code editor that highlight lines that have been changed since the last synchronization with the code repository. However, the granularity of the change information is limited to a line level, showing mainly a small colored icon on the left side of the lines that have been added, deleted, or modified.This paper introduces Spike, a source code highlighting plugin that uses the font color to visually encode fine-grained version difference information within the code editor. In contrast to previously mentioned tools, Spike can highlight insertions, deletions, updates, and refactorings all in a same line. Our plugin also enriches the source code with small icons that allow retrieving detailed information about a given code change. We perform an exploratory user study with five professional software engineers. Our results show that our approach is able to assist practitioners with complex comprehension tasks about software history within the code editor.

Monitoring code quality and dependencies is an important task to keep software maintainable. While generally well researched, only little work on visually analyzing code quality of component-based front-end web applications exists that considers the specifics of such software systems. We propose an approach to visualize dependencies and code quality metrics of component-based JavaScript React applications. Our prototype implementation uses a node-link diagram for dependency visualization, tailored to the specific component structure of React applications and enriched with various visual cues. It is linked with different panels to show code quality and exact source code locations. Recommendations on how the quality of the system under analysis can be improved and refactored are provided. We evaluated our prototype in a small user study with four participants and found that it helped in program comprehension tasks and finding refactoring opportunities.