While there are a few different examples of this effect that I could have used, I was after something straight-forward and lightweight with clear separation of design (CSS) and presentation logic (JavaScript).

function DialogOverlay(content, container) {
 
	// Manage arguments and assign defaults,
	if (typeof container == 'undefined' ) container = document.body;
	if (null == (this.container = $(container))) throw("container is not valid");
 
	// Assign instance variables
	this.content = content;
	this.overlay = new Element('div', { 'class': 'overlay' }).hide();
	this.dialog = new Element('div', { 'class': 'dialog' }).hide();
 
	// Hide the overlay when clicked. Ignore clicks on the dialog.
	Event.observe(this.overlay, 'click', this.hide.bindAsEventListener(this));
	Event.observe(this.dialog, 'click',  function(event) { Event.stop(event) });
 
	// Insert the elements into the DOM
	this.dialog.insert(this.content);
	this.container.insert(this.overlay);
	this.container.insert(this.dialog);
 
	// Content may have been hidden if it is embedded in the page
	content.show();
	this.dialog.hide();
}
 
DialogOverlay.prototype.show = function() {
	new Effect.Appear(this.overlay, { duration: 0.5,  to: 0.8 });
	this.dialog.show();
	return this;
};
DialogOverlay.prototype.hide = function(event) {
	this.dialog.hide();
	this.overlay.hide();
	return this;
};

Adding a dialogue object to your page is simple:

<script type="text/javascript">
	var dialog = new Element('div');
	dialog.insert(new Element('h2').insert('Dialogue'));
	var overlay = new DialogOverlay(dialog);
</script>

In addition, you'll need some CSS to control the presentation of the overlay and dialogue box:

.overlay {
	width: 100%;
	height: 100%;
	background: black;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 98;
}
.dialog {
	width: 50%;
	min-height: 50%;
	background: white;
	position: fixed;
	top: 25%;
	left: 25%;
	z-index: 99;
}

I uploaded the JavaScript class (overlay.js) and made a quick example page to show it working.

AddHandler cgi-script .rb
Options +ExecCGI

Note: these directives can (and should) be specified in the Apache sites configuration file if you have permission to edit it.

To test that files in the created directory are being properly executed, copy (or download) the following code into a file named test.rb within the directory:

#!/usr/bin/env ruby
require "cgi"
cgi = CGI.new("html4")
cgi.out{
  cgi.html{
    cgi.head{ "\n"+cgi.title{"Ruby is working!"} } +
    cgi.body{ "\n"+
      cgi.h1 { "Ruby is working!" } + "\n"+
      cgi.p { "Now it's time to get on with some real work." }
    }
  }
}

Change the permissions on your file so that it is executable (chmod 774 should work fine) and visit the page you created (e.g. http://example.com/ruby/test.rb) with a web browser.

Hopefully, you should see a successful Ruby test page.

Obviously, the first thing I needed was a QR Code generator and I set about creating one using rQRCode (a Ruby library for encoding QR Codes, developed by Duncan Robertson) and RMagick (a Ruby interface to the ImageMagick image processing libraries).

To output the QR Code as an image, I created a class, QRImage, that extends Magick::Image and then used the following code to output the image to a file:

# QR Code parameters
text = 'http://mattroper.co.uk/'
size = 3
level = 'h'
 
# Produce the QR Code
require 'rubygems'
require 'rqrcode'
qr = RQRCode::QRCode.new(text,  :size => size, :level => level)
 
# Create the image and double its size
require 'qr_image'
img = QRImage.new(qr).sample(2)
 
# Write image to disk
img.write('/home/matt/Desktop/qr.png') { quality = 100 }

To help us understand the code changes that had been made by several different developers over a number of years, I wrote a simple Subversion log viewer to extract the logs and output them to a spreadsheet.

The spreadsheet format allowed non-technical staff to identify why modifications were made and was useful in identifying which features and bugfixes would need to be reimplemented by the development team.

I have made the simple Subversion log viewer and Java source code available on Google Code.