JavaScript
==========

JSON Diff
---------

JSON Diff is a simple tool for diffing and visualizing JSON.

[JSON Diff](jsondiff)

JS Dock
-------

The Dock is a free, open source navigation bar featured on this website

[The Dock](jsdock.php)


JS Console
----------

The Console is a JavaScript console in bookmarklet form for executing JavaScript code in any web page. Features auto-completion, line editing, history, and more.

The Console - coming soon

Keychain Bookmarklet
--------------------

The Keychain Bookmarklet application is a simple tool for storing and auto-filling passwords on webpages, originally intended for the iPhone.

[Keychain Bookmarklet](keychain.php)

Meebosé
--------------

A bookmarklet which adds "Exposé"™-like functionality to the Meebo chat client.

[Meebosé](meebose.php)

Spam Guard
----------

The following is the method used on this site to protect against email address harvesting robots that crawl the web looking for your email address to spam. It's a little paranoid, but it should protect against pretty much any email address harvesters (unless it executes the JavaScript and actually traverses the DOM... but that's unlikely).

Include the following in a script tag on every page you need an email address link.

<div style="margin: 0px 100px 0px 100px; text-align:left;color:#000000; background-color:#ffffff; border:solid black 1px; padding:0.5em 1em 0.5em 1em; overflow:auto;font-size:small; font-family:monospace; "><span style="color:#881350;">function</span> <span style="color:#003369;">email_me</span>() &nbsp;&nbsp;&nbsp;&nbsp;{ window.location = <span style="color:#760f15;">&quot;mailto:&quot;</span> + <span style="color:#003369;">email_string</span>(); }<br />
<span style="color:#881350;">function</span> <span style="color:#003369;">email_string</span>() { <span style="color:#881350;">var</span> at = <span style="color:#760f15;">&quot;@&quot;</span>; <span style="color:#881350;">return</span> <span style="color:#760f15;">&quot;myemail&quot;</span> + at + <span style="color:#760f15;">&quot;mydomain.com&quot;</span>; }<br />
<span style="color:#881350;">function</span> <span style="color:#003369;">email_link</span>() &nbsp;&nbsp;{ document.<span style="color:#003369;">write</span>(<span style="color:#760f15;">&quot;&lt;a href=\&quot;#\&quot; onclick=\&quot;email_me(); return false;\&quot;&gt;&quot;</span> + <span style="color:#003369;">email_string</span>() + <span style="color:#760f15;">&quot;&lt;/a&gt;&quot;</span>); }</div>

Wherever you want an email address link, include the following:

<div style="margin: 0px 100px 0px 100px; text-align:left;color:#000000; background-color:#ffffff; border:solid black 1px; padding:0.5em 1em 0.5em 1em; overflow:auto;font-size:small; font-family:monospace; "><span style="color:#881280;">&lt;script </span><span style="color:#994500;">type</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;text/javascript&quot;</span><span style="color:#881280;">&gt;</span><span style="color:#003369;">email_link</span>();<span style="color:#881280;">&lt;/script&gt;</span></div>

Of course this will only work if the user has JavaScript enabled. You could also replace the "#" above with a link to a page alerting the user that they need to manually copy the email address into their email program.

Photo Proof Downloader
----------------------

This one has very few actual uses (one, in fact), but it's a proof of concept that could be applied to a number of things. Many event photography companies, such as the one present at my graduation, have websites where you can view proofs and order overpriced prints. They usually have some sort of weak "security" to keep people from downloading high resolution versions of their images, ranging from using JavaScript to disable right-clicking to simply only showing low resolution or watermarked photos.

This one in particular has a fancy "magnifier" that only lets you see a small portion of the image at a time. Here's a screenshot:

<a href="magnifier.jpg"><img src="magnifier.jpg" width="382" height="410" /></a>

Of course there's nothing stopping anyone from clicking each section of the image and pasting them all together, nor is there anything stopping me from writing a [little JavaScript application](downloader.html) to do it automatically.

It simply loops through each section of the image: downloading, cropping via CSS, and assembling them into one medium resolution image. This could be modified for similar sites by changing the dimensions and sizing parameters, etc. It as a few frivolous features like bookmarking and previous/next buttons as well.

[Photo Proof Downloader](downloader.html#26204436-03001-0263) - featuring myself as the model...