Zero Wind – Jamie Wong Inside the mind of a Waterloo Software Engineering student

16Jul/104

JSONimal – Elegant DOM Contruction with jQuery

Occasionally for Javascript projects, I found myself building a lot of HTML programatically, and I wasn't satisfied with any of the techniques available, so I built JSONimal. I was originally going to just call it JSONML, but that was taken.

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!

onetwothree
abc
Googlebc
abc

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

14Nov/091

Omegle Voyeur – Multiple Connections

In case you haven't read the post about all my projects, here's a description of what Omegle Voyeur is:

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.

4Nov/090

ReBirth

This post marks the birth of yet another website I will inevitably use for about a year then run out of time and stop updating. Hopefully this one won't get eaten by a worm like the last one though. Stupid obscure javascript vulnerability.

The virus that owned the old site (along with every other index.* on my webspace) was a variant of the Gumblar.cn virus http://blog.unmaskparasites.com/2009/05/07/gumblar-cn-exploit-12-facts-about-this-injected-script/

It infected my computer just by visiting a site, found my stored ftp credentials from FileZilla (teaches me not to store my passwords), logged into my webspace and proceeded to modify any index.* file. Very evil, very clever virus. Right on that tipping point between me being impressed and me being horrified.