Isopleth: Supporting sensemaking of professional web applications to create readily available learning experiences

Online resources can help novice developers learn basic programming skills, but few resources support progressing from writing working code to learning professional web development practices. We address this gap by advancing Readily Available Learning Experiences, a conceptual approach for transforming all professional web applications into opportunities for authentic learning. This article presents Isopleth, a web-based platform that helps learners make sense of complex code constructs and hidden asynchronous relationships in professional web code. Isopleth embeds sensemaking scaffolds informed by the learning sciences to (1) expose hidden functional and event-driven relationships, (2) surface functionally related slices of code, and (3) support learners manipulating the provided code representations. To expose event-driven relationships, Isopleth implements a novel technique called Serialized Deanonymization to determine and visualize asynchronous functional relationships. To evaluate Isopleth, we conducted a case study across 12 professional websites and a user study with 14 junior and senior developers. Results show that Isopleth's sensemaking scaffolds helped to surface implementation approaches in event binding, web application design, and complex interactive features across a range of complex professional web applications. Moreover, Isopleth helped junior developers improve the accuracy of their conceptual models of how features are implemented by 31% on average.