What's it do? This example should demonstrate my goal fairly well.

$(function() {
    $.mktag("#demo").jsonimal([
        ["h1", {text: "JSONimal!"}],
        ["table",{style: 'border: 1px solid black'},[
            ["thead",[
                ["tr",{style: 'text-transform: uppercase'},[
                    ["th", {text: "one"}],
                    ["th", {text: "two"}],
                    ["th", {text: "three"}]
                ]]
            ]],
            ["tbody", [
                ["tr",[
                    ["td", {html: "<u>a</u>"}],
                    ["td", {text: "b"}],
                    ["td", {text: "c"}]
                ]],
                ["tr",[
                    ["td",[
                        ["a", {href: "http://www.google.ca", text: "Google"}]
                    ]],
                    ["td", {text: "b"}],
                    ["td", {text: "c"}]
                ]],
                ["tr",[
                    ["td", {text: "a"}],
                    ["td", {text: "b"}],
                    ["td", {text: "c"}]
                ]]
            ]]
        ]]
    ]).appendTo("body");
});

Which will add this to the body:

JSONimal!

For more information and examples, check out the github page: JSONimal @ github.

I also posted it as on the jQuery plugins page - but that just points to the github page anyway. JSONimal @ plugins.jquery.com

The other thing I implemented was a way of knowing when Omegle is blocking requests. They have a more robust form of detection now - it isn't just manual IP ban. Once you request too many things from them too fast, they start requesting a captcha. Locally, this isn't a problem - I simply embed an iframe with Omegle in it and provide instructions to the user. Hosted, this is a more troublesome problem, since the captcha is directed towards an IP, so it must be responded to from that IP. I have no solution to this problem at the moment, but I'm going to look into implementing the whole thing using Greasemonkey so this isn't an issue at all.

For now, you can see the latest version here: Omegle Voyeur. Don't be surprised if it's down, and please go grab your own copy: Omegle-Voyeur @ github.

Now on to the customary technical concept to go along with my own self promotion.

AJAX Method Callbacks

While passing functions as arguments is a pretty standard thing among almost all languages, attempting to pass methods of specific instances as arguments in Javascript presents an interesting problem. Consider the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function car(price) {
    this.price = price;
 
    this.setPrice = function(price) {
        this.price = price;
    };
}
 
function pass666(func) {
    func(666);
}
 
var redcar = new car(2000);
alert(redcar.price);
redcar.setPrice(123);
alert(redcar.price);
pass666(redcar.setPrice);
alert(redcar.price);

As you might expect, the first two alerts will say 2000 and 123 respectively. But the last one also says 123. Why? It all has to do with what "this" refers to. Both in the initialization of redcar and the modifier call redcar.setPrice, "this" refers to the instance of the function car given the identifier name "redcar". In the pass666 version, "this" refers to the function pass666. As a result, it does nothing to modify the properties of the car because it isn't told anything about redcar.

One way to fix this is to use a placeholder variable. I used "self". Change the definition of car to the following yields the desired result.

1
2
3
4
5
6
7
8

function car(price) {
	this.price = price;
 
	var self = this;
	this.setPrice = function(price) {
		self.price = price;
	};
}

In this example, it's difficult to see why you would ever want to use this in the first place. The reason I encountered this problem is my need to use instance methods as callback functions for AJAX calls. Here's an excerpt of the jQuery version of Omegle Voyeur to see what I'm talking about.

106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

sendQuery: function(target,respFunc) {
	// Send a query to the omegle server
	//log('sending');
	var self = this;
	if (respFunc == null) {
		respFunc = function(self,data) {}
	}
	$.ajax({
		url: 'omegle.php?'+target,
		type: 'GET',
		dataType: 'json',
		success: function(data) {
			respFunc(self,data);
		}
	});
},

Sending a request to the Omegle server is a very common task in Omegle Voyeur, so I wanted all the AJAX requests leaving from the same method. This means I have to accept the callback function as a parameter. I've written all the callback methods to accept a parameter "self" which will refer to the instance of interest.

