Programmers frequently use the Web while writing code: they search for libraries, code examples, tutorials, and documentation. This link between code and visited Web pages remains implicit today. Connecting source code and browsing histories might help programmers maintain context, reduce the cost of Web page re-retrieval, and enhance understanding when code is shared.
HyperSource is an IDE augmentation that associates browsing histories with source code edits. HyperSource comprises a browser extension that logs visited pages; an IDE that tracks user activity and maps pages to code edits; a source document model that tracks visited pages at a character level; and a user interface that enables interaction with these histories.
This project is complete and no longer under active development.
Björn Hartmann, Mark Dhillon, and Matthew K. Chan. HyperSource: Bridging the gap between source and code-related web sites. In Proceedings of CHI 2011. ACM, New York, NY, USA, 2207-2210. ACM Digital Library | Local pdf
HyperSource was built by extending the Processing code editor and the Google Chrome browser. Installation requires two steps: the browser extension and the IDE itself. First, make sure that you have Google Chrome installed. Extract the hypersourceextension.zip file into a directory of your choice. In Chrome, open the Window->Extensions menu and click on the "Developer Mode" button on the right hand side. Click on the "Load unpacked extension…" button. In the file dialog that opens, navigate to the HyperSourceExtension directory that you just unzipped and select it.
Now it's time to install HyperSource IDE. Simply double-click the .dmg file to mount the image and drag it to the Applications folder (or wherever you'd prefer it to be installed), and you're ready to go. One thing to note is that since HyperSource is built on top of the Processing IDE, the application will show up as Processing on your machine.
Usage Instructions
With both the extension and application running, you can begin coding and browsing. After viewing one or more webpages, subsequent lines of code (both existing and new) will be enhanced with the browser history. The leftmost sidebar of the editor displays different shades of blue corresponding to the amount of browsing associated with that line of code. Clicking on a particular sidebar highlight will pop up a layer detailing the history: links, timestamps, and thumbnails of the pages are prominently displayed. Saving these histories is also fully supported, but the user will need to open the .hypersource file (which sits next to the .pde) for this to be re-established.
The source is available in our Google Code repository. The code is based on Processing release 0178, revision 6345. Processing and HyperSource are written in Java and should run on multiple platforms. We only tested on OS X.
Build using Apache Ant: Navigate to the build/ directory and run ant build.
The path to the built executable (on OS X) will be build/macosx/work/Processing.app. After modifying the code you can get a fresh build by running ant clean build. To build and run in one step, use ant run.
Bugs
HyperSource is research software and certain to contain bugs. For known issues, see the issue list on Google Code.