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.
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,
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
kachingle.com. When you return,
you'll be in a logged-in state and can turn "kachingling" on and off for this or other sites.)
is displayed in an iframe, and the popup or overlay that appears on mouseover is in its own iframe.
Loaded into the overlay iframe itself (hosted at kachingle.com), this code
controls the UI (menu scrolling and navigation) within the overlay
handles multiple markup configurations which are generated dynamically
(Note, the markup and CSS was designed by
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:
Go to Wikipedia
and notice… nothing out of the ordinary.
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:
cross-browser compatible content-script, used in all 4 browser versions.
Creates the widget markup and script tag and inserts it into the DOM, positioning it at the
top of the page (view code).
Handles functions that cannot be run from within the web page itself, such as
a cross-domain Ajax request. Communicates with Kachingle server to determine which site account
owns the URL of the current page, so that the widget can be given the correct ID. Contains code
that must conform to the extensions API of each specific
browser, so there's separate code for each browser supported
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
in a language I've never seen before, after the most minimal start-up time.