This aspect is one of the many things that makes Prototype's class system superior to jQuery's. However, since jQuery makes a lot of other things nicer and the two libraries don't play together very well, I decided to port over to jQuery nonetheless. In Prototype, there's a function called bind (not to be confused with jQuery's bind which does something completely different,) which solves this problem elegantly.

To fix the redcar problem with the aid of Prototype without having to use a placeholder variable, you can use bind like so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function car(price) {
    this.price = price;
 
    this.setPrice = function(price) {
        this.price = price;
    };
}
 
function pass666(func) {
    func(666);
}
 
var redcar = new car(2000);
alert(redcar.price);
redcar.setPrice(123);
alert(redcar.price);
 
pass666(redcar.setPrice.bind(redcar));
 
alert(redcar.price);

The line

18

pass666(redcar.setPrice.bind(redcar));

is what makes this work out. We're explicitly saying that we want setPrice executed from the scope of the instance.

If I ever have to hire someone for a web development job, I'll be sure to ask something about this.

I, like many (most) Waterloo Co-op students, am forced to use Jobmine and am extremely dissatisfied with its functionality. So I decided to kill three birds with one stone: improve Jobmine, learn Greasemonkey and learn jQuery all at the same time.

The result is, unsurprisingly, a Greasemonkey script written using jQuery that improves on some features of Jobmine.

Features

• Table sorting - all major tables are now sortable (Interviews, Job Short List, Applications)
• Improved navigation - no more Student -> Use ridiculousness
• No more frames - you can refresh and it will stay on the same page!
• Colour highlighting for tables - pictured above, you see the applications page with various statuses highlighted. Selected is green, not selected is red.
• No more spacers - the Jobmine page is riddled with spacer images just sitting there, stealing screen real estate

How to Install You'll either need Firefox & Greasemonkey, or a recent build of Chrome (Windows only?). You can get Greasemonkey here: Greasemonkey @ addons.mozilla.org

Once you've done that, navigate to the script and click install. You can get the script here: Jobmine Upgrade @ userscripts.org

Now for the part where I explain the tech I used.

Greasemonkey

Greasemonkey is a tool for customizing the way a web page displays and interacts using javascript. More or less, it overlays javascript you write on top of pages you specify by URLs with wildcards (*). It doesn't overlay it directly, but wraps it in some way as to prevent it from messing things up in the global scope. It also seems to run once the page is done loading, not when the page head is loaded. There are plenty of tutorials out there for doing cool stuff with Greasemonkey, but I started here: Dive into Greasemonkey. I know it says it's hideously outdated, but the metadata information it provides is still good enough. If you want more up to date information, go here: GreaseSpot (Greasemonkey Wiki).

jQuery

jQuery is a javascript framework specifically designed for doing things involving the DOM tree absurdly quickly. Example: highlighting alternating rows of a table (zebra-striping).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// Standard Javascript method:
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
    var rows = tables[i].tBodies[0].rows;
    for (var j = 0; j < rows.length; j++) {
        var rowColor;
        if (j % 2 == 1) {
            rowColor = "#eef"; 
        } else {
            rowColor = "#fff";
        }
 
        var cells = rows[j].cells;
        for (var k = 0; k < cells.length; k++) {
            cells[k].style.backgroundColor = rowColor;
            cells[k].style.borderBottom = "1px solid #ccc";
        }
    }
} 
 
// jQuery way:
$("td").css("border-bottom","1px solid #ccc");
$("tr:even > td").css("background-color","#fff");
$("tr:odd > td").css("background-color","#eef");

Now before someone says it, I know usually you can set the background-color for the whole row, and the cells will inherit it. But since, for some crazy reason, each cell is assigned a background colour on Jobmine, each cell needs to be set individually. In any case, you can see that things are made substantially easier with jQuery. I figured out jQuery mostly just using the API and looking at other people's code, but this is a decent place to start: Getting Started with jQuery.

