<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Zero Wind - Jamie Wong &#187; javascript</title>
	<atom:link href="http://jamie-wong.com/tag/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://jamie-wong.com</link>
	<description>Inside the mind of a Waterloo Software Engineering student</description>
	<lastBuildDate>Sun, 15 Aug 2010 05:25:49 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>JSONimal &#8211; Elegant DOM Contruction with jQuery</title>
		<link>http://jamie-wong.com/2010/07/16/jsonimal-elegant-dom-contruction-with-jquery/</link>
		<comments>http://jamie-wong.com/2010/07/16/jsonimal-elegant-dom-contruction-with-jquery/#comments</comments>
		<pubDate>Fri, 16 Jul 2010 15:57:43 +0000</pubDate>
		<dc:creator>Jamie Wong</dc:creator>
				<category><![CDATA[Projects]]></category>
		<category><![CDATA[github]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://jamie-wong.com/?p=342</guid>
		<description><![CDATA[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", [...]]]></description>
			<content:encoded><![CDATA[<p>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.</p>

<p>What's it do? This example should demonstrate my goal fairly well.</p>

<pre class='prettyprint'><code>$(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: "&lt;u&gt;a&lt;/u&gt;"}],
                    ["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");
});
</code></pre>

<p>Which will add this to the body:</p>

<h1>JSONimal!</h1>

<table style="border: 1px solid black;"><thead><tr style="text-transform: uppercase;"><th>one</th><th>two</th><th>three</th></tr></thead><tbody><tr><td><u>a</u></td><td>b</td><td>c</td></tr><tr><td><a href="http://www.google.ca">Google</a></td><td>b</td><td>c</td></tr><tr><td>a</td><td>b</td><td>c</td></tr></tbody></table>

<p>For more information and examples, check out the github page: <a href="http://github.com/phleet/JSONimal">JSONimal @ github</a>.</p>

<p>I also posted it as on the jQuery plugins page - but that just points to the github page anyway. <a href="http://plugins.jquery.com/project/jsonimal">JSONimal @ plugins.jquery.com</a></p>
]]></content:encoded>
			<wfw:commentRss>http://jamie-wong.com/2010/07/16/jsonimal-elegant-dom-contruction-with-jquery/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Omegle Voyeur &#8211; Multiple Connections</title>
		<link>http://jamie-wong.com/2009/11/14/omegle-voyeur-multiple-connections/</link>
		<comments>http://jamie-wong.com/2009/11/14/omegle-voyeur-multiple-connections/#comments</comments>
		<pubDate>Sat, 14 Nov 2009 09:52:12 +0000</pubDate>
		<dc:creator>Jamie Wong</dc:creator>
				<category><![CDATA[Projects]]></category>
		<category><![CDATA[AJAX]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[omegle]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[prototype]]></category>

		<guid isPermaLink="false">http://jamie-wong.com/me/?p=76</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>In case you haven't read the post about all my projects, here's a description of what Omegle Voyeur is:</p>

<blockquote>
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.
</blockquote>

<p>In terms of technology, Omegle Voyeur is primarily one big Javascript Prototype class. <a href='http://www.prototypejs.org/'>Prototype</a> 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.</p>

<p>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. <a href="http://curl.haxx.se/">cUrl</a> 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.</p>

<p>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.</p>


