Tutorons

Tutorons automatically detect and explain code embedded in tutorial pages. They make context-relevant descriptions of the purpose and syntax of code available available from a tooltip with a single click.

Go ahead and see what these explanations look like. Click on the highlighted code below to view automatically generated explanations.

wget -A".pdf" -r -l1 -p -k http://eecs.berkeley.edu/~andrewhead
$('table tr td').css('font-size', '12px');
RewriteRule ^(scripts|assets|daemons)($|/) - [L]
[item for item in range(len(a)) if a[item] == 'bar']

This highlighted code was detected by Tutorons that read this page and searched for code. The Tutorons then built explanations for the code and returned them to your browser, where they could be viewed in a tooltip.

Start browsing with Tutorons

To start seeing automatic explanations for wget, CSS selectors, regular expressions, and Python built-ins everywhere you navigate online, install the Firefox addon. Then click on the icon to enable automatic detection of code and insertion of explanations.

Give the new plugin a spin by viewing some explanations for wget on this tutorial and some explanations for regular expressions on this tutorial. Explanations may take a few seconds to appear as the Tutorons work to detect the code.

Add context-relevant explanations to your tutorial

By adding Tutorons to your webpage, visitors to your page will be able to click on snippets of wget, CSS selectors, regular expressions, and Python built-ins to see automatic explanations of the code. To enable Tutorons for your webpage, add the following lines to the <head> of your page.

<script src="//tutorons.com/static/tutorons-library.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function (event) {
    var tutoronsConnection = new tutorons.TutoronsConnection(window);
    tutoronsConnection.scanDom();
  });
</script>

You can download the Tutorons library for local use from here. You can also feel free to fork the libary. The source is here.

Build your own Tutorons

The Tutorons project is built from two components:

For personal use, you can build a Tutoron for a language of your choice by programming a Tutorons server that runs locally, and then rebuilding the Firefox addon with an added endpoint that points to your local server. The current Tutorons server code for the wget command, CSS selectors, regular expressions, and Python built-ins should serve as inspiration for building new Tutorons.

Contribute

If you're passionate about context-relevant programming documentation for the web and want to contribute, feel free to contact me [head dot andrewm at gmail dot com], or send along a pull request for a feature you're working on.

I welcome comments about the format of explanations, new languages to support, or other suggestions you have about Tutorons.

Fork me on GitHub