Backstage: source viewer for the Web

Opening a case and watching an inside of devices had been the first step of understanding how it had worked before computer age specially for kids.  But now it is hard to understand electric devices by watching the inside.  The shape of LSIs give you no clues of their functions.
Open source softwares can give you how they work alternatively, however, it is not inside products. It is outside products. Engineers interested in some products would see their source codes, but normal users, especially normal smart device users have no chance to see source codes.  We are afraid that this causes to keep away potential future creators from real mechanisms of programmable devices.

Web pages or recent jargon HTML5 pages are different. They are not necessarily open source but they have sources inside as a result.  You can see their source code if you want. And we want to provide a mechanism to let the chance as easy as possible. This is "Backstage." Here is an example applying it to our Calculator app.

There is a little "b" button at the left-top of the display of the caclulator.

If you tap the button, source code viewer will appear.

Try the example now!
NOTE: If you have tried our Calculator app once, you need to reload the page twice to refresh the application cache.

For advanced end users, adding Backstage button to any web page is also pretty easy. Register the link below to your bookmark, and click it when you want Backstage button.

Backstage

For web designers, using Backstage is pretty easy. Just add one line below before </body>. Backstage button will be added right top of the page and the button will show your source codes to your visitors when clicking.

<script src="http://y-ich.github.com/safari-park/lib/backstage-button.js"></script>

Options for button layout is available. Add a declaration of a variable "backstageConfig" just before the above line like this:

<script type="text/javascript">
var backstageConfig = {
  left : '10px',
  top : '5px'
};
</script>

The content of the variable will affect stylesheet of the Backstage button.

The followings are some details of Backstage.

1. Currently we restrict to pick up source files whose path is the same as the web page in order to avoid to show general libraries.
2. Even HTML5, some web pages use minified sources for performance, and some javascript files are not source, compiled from sources in CoffeeScipt. It order to specify readable sources, you can use data-source attribute. Backstage will search a file specified by data-source first.