<div class="wp_codebox"><table style='width:99%;margin:0px;border:0;' ><tr id="p762"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
</pre></td><td class="code" id="p76code2"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?</span>
<span style="color: #666666; font-style: italic;">// Simple cUrl</span>
<span style="color: #666666; font-style: italic;">// Simple get and post requests </span>
<span style="color: #000000; font-weight: bold;">function</span> simple_get<span style="color: #009900;">&#40;</span><span style="color: #000088;">$url</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000088;">$c</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/curl_init"><span style="color: #990000;">curl_init</span></a><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <a href="http://www.php.net/curl_setopt"><span style="color: #990000;">curl_setopt</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$c</span><span style="color: #339933;">,</span> CURLOPT_URL<span style="color: #339933;">,</span> <span style="color: #000088;">$url</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <a href="http://www.php.net/curl_setopt"><span style="color: #990000;">curl_setopt</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$c</span><span style="color: #339933;">,</span> CURLOPT_RETURNTRANSFER<span style="color: #339933;">,</span> 1<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000088;">$result</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/curl_exec"><span style="color: #990000;">curl_exec</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$c</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <a href="http://www.php.net/curl_close"><span style="color: #990000;">curl_close</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$c</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #b1b100;">return</span> <span style="color: #000088;">$result</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">function</span> simple_post<span style="color: #009900;">&#40;</span><span style="color: #000088;">$url</span><span style="color: #339933;">,</span><span style="color: #000088;">$payload</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000088;">$c</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/curl_init"><span style="color: #990000;">curl_init</span></a><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <a href="http://www.php.net/curl_setopt"><span style="color: #990000;">curl_setopt</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$c</span><span style="color: #339933;">,</span> CURLOPT_URL<span style="color: #339933;">,</span> <span style="color: #000088;">$url</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <a href="http://www.php.net/curl_setopt"><span style="color: #990000;">curl_setopt</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$c</span><span style="color: #339933;">,</span> CURLOPT_POST<span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <a href="http://www.php.net/curl_setopt"><span style="color: #990000;">curl_setopt</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$c</span><span style="color: #339933;">,</span> CURLOPT_POSTFIELDS<span style="color: #339933;">,</span> <span style="color: #000088;">$payload</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <a href="http://www.php.net/curl_setopt"><span style="color: #990000;">curl_setopt</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$c</span><span style="color: #339933;">,</span> CURLOPT_RETURNTRANSFER<span style="color: #339933;">,</span> 1<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000088;">$result</span> <span style="color: #339933;">=</span> <a href="http://www.php.net/curl_exec"><span style="color: #990000;">curl_exec</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$c</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <a href="http://www.php.net/curl_close"><span style="color: #990000;">curl_close</span></a><span style="color: #009900;">&#40;</span><span style="color: #000088;">$c</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #b1b100;">return</span> <span style="color: #000088;">$result</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>


<p>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.</p>

<p>You can see the github for Omegle Voyeur here: <a href="http://github.com/phleet/Omegle-Voyeur">http://github.com/phleet/Omegle-Voyeur</a>
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.</p>

<p>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.</p>

<p><del datetime="2009-11-26T06:58:15+00:00">You can see the current running version here: <a href="/omegle/">Omegle Voyeur</a>.</del>
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 <a href="http://www.apachefriends.org/en/xampp.html">XAMPP</a> to run it locally.
For the time being, you can view it here: <a href="http://petersobot.com/omegle/">Omegle Voyeur</a></p>

<p>A quick note on how I figured out the Omegle communication protocol. 
The entire code governing the process is conveniently kept here: <a href="http://omegle.com/static/omegle.js?27">http://omegle.com/static/omegle.js?27</a>
Unless you enjoy reading 1000s of characters on a single line, you can use the <a href='http://jsbeautifier.org/'>JS Beautifier</a> to clean it up to a readable state.</p>
]]></content:encoded>
			<wfw:commentRss>http://jamie-wong.com/2009/11/14/omegle-voyeur-multiple-connections/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>ReBirth</title>
		<link>http://jamie-wong.com/2009/11/04/rebirth/</link>
		<comments>http://jamie-wong.com/2009/11/04/rebirth/#comments</comments>
		<pubDate>Thu, 05 Nov 2009 05:47:22 +0000</pubDate>
		<dc:creator>Jamie Wong</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[security]]></category>
		<category><![CDATA[start]]></category>
		<category><![CDATA[virus]]></category>
		<category><![CDATA[welcome]]></category>

		<guid isPermaLink="false">http://jamie-wong.com/me/?p=3</guid>
		<description><![CDATA[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.* [...]]]></description>
			<content:encoded><![CDATA[<p>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.</p>

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

<p>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.</p>
]]></content:encoded>
			<wfw:commentRss>http://jamie-wong.com/2009/11/04/rebirth/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
