JavaScript code samples

The code for all the following features can be viewed using your browser's standard developer tools. But for simplicity I've provided links to display the code in a new tab or window. Also, some of the code is minified and the links take you to more easily readable, unminified code.

Kachingle* JavaScript widget

These widgets were designed to be installed on any website (configurable by the site owner via their Kachingle account, to provide their site name and logo – in this case for my own blog, In Silico). They talk to the Kachingle server, and provide the user with status information and UI.

(Try mousing over the widget. Click "Explore more" to experiment with the UI. To view the full range of functionality, click "Sign Up" or "Join Kachingle" to get a free trial at When you return, you'll be in a logged-in state and can turn "kachingling" on and off for this or other sites.)

The widget is displayed in an iframe, and the popup or overlay that appears on mouseover is in its own iframe. There are two separate pieces of JavaScript to control these:

Host page controls (View Code)

Loaded into the host page, this code

Overlay internal controls (View Code)

Loaded into the overlay iframe itself (hosted at, this code

(Note, the markup and CSS was designed by somebody else; the JS was all mine, and I wrote the PHP/MySQL that provides the correct dynamic data.)

KachingleX* Browser Extension

I conceived, designed, and built this add-on for Firefox, Chrome, Safari, and Internet Explorer browsers in order to solve a difficult problem at Kachingle: the chicken-and-egg problem of getting users to sign up though we had few participating sites, and getting sites to participate though we had few signed-up users. We were relying on sites to install the widget. KachingleX broke that impass by letting us install the widget for our users on any site without the site owner having to do anything.

To try it yourself:

  1. Go to Wikipedia and notice… nothing out of the ordinary.
  2. Go to and install KachingleX for the browser you are using.
  3. Now go back to the Wikipedia tab, and reload the page; there is now a fully functional, thin, bar-shaped version of the Kachingle widget at the top of the page. (This version uses click to open, rather than mouseover.)

Browser extension code. KachingleX consists of the following three scripts:

I've displayed the Chrome code here; each of the other browsers has its own version of the browser-specific parts. For Firefox and Safari there are similar JS scripts. In Internet Explorer, most of the IE-specific code is in a DLL written in C++.

Simple JS demo

This is a "speed learning" demo more than a demo of my JS prowess. I wrote this in early 2010 after exactly two days of exposure to JavaScript. This code shows the level of what I can produce in a language I've never seen before, after the most minimal start-up time. (View demo)