<?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>Madarco DevBlog &#187; Javascript</title>
	<atom:link href="http://blog.madarco.net/category/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.madarco.net</link>
	<description>on Flash, Java, Webdesign</description>
	<lastBuildDate>Mon, 03 Aug 2009 08:23:15 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Continuations are the new threads</title>
		<link>http://blog.madarco.net/76/continuations-are-the-new-threads/</link>
		<comments>http://blog.madarco.net/76/continuations-are-the-new-threads/#comments</comments>
		<pubDate>Fri, 01 Jun 2007 08:11:35 +0000</pubDate>
		<dc:creator>Madarco</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[General]]></category>
		<category><![CDATA[Java]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://blog.madarco.net/76/continuations-are-the-new-threads/</guid>
		<description><![CDATA[I've always thought that continuations are the right answer to many if no all the network-programming problems.
What are continuations? 
A continuation represent the state of execution of a function: all the local variables and the instruction pointer (the last line executed).
(Update: At least: there can be many kind of continuations. Other than the local variables, [...]]]></description>
			<content:encoded><![CDATA[<p>I've always thought that <a href="http://en.wikipedia.org/wiki/Continuations">continuations</a> are the right answer to many if no all the network-programming problems.</p>
<h3>What are continuations? </h3>
<p>A continuation represent the state of execution of a function: all the local variables and the instruction pointer (the last line executed).<br />
(<strong>Update: At least: there can be many kind of continuations. Other than the local variables, it's possible to store the state of the entire thread/process/stack</strong>)</p>
<h3>What are them used for?</h3>
<p>You can interrupt the execution of a function and resume it later.<br />
This can be useful to create "<a href="http://en.wikipedia.org/wiki/Iterators">generators</a>": iterators made simple.</p>
<p>A generator looks like this:</p>
<div class="syntax_hilite"><span class="langName">JavaScript:</span>
<div class="igBar"><span id="ljavascript-9"><a href="#" onclick="javascript:showPlainTxt('javascript-9'); return false;">PLAIN TEXT</a></span></div>
<div id="javascript-9">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> next<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000066; font-weight: bold;">for</span><span style="color: #66cc66;">&#40;</span>x=<span style="color: #CC0000;color:#800000;">0</span>; x &lt;arr.<span style="color: #006600;">lenght</span>; x++<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;yield arr<span style="color: #66cc66;">&#91;</span>x<span style="color: #66cc66;">&#93;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p>The function <code>next</code> return the next element in the <code>arr</code> array every time is called. </p>
<p>When you call the function you resume the continuation, so the execution will resume from the <code>yield</code>.<br />
If you want to implement an iterator like that without generators you'll have to explicitly unroll the <code>for</code> loop.</p>
<p>The resulting code will be surely less readabe.<br />
Like:</p>
<div class="syntax_hilite"><span class="langName">JavaScript:</span>
<div class="igBar"><span id="ljavascript-10"><a href="#" onclick="javascript:showPlainTxt('javascript-10'); return false;">PLAIN TEXT</a></span></div>
<div id="javascript-10">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> next<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">current</span> == <span style="color: #003366; font-weight: bold;">null</span><span style="color: #66cc66;">&#41;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">current</span> = <span style="color: #CC0000;color:#800000;">0</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">current</span>++;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">current</span>&gt; arr.<span style="color: #006600;">lenght</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">current</span> = <span style="color: #CC0000;color:#800000;">0</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;<span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">null</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; retrun arr<span style="color: #66cc66;">&#91;</span>x<span style="color: #66cc66;">&#93;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p>This can get really worse for every non-trivial iterator (eg: tree traversal).</p>
<p>Another nice use of continuations is to generate <strong>cooperative threads</strong>.<br />
They are different from standard threads because they can't be stopped, they should cooperatively stop.</p>
<p>For example you can do:</p>
<div class="syntax_hilite"><span class="langName">CODE:</span>
<div class="igBar"><span id="lcode-11"><a href="#" onclick="javascript:showPlainTxt('code-11'); return false;">PLAIN TEXT</a></span></div>
<div id="code-11">
<div class="code">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">function process<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; sendConnectRequest<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; yield;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; if<span style="color:#006600; font-weight:bold;">&#40;</span>!this.<span style="">connected</span><span style="color:#006600; font-weight:bold;">&#41;</span> return false;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; sendLoginRequest<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; yield;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; sendMessage<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; yield;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; trace<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#CC0000;">"msg received: "</span> + this.<span style="">response</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p>The <code>process</code> function return the control to the calling function every time it has to do an asynchronous operation.<br />
Without continuations you'll have to do:</p>
<div class="syntax_hilite"><span class="langName">CODE:</span>
<div class="igBar"><span id="lcode-12"><a href="#" onclick="javascript:showPlainTxt('code-12'); return false;">PLAIN TEXT</a></span></div>
<div id="code-12">
<div class="code">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">function process<span style="color:#006600; font-weight:bold;">&#40;</span>onComplete<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; connect<span style="color:#006600; font-weight:bold;">&#40;</span>function <span style="color:#006600; font-weight:bold;">&#40;</span>connected<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; sendLoginRequest<span style="color:#006600; font-weight:bold;">&#40;</span> function<span style="color:#006600; font-weight:bold;">&#40;</span>logged<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sendMessage<span style="color:#006600; font-weight:bold;">&#40;</span> function <span style="color:#006600; font-weight:bold;">&#40;</span>response<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; trace<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#CC0000;">"msg received: "</span> + response<span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onComplete<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p>As you can see we have used <a href="http://en.wikipedia.org/wiki/Closure_%28computer_science%29">closures</a> in a <a href="http://en.wikipedia.org/wiki/Continuation_passing_style">Continuation Passing Style</a>:<br />
Every time you have to do an asynchronous operation, you'll have to pass a function (a callback) that will be called when the operation is done.</p>
<p>Without closures the code will look even worst, this is why recently there is a great buzz about closures in the java world.</p>
<h3>But, what have in common continuations and threads?</h3>
<p>A continuations-like style of programming (but without continuations) is possible only using threads.<br />
However, threads are the heavier and most problematic way to handle the I/O waitings. (see: <a href="http://www.kegel.com/c10k.html#top">10Kproblem</a>)<br />
You have not only to deal with concurrency problems with read/write variables, but you have to block an entire thread for every I/O operation.<br />
A better way is to use asynchronous events, like in the last two example. But of the two, which one do you prefer?</p>
<p>If your answer is like mine, take a look to:</p>
<ul>
<li><a href="http://www.mortbay.org/">Jetty servlet engine</a>, it support a limited form of one shot continuations: the function is re-executed from the beginning, what is restored is only the HTTP connection state.</li>
<li><a href="http://rifers.org/wiki/display/RIFECNT/Home">RIFE continuations</a>, it's a bytecode-level implementation in Java, these are real continuations</li>
<li><a href="http://neilmix.com/narrativejs/doc/index.html">NarrativeJS</a>, a precompiler that create a simple form of continuations in Javascript: using the <code>-></code> operator the execution can be resumed from that point.</li>
<li><strong>Update: Torsten Curdt suggest <a href="http://jakarta.apache.org/commons/sandbox/javaflow/index.html">Javaflow</a>, a continuation implementation that seems really interesting, he offers <a href="http://vafer.org/blog/tag/continuations">some tutorials on his blog too</a></strong></li>
</ul>
<p>Jetty scratched only the surface of what is possible with continuations, while with RIFE it's possible to develop highly concurrent servers using cooperative sessions instead of threads (some >10000 connections instead of 1000). See: <a href="http://mina.apache.org/">Mina Java-NIO library</a>, <a href="http://poe.perl.org/">Perl POE</a>, <a href="http://minamule.madarco.net/trac/">Mina-Mule</a>.</p>
<p>A server that uses continuations, will allow the simple and linear programming style of blocking-synchronous operations while using non-blocking ones. With a huge increment in performance.</p>
<p>In the client side, the most interesting is NarrativeJs, that use an approach that can be adapted to every language:<br />
it unroll loops and transform all local variables in object variables to generate his quasi-continuations.</p>
<div class="syntax_hilite"><span class="langName">JavaScript:</span>
<div class="igBar"><span id="ljavascript-13"><a href="#" onclick="javascript:showPlainTxt('javascript-13'); return false;">PLAIN TEXT</a></span></div>
<div id="javascript-13">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> boo<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>&nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"start"</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; sleep-&gt;<span style="color: #66cc66;">&#40;</span><span style="color: #CC0000;color:#800000;">30</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"end"</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p>became:</p>
<div class="syntax_hilite"><span class="langName">JavaScript:</span>
<div class="igBar"><span id="ljavascript-14"><a href="#" onclick="javascript:showPlainTxt('javascript-14'); return false;">PLAIN TEXT</a></span></div>
<div id="javascript-14">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> boo<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span><span style="color: #003366; font-weight: bold;">var</span> njf1=njen<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>,arguments<span style="color: #66cc66;">&#41;</span>;nj:<span style="color: #000066; font-weight: bold;">while</span><span style="color: #66cc66;">&#40;</span><span style="color: #CC0000;color:#800000;">1</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span><span style="color: #000066; font-weight: bold;">switch</span><span style="color: #66cc66;">&#40;</span>njf1.<span style="color: #006600;">cp</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span><span style="color: #000066; font-weight: bold;">case</span> <span style="color: #CC0000;color:#800000;">0</span>:</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"start"</span><span style="color: #66cc66;">&#41;</span>;njf1.<span style="color: #006600;">pc</span><span style="color: #66cc66;">&#40;</span><span style="color: #CC0000;color:#800000;">1</span>,<span style="color: #003366; font-weight: bold;">null</span>,</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">sleep,<span style="color: #66cc66;">&#91;</span><span style="color: #CC0000;color:#800000;">30</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#41;</span>;case <span style="color: #CC0000;color:#800000;">1</span>:<span style="color: #000066; font-weight: bold;">with</span><span style="color: #66cc66;">&#40;</span>njf1<span style="color: #66cc66;">&#41;</span><span style="color: #000066; font-weight: bold;">if</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#40;</span>rv1=f.<span style="color: #006600;">apply</span><span style="color: #66cc66;">&#40;</span>c,a<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>==NJSUS<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span><span style="color: #000066; font-weight: bold;">return</span> fh;<span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000066;">alert</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"end"</span><span style="color: #66cc66;">&#41;</span>;break nj;<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p>The code looks ugly but it is so to preserve line numbers.<br />
With narrativeJs you can do complex animations in a simple, linear way:</p>
<div class="syntax_hilite"><span class="langName">JavaScript:</span>
<div class="igBar"><span id="ljavascript-15"><a href="#" onclick="javascript:showPlainTxt('javascript-15'); return false;">PLAIN TEXT</a></span></div>
<div id="javascript-15">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">waitForClick-&gt;<span style="color: #66cc66;">&#40;</span>theButton<span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">animate-&gt;<span style="color: #66cc66;">&#40;</span>theButton, <span style="color: #3366CC;">"left"</span>, <span style="color: #CC0000;color:#800000;">200</span>, <span style="color: #CC0000;color:#800000;">1000</span>, <span style="color: #CC0000;color:#800000;">20</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">theButton.<span style="color: #006600;">innerHTML</span> = <span style="color: #3366CC;">"go left"</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// move the button to the left (again note the blocking operations)</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">waitForClick-&gt;<span style="color: #66cc66;">&#40;</span>theButton<span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">animate-&gt;<span style="color: #66cc66;">&#40;</span>theButton, <span style="color: #3366CC;">"left"</span>, <span style="color: #CC0000;color:#800000;">0</span>, <span style="color: #CC0000;color:#800000;">1000</span>, <span style="color: #CC0000;color:#800000;">20</span><span style="color: #66cc66;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p>or:</p>
<div class="syntax_hilite"><span class="langName">JavaScript:</span>
<div class="igBar"><span id="ljavascript-16"><a href="#" onclick="javascript:showPlainTxt('javascript-16'); return false;">PLAIN TEXT</a></span></div>
<div id="javascript-16">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">document.<span style="color: #006600;">getElementById</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"myElem"</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">innerHTML</span> = fetch-&gt;<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"http://www.url.com/"</span><span style="color: #66cc66;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p>Really interesting now that Flash and Ajax are pushing asynchronous operations to the masses.<br />
Will we say goodbye to events, and maybe to threads as we know now?</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.madarco.net/76/continuations-are-the-new-threads/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>My two cents on Static Typing</title>
		<link>http://blog.madarco.net/72/my-two-cents-on-static-typing/</link>
		<comments>http://blog.madarco.net/72/my-two-cents-on-static-typing/#comments</comments>
		<pubDate>Wed, 16 May 2007 21:24:05 +0000</pubDate>
		<dc:creator>Madarco</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[General]]></category>
		<category><![CDATA[Java]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://blog.madarco.net/72/my-two-cents-on-static-typing/</guid>
		<description><![CDATA[While I was wondering if using haXe or Java with my server, I've stumbled upon some discussion on Static Typing (Java) vs. Dynamic Typing (Ruby, Php).
In a really interesting blog post (read the comments too) I found this touching phrase:
"Static typing is Communist Bureaucracy".
In short: since we (should) have pervasive testing, Static Typing is only [...]]]></description>
			<content:encoded><![CDATA[<p>While I was wondering if using haXe or Java with my server, I've stumbled upon some discussion on Static Typing (Java) vs. Dynamic Typing (Ruby, Php).<br />
In a <a href="http://memeagora.blogspot.com/2007/05/strong-typing-is-communist-bureaucracy.html">really interesting blog post (read the comments too)</a> I found this touching phrase:</p>
<blockquote><p>"Static typing is Communist Bureaucracy".</p></blockquote>
<p>In short: since we (should) have <em>pervasive testing</em>, Static Typing is only <em>more</em> testing. However, a comment is enlighting:</p>
<blockquote><p>I'm finding this logic hard to follow. Testing is good, coverage is good. Static typing is, among other things, a way to have the compiler test your code for type issues. Since we like testing, this makes static typing good, right?</p></blockquote>
<p>But Static Typing not only prevent you to do mistakes, like typos, it allows your IDE to know what you are doing:</p>
<blockquote><p><del>Dynamic</del> Static Typing speeds up development because there is physically less to type <strong>since ctrl+space and ctrl+2 write the declarations for you</strong>.</p></blockquote>
<p>Its seems obvious to me that Dynamic Typing is worth the catch only for a quick start or for learning.<br />
Since almost all of the dynamically typed languages (like Actionscript, Perl, Php) have migrated to some kind of Static Typing (eg: Type Inference), there should be a reason. </p>
<p>Periodically, a new Dynamically Typed language spawn, attracting junior/tired programmers with the mirage of the simplicity and the less-to-type-ing, riding the hype until his young audience grows and start doing large projects hoping not to call a function with the wrong arguments. </p>
<p>Only then they realize the big truth: Static Typing is just <strong>more informations in the source code</strong>.<br />
And more information means less <em>wondering-what-object-was</em> or <em>what-was-the-method-name-and-parameters</em> or <em>who-instantiate-this-object</em>, not to mention <a href="http://en.wikipedia.org/wiki/Static_code_analysis">static analysis</a>.</p>
<p>And hey, they have invented Javadoc-like documentation and <a href="http://java.sun.com/j2se/1.5.0/docs/guide/language/annotations.html">Annotations</a> just to add some more information, why remove one of the most important?</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.madarco.net/72/my-two-cents-on-static-typing/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>MindFrame javascript templating+framework</title>
		<link>http://blog.madarco.net/69/mindframe-javascript-templatingframework/</link>
		<comments>http://blog.madarco.net/69/mindframe-javascript-templatingframework/#comments</comments>
		<pubDate>Sun, 06 May 2007 21:44:17 +0000</pubDate>
		<dc:creator>Madarco</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://blog.madarco.net/69/mindframe-javascript-templatingframework/</guid>
		<description><![CDATA[The Javascript's world is spinning faster in the last times. An interesting framework was beta-released today, called MindFrame, it allows to define complex behaviors directly in the HTML source using a special syntax.
The parser used is Zparse.
You have to see the syntax in the demo to understand how cool it is.
The idea of parsing an [...]]]></description>
			<content:encoded><![CDATA[<p>The Javascript's world is spinning faster in the last times. <a href="http://www.riiv.net/2007/05/01/mindframe-demystifying-rich-internet-application/">An interesting framework was beta-released today, called MindFrame</a>, it allows to define complex behaviors directly in the HTML source using a special syntax.<br />
The parser used is <a href="http://riiv.net/project/zparse/doc/">Zparse</a>.</p>
<p>You have to see the syntax in <a href="http://www.riiv.net/project/mindframe/simple/">the demo</a> to understand how cool it is.</p>
<p>The idea of parsing an HTML element as the source of a template language in Javascript to produce a RIA really blow my mind off, may be the sign of Javascript surpassing Flash?</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.madarco.net/69/mindframe-javascript-templatingframework/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Markdown in Javascript</title>
		<link>http://blog.madarco.net/66/markdown-in-javascript/</link>
		<comments>http://blog.madarco.net/66/markdown-in-javascript/#comments</comments>
		<pubDate>Sun, 15 Apr 2007 14:37:20 +0000</pubDate>
		<dc:creator>Madarco</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://blog.madarco.net/66/markdown-in-javascript/</guid>
		<description><![CDATA[Someone ported Markdown formatting to Javascript.
In the page linked, the text is formatted as you type. I wonder if there is a Wordpress plugin that do something like that.
]]></description>
			<content:encoded><![CDATA[<p>Someone <a href="http://www.attacklab.net/showdown-gui.html">ported Markdown formatting to Javascript.</a><br />
In the page linked, the text is formatted as you type. I wonder if there is a Wordpress plugin that do something like that.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.madarco.net/66/markdown-in-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Cross-site javascript vulnerability re-discovered</title>
		<link>http://blog.madarco.net/65/cross-site-javascript-vulnerability-re-discovered/</link>
		<comments>http://blog.madarco.net/65/cross-site-javascript-vulnerability-re-discovered/#comments</comments>
		<pubDate>Tue, 03 Apr 2007 12:28:01 +0000</pubDate>
		<dc:creator>Madarco</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://blog.madarco.net/65/cross-site-javascript-vulnerability-re-discovered/</guid>
		<description><![CDATA[Richar Leggett wrote on his blog that someone seems to have (re)discovered a new AJAX applications vulnerability and published a paper about that. 
However, this type of vulnerability is already known: 
when you do a request with Javascript you can only do that to the same domain of your script, but this doesn't apply to [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://richardleggett.co.uk/blog/index.php/2007/04/03/ajax_exploit">Richar Leggett wrote on his blog</a> that someone seems to have (re)discovered <a href="http://www.cbronline.com/article_news.asp?guid=484BC88B-630F-4E74-94E9-8D89DD0E6606">a new AJAX applications vulnerability</a> and published a paper about that. </p>
<p>However, this type of vulnerability is already known: </p>
<blockquote><p>when you do a request with Javascript you can only do that to the same domain of your script, <strong>but this doesn't apply to <code>img</code> and <code>script</code> tags</strong></p></blockquote>
<p>So if you browse a malicious site, this can do a request to any site trough your browser (with your cookies and credentials).</p>
<p>In Flash this isn't possible thanks to the crossdomain.xml.<br />
However ever this can lead to vulnerabilities if <a href="http://shiflett.org/blog/2006/sep/the-dangers-of-cross-domain-ajax-with-flash">misconfigured </a>or <a href="http://www.hardened-php.net/library/poking_new_holes_with_flash_crossdomain_policy_files.html">because of the new <code>loadPolicyFile</code> Flash function</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.madarco.net/65/cross-site-javascript-vulnerability-re-discovered/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>world&#8217;s smallest website &amp; lemmings return</title>
		<link>http://blog.madarco.net/29/worlds-smallest-website-lemmings-return/</link>
		<comments>http://blog.madarco.net/29/worlds-smallest-website-lemmings-return/#comments</comments>
		<pubDate>Thu, 14 Sep 2006 10:28:35 +0000</pubDate>
		<dc:creator>Madarco</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://blog.madarco.net/29/worlds-smallest-website-lemmings-return/</guid>
		<description><![CDATA[Some quick surfing suggestions:
Have you seen guimp? The world's smallest website, enjoy it 
And I've re-found Lemmings DHTML, I remember the author was forced to shutdown the site for copyright issue (it uses the original graphics from the game), I wonder how he had solved them...
]]></description>
			<content:encoded><![CDATA[<p>Some quick surfing suggestions:<br />
Have you seen guimp? The <a href="http://www.guimp.com/">world's smallest website</a>, enjoy it <img src='http://blog.madarco.net/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /><br />
And I've re-found <a href="http://www.elizium.nu/scripts/lemmings/">Lemmings DHTML</a>, I remember the author was forced to shutdown the site for copyright issue (it uses the original graphics from the game), I wonder how he had solved them...</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.madarco.net/29/worlds-smallest-website-lemmings-return/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Some useful Javascript tools</title>
		<link>http://blog.madarco.net/24/some-usefull-javascript-tools/</link>
		<comments>http://blog.madarco.net/24/some-usefull-javascript-tools/#comments</comments>
		<pubDate>Fri, 25 Aug 2006 11:02:18 +0000</pubDate>
		<dc:creator>Madarco</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://blog.madarco.net/general/some-usefull-javascript-tools/</guid>
		<description><![CDATA[Because I've come back from my holidays and I have some spare time, I'm wondering if I can do some nice stuff before the next exam session (olny 2 left!).
First, I've start looking for some html/javascript tool, and I've found something interesting:


A Mouseover DOM Inspector (try it now clicking here!)
You can save it as a [...]]]></description>
			<content:encoded><![CDATA[<p>Because I've come back from my holidays and I have some spare time, I'm wondering if I can do some nice stuff before the next exam session (olny 2 left!).<br />
First, I've start looking for some html/javascript tool, and I've found something interesting:</p>
<div class="img">
<a href="http://blog.madarco.net/wp-content/images/javascripttools/MODI.jpg" class="gallery_item" rel="lightbox[madarco]"><img src="http://blog.madarco.net/wp-content/images/javascripttools/_MODI.jpg" width="127" height="150" alt="" title=""  /></a><br />
A <a href="http://slayeroffice.com/tools/modi/v2.0/modi_help.html">Mouseover DOM Inspector</a> (try it now <a href="javascript:prefFile='';void(z=document.body.appendChild(document.createElement('script')));void(z.language='javascript');void(z.type='text/javascript');void(z.src='http://slayeroffice.com/tools/modi/v2.0/modi_v2.0.js');void(z.id='modi');" title="MODIv2">clicking here</a>!)<br />
You can save it as a bookmark and start exploring every web site you visit.</p>
<p>There is also a similar tool packed as a Firefox extension: <a href="http://karmatics.com/aardvark/">Aardvark</a>, but it has less features.
</div>
<div class="img"><a href="http://blog.madarco.net/wp-content/images/javascripttools/12cropimage.jpg" class="gallery_item" rel="lightbox[madarco]"><img src="http://blog.madarco.net/wp-content/images/javascripttools/_12cropimage.jpg" width="150" height="118" alt="" title=""  /></a><br />
Then an image crop tool in JS: <a href="http://roel.meurders.nl/web_php/12cropimage-php-image-crop/">12ImageCrop</a>. It work nice with <a href="http://www.cakephp.org/">CakePhp</a> (copy it in the webroot/12cropimage folder and add the js where you need it). See the <a href="http://roel.meurders.nl/web_php/12cropimage-php-image-crop/#demo">Demo</a></p>
<p>I've found also this one based on Scriptaculous &#038; Prototype, it seems better but I haven't try it yet: <a href="http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/">JavaScript Image Cropper UI</a>, see the <a href="http://www.defusion.org.uk/demos/060519/cropper.php">Demo</a>
</div>
<p>Now something on CSS: I've found this <a href="http://www.bloggingpro.com/archives/2006/08/17/css-optimization/">comparison between css optimizers</a>, and <a href="http://iceyboard.no-ip.org/projects/css_compressor">Icey’s CSS Compressor</a> seems to have won the challenge. It can be really useful.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.madarco.net/24/some-usefull-javascript-tools/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>DHTML Timeline</title>
		<link>http://blog.madarco.net/16/dhtml-timeline/</link>
		<comments>http://blog.madarco.net/16/dhtml-timeline/#comments</comments>
		<pubDate>Fri, 07 Jul 2006 14:05:48 +0000</pubDate>
		<dc:creator>Madarco</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://blog.madarco.net/general/dhtml-timeline/</guid>
		<description><![CDATA[(Found on Protozoo.com)
 This is a wonderfull timeline visualization tool, it graphically show the time and date when an event occur.
 From the site: 
Timeline is a DHTML-based AJAXy widget for visualizing time-based events. It is like Google Maps for time-based information
 The event data can be loaded from XML or JSON. Clicking on an [...]]]></description>
			<content:encoded><![CDATA[<p>(Found on <a href="http://www.protozoo.com/?p=231">Protozoo.com</a>)<br />
 This is a wonderfull timeline visualization tool, it graphically show the time and date when an event occur.<br />
 From <a href="http://simile.mit.edu/timeline/">the site</a>: </p>
<blockquote><p>Timeline is a DHTML-based AJAXy widget for visualizing time-based events. It is like Google Maps for time-based information</p></blockquote>
<p> The event data can be loaded from XML or JSON. Clicking on an event show a box with event's detail. It is even possible to distort the time in certain period, for example "zooming in" some days richer of events.<br />
 This an example of good javascript use, I wish we could see more of that. </p>
<p> <a href="http://simile.mit.edu/timeline/">Timeline in action</a>: </p>
<div class="gallery">  <a href="http://blog.madarco.net/wp-content/images/timeline/timeline.JPG" class="gallery_item"  rel="lightbox[madarco]"><img src="http://blog.madarco.net/wp-content/thumb-cache/bee9de835aeb38bc767ee08e7f84963d.JPG" alt="Timeline DHTML" title="" /></a></div>
]]></content:encoded>
			<wfw:commentRss>http://blog.madarco.net/16/dhtml-timeline/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
