<?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>GenevaJS</title>
	<atom:link href="http://genevajs.com/blog/feed" rel="self" type="application/rss+xml" />
	<link>http://genevajs.com/blog</link>
	<description>Development/Announcements</description>
	<lastBuildDate>Mon, 14 Sep 2009 21:31:16 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>PollenJS: Javascript Web Workers Library</title>
		<link>http://genevajs.com/blog/pollenjs-javascript-web-workers-library</link>
		<comments>http://genevajs.com/blog/pollenjs-javascript-web-workers-library#comments</comments>
		<pubDate>Mon, 14 Sep 2009 21:31:16 +0000</pubDate>
		<dc:creator>Rick Waldron</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://genevajs.com/blog/?p=24</guid>
		<description><![CDATA[As a follow up to my previous post regarding Javascript Web Workers, I&#8217;m pleased to announce the release of PollenJS, the first worker-specific javascript library:
PollenJS on github
PollenJS offers the following:
Utility Methods
fn
trim
each
to_array
in_array
clone
last
unique
merge
filter
map
keys
values
isArr
isFn
isStr
isNum
isUndef
isNull
extend
JSON Methods
stringify
parse
decode
encode
AJAX Methods
getJSON
get
post
Most of these might look familiar. A lot of the naming conventions were adopted from popular libraries to make learning/using PollenJS as easy [...]]]></description>
			<content:encoded><![CDATA[<p>As a follow up to my previous post regarding <a href="http://genevajs.com/blog/new-worker-expanding-capabilities-of-javascript-web-workers">Javascript Web Workers</a>, I&#8217;m pleased to announce the release of PollenJS, the first worker-specific javascript library:</p>
<p><a href="http://github.com/rwldrn/Pollen.JS">PollenJS on github</a></p>
<p>PollenJS offers the following:</p>
<p><strong>Utility Methods</strong><br />
fn<br />
trim<br />
each<br />
to_array<br />
in_array<br />
clone<br />
last<br />
unique<br />
merge<br />
filter<br />
map<br />
keys<br />
values<br />
isArr<br />
isFn<br />
isStr<br />
isNum<br />
isUndef<br />
isNull<br />
extend</p>
<p><strong>JSON Methods</strong><br />
stringify<br />
parse<br />
decode<br />
encode</p>
<p><strong>AJAX Methods</strong><br />
getJSON<br />
get<br />
post</p>
<p>Most of these might look familiar. A lot of the naming conventions were adopted from popular libraries to make learning/using PollenJS as easy as possible.</p>
<p>Proper documentation to follow.</p>
]]></content:encoded>
			<wfw:commentRss>http://genevajs.com/blog/pollenjs-javascript-web-workers-library/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Expanding Capabilities of Javascript Web Workers</title>
		<link>http://genevajs.com/blog/new-worker-expanding-capabilities-of-javascript-web-workers</link>
		<comments>http://genevajs.com/blog/new-worker-expanding-capabilities-of-javascript-web-workers#comments</comments>
		<pubDate>Sun, 26 Jul 2009 19:49:03 +0000</pubDate>
		<dc:creator>Rick Waldron</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Chrome]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Safari]]></category>
		<category><![CDATA[w3c]]></category>
		<category><![CDATA[Web Workers]]></category>

		<guid isPermaLink="false">http://genevajs.com/blog/?p=3</guid>
		<description><![CDATA[Yesterday, I was introduced to Javascript Web Workers during a bad-ass FireBug console hack-session with Al MacDonald (http://hyper-metrix.com). I have to say&#8230; this is the coolest thing I&#8217;ve seen in a very long time&#8230; Workers are currently available in FireFox 3.5, Safari 4 and (according to John Resig) the Chromium Nightlies.
I&#8217;d like to consider this [...]]]></description>
			<content:encoded><![CDATA[<p>Yesterday, I was introduced to <a title="Javascript Web Workers" href="https://developer.mozilla.org/En/Using_DOM_workers" target="_blank">Javascript Web Workers</a> during a bad-ass FireBug console hack-session with <a href="http://twitter.com/F1LT3R">Al MacDonald</a> (<a href="http://hyper-metrix.com">http://hyper-metrix.com</a>). I have to say&#8230; this is the coolest thing I&#8217;ve seen in a very long time&#8230; Workers are currently available in FireFox 3.5, Safari 4 and (according to <a href="http://ejohn.org">John Resig</a>) the <a href="http://build.chromium.org/buildbot/waterfall/console">Chromium Nightlies</a>.</p>
<p>I&#8217;d like to consider this article more of an &#8220;advanced&#8221; web workers topic, so I&#8217;ll skip the explanation of the basic introduction to web workers and simply give you the files to begin with: <a href="http://genevajs.com/misc/workers/workers-simple.zip">download workers-simple.zip</a></p>
<p>Unzip this and drop it into your locahost. Open all the files and review them. If you want more information about what you&#8217;re looking at, have a gander at <a href="http://ejohn.org/blog/web-workers/">this</a>. If you&#8217;re ready to really kick out the jam, then keep reading.</p>
<p>You might have already been saying to yourself &#8220;what the hell can I do with this in the real world?&#8221; and the answer is not much &#8211; except for reporting the current time over and over again. So let&#8217;s turbo-charge this worker.</p>
<p>First things first&#8230; scripts called by the Worker object do have <strong>XMLHttpRequest</strong>, but who wants to copy/paste or rewrite their XHR methods into EVERY worker script? Not me, that&#8217;s for sure. But now we&#8217;re faced with the challenge of getting external files into our worker script. This part is shockingly simple. Ready? GO!</p>
<ol>
<li>Open index.php:
<ul>
<li>Line 9, replace:

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javscript" style="font-family:monospace;">var worker = new Worker('worker.js');</pre></td></tr></table></div>

<p>&#8230;with&#8230;</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javscript" style="font-family:monospace;">var worker = new Worker('worker.js.php');</pre></td></tr></table></div>

</li>
<li>Line 14, add:

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#post'</span><span style="color: #009900;">&#41;</span>
    .<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      worker.<span style="color: #660066;">postMessage</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'load'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

</li>
</ul>
</li>
<li>Open worker.js and at the top of the file, add this:

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #990000;">header</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Content-type: text/javascript'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

</li>
<li>Now, save-as &#8220;worker.js.php&#8221;.</li>
</ol>
<p>Great! Now let&#8217;s add a small ajax library&#8230; (get that <a href="http://genevajs.com/misc/workers/waycool/ajax.js">here</a>)</p>
<ol>
<li>In <strong>worker.js.php</strong>, add an include to <strong>ajax.js</strong> below the header() call, it will look like this:

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #990000;">header</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'Content-type: text/javascript'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">include</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'ajax.js'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></td></tr></table></div>

</li>
<li>At the bottom of the script, add in the following:

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//  Recieve data FROM the client with postMessage()</span>
onmessage <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
  <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> event.<span style="color: #660066;">data</span> <span style="color: #339933;">===</span> <span style="color: #3366CC;">'load'</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    postMessage<span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">'-----BEGIN TRANSMISSION-----'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    postMessage<span style="color: #009900;">&#40;</span> <span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'server_objects'</span><span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#125;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    $.<span style="color: #660066;">ajax</span>.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span> 
      url<span style="color: #339933;">:</span> <span style="color: #3366CC;">'xhr_test_content.txt'</span><span style="color: #339933;">,</span> 
      callback<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>response<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> 
        <span style="color: #003366; font-weight: bold;">var</span> text <span style="color: #339933;">=</span> response.<span style="color: #660066;">text</span><span style="color: #339933;">;</span> 
&nbsp;
        postMessage<span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">'AJAX GET RETURNED: '</span> <span style="color: #339933;">+</span> text <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span> 
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>    
    postMessage<span style="color: #009900;">&#40;</span> <span style="color: #3366CC;">'-----END TRANSMISSION-------'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

</li>
</ol>
<p>Back to index.php&#8230;</p>
<ol>
<li>Inside the body, add this:

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="html" style="font-family:monospace;">&lt;input type=button id=&quot;post&quot; value=&quot;post back to server&quot;&gt;</pre></td></tr></table></div>

</li>
</ol>
<p>Create a new file called &#8220;xhr_test_content.txt&#8221; And put whatever you want in it (or&#8230; challenge yourself and make it a PHP file that gets some kind of data from a db&#8230; )</p>
<p>Lastly&#8230; open your new index.php file in FireFox 3.5, fire up the console and let it rip. Click your new button to see what it returns.</p>
<p>If I missed something in my steps, you can always download the finished the code and run it yourself in its complete form. <a href="http://genevajs.com/misc/workers/workers-waycool.zip">Download Completed Source Here</a> </p>
<p>Check out the demos:<br />
<a href="http://genevajs.com/misc/workers/simple">Simple</a><br />
<a href="http://genevajs.com/misc/workers/waycool">Waycool</a></p>
]]></content:encoded>
			<wfw:commentRss>http://genevajs.com/blog/new-worker-expanding-capabilities-of-javascript-web-workers/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
	</channel>
</rss>