For the table sorting functionality, I decided to use a jQuery plugin as opposed to write my own (I'd rather be able to distribute this sooner). You can read all about it here: jQuery Plugin: Tablesorter 2.0

What features do you want to see in this? By the way, the source is all available on the userscripts site, so feel free to tinker with it yourself.

EDIT: As Trevor points out, the script in its current state won't work in Chrome due to the @require. You can grab his fix to make it work in chrome here: Jobmine Improved (Chrome)

Near the end of the semester, I was getting kind of tired of navigating UW-ACE so frequently through my browsing and opening all the different tabs to grab all the files I wanted. While all the pretty graphics make for a decent user interface, it reduces the speed of the service.

But aside from that, I like being able to do as much as I possibly can from the console.

So I made a Command Line Interface (CLI) for UW-ACE in php using cUrl. I built in on my Macbook Pro in Snow Leopard, but it should work just fine on any *nix machine, and possibly in Cygwin or other emulators.

As always, source is available on github: UWAngel-CLI @ Github.

Since I always like to post snippets of code from my projects that may be universally useful, I'll do that here too.

CLI Colour in PHP cli_colours.php included in the UWAngel-CLI source is just a collection of constants which allow you to print out colours in your CLI scripts.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<?
$COLOR_BLACK = "\033[0;30m";
$COLOR_DARKGRAY = "\033[1;30m";
$COLOR_BLUE = "\033[0;34m";
$COLOR_LIGHTBLUE = "\033[1;34m";
$COLOR_GREEN = "\033[0;32m";
$COLOR_LIGHTGREEN = "\033[1;32m";
$COLOR_CYAN = "\033[0;36m";
$COLOR_LIGHTCYAN = "\033[1;36m";
$COLOR_RED = "\033[0;31m";
$COLOR_LIGHTRED = "\033[1;31m";
$COLOR_PURPLE = "\033[0;35m";
$COLOR_LIGHTPURPLE = "\033[1;35m";
$COLOR_BROWN = "\033[0;33m";
$COLOR_YELLOW = "\033[1;33m";
$COLOR_LIGHTGRAY = "\033[0;37m";
$COLOR_WHITE = "\033[1;37m";
$COLOR_DEFAULT = "\033[0;37m";
 
echo <<< EOT
One fish, 
two fish, 
{$COLOR_RED}red{$COLOR_DEFAULT} fish, 
{$COLOR_BLUE}blue{$COLOR_DEFAULT} fish.
 
EOT;
?>

The only gripe I have about this is that COLOR_DEFAULT it's the same colour as I have on by default in iTerm. Anyone know the escape code to make it actually revert to what it was before instead of just making an assumption about what color is being used?

Hide Commandline Input One of the first things I looked up when I started this project today was how to hide user input from the command line. I sure as hell didn't want people typing their passwords for UWACE on screen and having it actually display. It turns out you can do this by temporarily telling your TTY to stop echoing what you type. The command for this is "stty -echo" and can be re-enabled using "stty echo". Below is how I implemented as part of the AngelAccess class to meet my needs.

1
2
3
4
5
6
7
8
9
10
11

 function Prompt($prompt_text,$hide = false) {
     echo $prompt_text;
     $input = "";
     if ($hide) {
         $input = trim(`stty -echo;head -n1;stty echo`);
         echo "\n";
     } else {
         $input = trim(fgets(STDIN));
     }
     return $input;
 }

As a complete side note, thanks to a boot-camped installation of Windows 7 (or at least I'm fairly sure that's the culprit,) my Macbook Pro is now stuck on Digital Out. This means I can't use the internal speakers on my computer under Mac OS X. Well... what I should say is that I can't use them without some annoying tricks. If I plug in my headphones, then tell my mac to use the input jack for audio input, then my internal speakers appear under the output options and let me use them. The speakers then work perfectly fine. They also work fine under Windows 7. A direct side effect of digital out being stuck on is a read light emanating from the audio jack.

The problem is apparently fairly common, unfortunately the only confirmed fixes for it are sending it back to Apple or wiggling a toothpick around in the audio jack. I had absolutely no luck with the toothpick, or precision screwdriver, or pen cartridge, or paintbrush handle. If anyone knows how to fix this problem, I would love to know. Otherwise, I'm just going to take it into the Apple store in Rideau some time this week and hope they can fix the problem. I really don't want to have to send my Mac in during my first week at Velocity.

Before I even explain what Conway's Game of Life is, be amused by the below, generated animation:

As always, the code I'm using here is open source: Game Of Life @ Github. In addition to the source code, there's also a few animation demos such as the one above.

Conway's Game of Life is a cellular automaton following very simple rules, as outlined in the Wikipedia article.It is a zero player game played on a 2 dimensional grid of squares, each holding either a state of dead or alive. The state of any cell is dependent on the state of the 8 cells neighbouring it in the previous generation. There are only 4 rules.

From the Wikipedia article Conway's Game of Life:

1. Any live cell with fewer than two live neighbours dies, as if caused by underpopulation. 2. Any live cell with more than three live neighbours dies, as if by overcrowding. 3. Any live cell with two or three live neighbours lives on to the next generation. 4. Any dead cell with exactly three live neighbours becomes a live cell.

The colours you see in the above animation represent the alive status of each cell and also how many neighbours that cell has if it's alive.

This project is my first time making use of two utilities: optparse in python, and gifsicle.

optparse is a python library designed to make the creation of command line application much simpler. Specifically it's targeted towards making application with many possible flags easy to maintain. lifeImage.py falls into this category. From the commandline, you can control the source of input, the colour scheme, the number of generations to output, the scaling of the image and various other things to produce the exact animation or image you want.

You can take a look at optparse here: optparse @ docs.python.org. The tutorial included there was enough for me to create this application.

gifsicle is a command line application for the creation and modification of animated gifs. It can create gifs out of a sequence of images, convert an image into a sequence of images, or even modify replace a single frame of an animated gif with an external image.

You can see and download gifsicle here: Official Gifsicle Page

Why did I use gifsicle instead of the much more universal convert in ImageMagick? Simply put: gifsicle is faster. If someone would like to do a benchmark to (dis)prove this, I'd be happy to post the results, but from simple experimentation, it seemed obvious to me that gifsicle took less time to make the animation.

What's Next? Now that I have a working command line utility, my next goal is to make an AJAX powered web interface for the thing. This might explain why I have ProcMonitor in the github for Game of Life. The web interface was another key motivator behind using gifs for the output medium. People may want to use these things for avatar, and they're simply easier to share and move around than a java applet, or a flash swf, or some database stored simulation. It also helps that gifs are designed for palette based images, which works out nicely for optimizing the file size of these animations. The first 1000 generations of acorn is 2.5 MB as it is.

Another thing I want to do is make lifeImage.py read the .cells format from the Life Lexicon. This would save me a lot of time having to code all the states myself. This will be a very straightforward process, as the .cells files are simply plaintext with 2 lines of header.

Suggestions/bug fixes for my implementation of Game of Life are welcomed.

I'm almost 100% sure that some combination of the command line flags of lifeImage.py don't work nicely together, and would like to know what they are.

Omegle is a website where you are connected to a stranger for a chat. It is dominated mostly by trolls whose primary purpose is to coerce you into a cyber session and then switch genders or to make you lose the game. Talking to these people is a rather tiresome endeavour, but seeing exactly what happens in these conversations is interesting. Omegle Voyeur is a way of watching a conversation which you aren't part of. What Voyeur does is form two simultaneous connections and then pass the input of one to the output of the other. This sets you up as a conversation proxy, allowing you to watch. Currently, this is exclusively a "sit and watch" program. Later I intend to add functionality to add more than 2 people into a conversation, automatically name the participants so it will be obvious that there are more than 2 people in the conversation, and allow the ability to interfere (mute participants/say things yourself) with a conversation. This concept was spawned during discussion (read: boredom) at CCC Stage 2, 2009.

In terms of technology, Omegle Voyeur is primarily one big Javascript Prototype class. Prototype is a Javascript Framework which makes the creation and maintenance of classes, conversion of data into JSON for transfer, and sending AJAX requests much, much easier.

There's also a very small bit of code in php which is able to be so short because it uses the incredible program cUrl. cUrl is a command line utility for grabbing data from websites using their URL. libcurl facilititates the use of curl in php without having to write your own wrapper.

Below is some php code I use to make curl even easier than it already is. simple_get($url) will return the HTTP GET result from the url specified. simple_post works similarly, but delivers data using the payload.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?
// Simple cUrl
// Simple get and post requests 
function simple_get($url) {
    $c = curl_init();
    curl_setopt($c, CURLOPT_URL, $url);
    curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
    $result = curl_exec($c);
    curl_close($c);
    return $result;
}
 
function simple_post($url,$payload) {
    $c = curl_init();
    curl_setopt($c, CURLOPT_URL, $url);
    curl_setopt($c, CURLOPT_POST, true);
    curl_setopt($c, CURLOPT_POSTFIELDS, $payload);
    curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
    $result = curl_exec($c);
    curl_close($c);
    return $result;
}
?>

When I started working on this project today (well, I suppose that would be last night now... wonder if I'll see the sunrise) I figured it would be a good time to get used to using git, so I made a repository using github. So far I'm enjoying git. Everything seems to act pretty much the way you'd expect to, and I already had to do a revert once I realized my logic was wrong for the way I was structuring my code.

You can see the github for Omegle Voyeur here: http://github.com/phleet/Omegle-Voyeur Feel free to design your own stuff with the all the code there - just be sure to link back here, or to the github page.

In any case, the thing the majority of the people reading this are probably interested in are the result. Things I've updated since last time are primarily aesthetic and behind the scenes, but I did add the ability to connect one person to more than one other person, and the connections don't have to be mutual. In the first 3 way conversation example, 1 can only speak to 2, 2 can only speak to 3 and 3 can only speak to 1. It leads to some rather confused people.

You can see the current running version here: Omegle Voyeur. EDIT: It seems that after being posted on reddit, omegle has (manually?) IP blocked me. The source should still work, so feel free to try it out yourself. You can go grab XAMPP to run it locally. For the time being, you can view it here: Omegle Voyeur

A quick note on how I figured out the Omegle communication protocol. The entire code governing the process is conveniently kept here: http://omegle.com/static/omegle.js?27 Unless you enjoy reading 1000s of characters on a single line, you can use the JS Beautifier to clean it up to a readable state.

Projects in Progress (Read: on Hiatus)

• Budgyt When I came to University, I had to start considering how I was going to handle budgeting. There was a bunch of free software available all over the place which let you enter in all your expenses and get summaries of that data. The problem with many of these pieces of software was the extreme tedium associated with entering in all your transactions. It normally meant many many mouse clicks, which I would rather avoid. Budgyt was my solution to this. The idea behind it was to construct a web based application in which transaction entry could be done with only a few presses of keyboard keys. Instead of selecting menus and click "next", you would simply have to hit a hotkey associated with each category of menu. After seeing how some banks (TD) provide transactions as downloadable CSV files, it would be great to incorporate those somehow. This project is in the early development phase and I may restart it, since the code for it is a little messy at the moment.
• Omegle Voyeur Omegle is a website where you are connected to a stranger for a chat. It is dominated mostly by trolls whose primary purpose is to coerce you into a cyber session and then switch genders or to make you lose the game. Talking to these people is a rather tiresome endeavour, but seeing exactly what happens in these conversations is interesting. Omegle Voyeur is a way of watching a conversation which you aren't part of. What Voyeur does is form two simultaneous connections and then pass the input of one to the output of the other. This sets you up as a conversation proxy, allowing you to watch. Currently, this is exclusively a "sit and watch" program. Later I intend to add functionality to add more than 2 people into a conversation, automatically name the participants so it will be obvious that there are more than 2 people in the conversation, and allow the ability to interfere (mute participants/say things yourself) with a conversation. This concept was spawned during discussion (read: boredom) at CCC Stage 2, 2009. You can see the current project here: Omegle Voyeur
• wwwpaper This idea came about when I was looking at desktop customization options like Rainmeter and Samurize (website down at the time of the post.) The really really cool thing about these applications was not only the basic abilities provided by them such as analog clocks and calendars, but the ability to modify them and add cool things like frequently updating website information retrieved via regular expressions. I wanted something that would be even more customizable and more web integrated. The idea was to make a website full of widgets which could be used as an active desktop. In Windows, this means using a website as your wallpaper - hence the name wwwpaper. I began working on this to do various things, but this was heavily damaged when the gumblar.cn virus came around. The idea was to provide users with accounts which they could log into which would load up all of their widgets on their desktop. This way, they could switch between computers with NO change to the setup of their widgets, so long as they had the same URL set up as their active desktop.

Past Projects (Finished/Need Restarting)

• Kwizr Something I started back in grade 10 because I was tiring of studying for French vocabulary tests by staring at a huge list of words. Kwizr (originally Quizulator) was my way of making this process less excruciating. It would take input as a CSV file containing columns with common elements. In the case of French vocab, column 1 would contain French words and column 2 would contain English words. These would be plugged in to user defined expressions, causing the quizzing program to ask "How to you say _____ in French?" or "Comment dit-on ______ en Anglais?". This data would be stored in a MySQL database. The program would quiz the user via an AJAX prompt, in which they would type in answers and the program would give immediate feedback of "correct" or "wrong answer". If the answer was wrong, it would spit out the correct answer. I had this whole system working fairly well, but unfortunately it was on a friend's server when their hosting service went under. Should have backed it up. I need to restart this project anyway, because the way I read the CVS data didn't follow the real CVS standard - which I didn't know existed when I started working on it.
• ASCII Converter Picture to image converters are by no means a new idea on the internet. The thing I didn't like about many of them was the inability to modify settings on the fly. If you made a mistake in settings at the beginning, you couldn't modify them without restarting. Also, some of them cheated and simply coloured individual characters. I wanted to make a much more comprehensive system which would scale the image, use an ASCII gradient, and allow the user to grab the source code without actually having to go to "view source". The result can be seen here: ASCII Convert

Future Projects/Concepts

• WXML One of the reasons I'm so fond of web applications is the code structure used to make them. The complete separation of backend processing and user interface, and the construction of the user interface using markup greatly appeals to me. The real power comes from the interaction of these two things, such as running some javascript script when a certain triggering event happens - like a key press. I want to build something that provides this power and structure to the desktop. I want to have some custom defined XML files that will create a GUI and have an instruction set for handling events. So I want to implement functionality similar to the HTML/Javascript code of
  <input type='button' value='click me' onclick='solve()' />
  in desktop computing. This is in the future projects/concepts section because I haven't yet planned on how exactly I would want to go about implementing this, but I'm leaning towards a python implementation using TkInter or wxPython.
• Learning Alarm Clock This concept came about in a discussion with David Hu on the way to the 2009 ACM Regionals at McMaster University. I, personally, am a horrible abuser of the snooze button. I've heard of various solutions to this, like the Puzzle Alarm Clock, but I wanted to take a slightly different route. The discussion started with the idea that you could have a Rubik's Cube alarm clock which would not turn off until it was solved. The idea was that you would have to wake up to be able to do it. But what if you eventually got SO good at it that you could do it in your sleep, thereby reverting to the cycle of snooze abuse. Well, that would mean that you were learn how to solve it really really fast. Now apply this concept to learning to do something else. Problem: I can't wake up in the morning and linear algebra is roundhouse kicking me in the face. Solution: Make your alarm stay on until you can diagonalize a matrix successfully. Problems would be randomly generated following a certain template, so you would have new input every morning. Continue solving the same variety of problems every morning until you can solve the problem instinctively, as a matter of urgency. Granted, this might make you panic even more on midterms - but atleast you'll be correctly solving problems while panicking.

So these are my ghosts of projects past, present and future.

Have you heard of any of these projects being implemented by anyone else? Are any of these problems already solved somehow? Which of these projects are you most interested in seeing completed/updated?