<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss 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/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>Ajaxian » Front Page</title>
	
	<link>http://ajaxian.com</link>
	<description>Cleaning up the web with Ajax</description>
	<lastBuildDate>Sat, 07 Nov 2009 11:23:32 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" href="http://ajaxian.com/index.xml" type="application/rss+xml" /><feedburner:browserFriendly>This is an XML content feed. It is intended to be viewed in a newsreader or syndicated to another site, subject to copyright and fair use.</feedburner:browserFriendly><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com" /><item>
		<title>Mockingbird: Cappuccino-based visual mockup tool</title>
		<link>http://feedproxy.google.com/~r/ajaxian/~3/7GvLKGe88TI/mockingbird-cappuccino-based-visual-mockup-tool</link>
		<comments>http://ajaxian.com/archives/mockingbird-cappuccino-based-visual-mockup-tool#comments</comments>
		<pubDate>Fri, 06 Nov 2009 11:19:07 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Cappuccino]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Showcase]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7860</guid>
		<description><![CDATA[Mockingbird is a nice Cappuccino based tool that lets you quickly mockup a wire-frame on the Web.

Fire it up, build out your &#8220;pages&#8221;, drag and drop your UI, and then share it with your clients!
]]></description>
			<content:encoded><![CDATA[<p><a href="http://gomockingbird.com/">Mockingbird</a> is a nice <a href="http://cappuccino.org/">Cappuccino</a> based tool that lets you quickly mockup a wire-frame on the Web.</p>
<p><img src="http://ajaxian.com/wp-content/images/mockingbird.png" alt="mockingbird" title="mockingbird" width="480" height="321" class="alignnone size-full wp-image-7861" /></p>
<p>Fire it up, build out your &#8220;pages&#8221;, drag and drop your UI, and then share it with your clients!</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ajaxian?a=7GvLKGe88TI:MKhvgk_Lo4M:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=7GvLKGe88TI:MKhvgk_Lo4M:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=7GvLKGe88TI:MKhvgk_Lo4M:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/ajaxian?i=7GvLKGe88TI:MKhvgk_Lo4M:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/mockingbird-cappuccino-based-visual-mockup-tool/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		<feedburner:origLink>http://ajaxian.com/archives/mockingbird-cappuccino-based-visual-mockup-tool</feedburner:origLink></item>
		<item>
		<title>Clipperz and Zero-Knowledge Online Password Management</title>
		<link>http://feedproxy.google.com/~r/ajaxian/~3/_c33u0FO1MA/clipperz-and-zero-knowledge-online-password-management</link>
		<comments>http://ajaxian.com/archives/clipperz-and-zero-knowledge-online-password-management#comments</comments>
		<pubDate>Thu, 05 Nov 2009 23:17:13 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7880</guid>
		<description><![CDATA[
The latest in Jon Udell&#8217;s excellent podcast series is an interview with clipperz.com&#8217;s Marco Barulli about the tool and its use of zero-knowledge online password management (aka the host-proof hosting pattern).
Direct MP3 link (from IT Conversations post)
Jon speaks of translucent databases, which encrypt data that can only make sense at application level. Thanks to the [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.clipperz.com/"><img src="http://www.clipperz.com/files/clipperz.com/main_screen.png" /></a></p>
<p>The latest in Jon Udell&#8217;s excellent podcast series is an <a href="http://blog.jonudell.net/2009/11/02/talking-with-marco-barulli-about-zero-knowledge-online-password-management/">interview with clipperz.com&#8217;s Marco Barulli</a> about the tool and its use of zero-knowledge online password management (aka <a href="http://ajaxpatterns.org/Host-Proof_Hosting">the host-proof hosting pattern</a>).</p>
<p><a href="http://itc.conversationsnetwork.org/audio/download/ITC.INNO-MarcoBarulli-2009.10.27.mp3">Direct MP3 link</a> (<a href="http://itc.conversationsnetwork.org/shows/detail4283.html">from IT Conversations post</a>)</p>
<p>Jon speaks of <a href="http://jonudell.net/udell/2002-07-19-translucent-databases.html">translucent databases</a>, which encrypt data that can only make sense at application level. Thanks to the dramatic increases we&#8217;ve seen in the performance of Javascript engines, that kind of encryption technology is now feasible in the browser.</p>
<p>Marco also makes the point that Javascript implementations of raw encryption algorithms were already available some years ago, but peripheral tools like password generation were not, and that&#8217;s come a long way too. Clipperz has its own <a href="http://www.clipperz.com/open_source/javascript_crypto_library">crypto library</a> licensed under AGPL.</p>
<blockquote><p>
Imagine a web application that would encrypt your credentials and store them in the cloud. It would deliver that encrypted store to any browser you happen to be using, along with a JavaScript engine that could decrypt it, display your credentials, and even use them to automatically log you onto any of your password-protected services. You’d trust it because its cryptographic code would be available for security pros to validate.
</p></blockquote>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ajaxian?a=_c33u0FO1MA:NdHuA6_o5UA:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=_c33u0FO1MA:NdHuA6_o5UA:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=_c33u0FO1MA:NdHuA6_o5UA:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/ajaxian?i=_c33u0FO1MA:NdHuA6_o5UA:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/clipperz-and-zero-knowledge-online-password-management/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		<feedburner:origLink>http://ajaxian.com/archives/clipperz-and-zero-knowledge-online-password-management</feedburner:origLink></item>
		<item>
		<title>Google releases Closure, the tools behind the JS geniuses</title>
		<link>http://feedproxy.google.com/~r/ajaxian/~3/9g-TIYxmX10/google-releases-closure-the-tools-behind-the-js-geniuses</link>
		<comments>http://ajaxian.com/archives/google-releases-closure-the-tools-behind-the-js-geniuses#comments</comments>
		<pubDate>Thu, 05 Nov 2009 20:08:02 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Library]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7878</guid>
		<description><![CDATA[I remember when the whole Ajax thing kicked in and JavaScript developers looked at Gmail, Gmaps, and the like and thought &#8220;I wonder what powers that?&#8221;
Well, the power comes from Closure a library and set of tools that the great JS hackers built over time as they created the applications at scale.
As soon as I [...]]]></description>
			<content:encoded><![CDATA[<p>I remember when the whole Ajax thing kicked in and JavaScript developers looked at Gmail, Gmaps, and the like and thought &#8220;I wonder what powers that?&#8221;</p>
<p>Well, the power comes from <a href="http://googlecode.blogspot.com/2009/11/introducing-closure-tools.html">Closure</a> a library and set of tools that the great JS hackers built over time as they created the applications at scale.</p>
<p>As soon as I joined Google I wanted to check out this code, and talked to a bunch of folks who were interested in open sourcing it. Well, these things take time, but now we are fortunate enough to have <a href="http://code.google.com/closure/">everything out there</a> (interestingly, a lot of the code was open due to it being used in Google Doc).</p>
<p>What are the pieces?</p>
<blockquote>
<h3>A JavaScript optimizer</h3>
<p>
 The <a href="http://code.google.com/closure/compiler/">Closure Compiler</a> compiles JavaScript into<br />
 compact, high-performance code. The compiler removes dead code and<br />
 rewrites and minimizes what&#8217;s left so that it downloads and runs<br />
 quickly. It also also checks syntax, variable references, and<br />
 types, and warns about common JavaScript pitfalls. These checks and<br />
 optimizations help you write apps that are less buggy and easier to<br />
 maintain. You can use the compiler with Closure Inspector, a Firebug<br />
 extension that makes debugging the obfuscated code almost as easy as<br />
 debugging the human-readable source.</p>
<div>
<h3>A comprehensive JavaScript<br />
  library</h3>
<p>
    The <a href="http://code.google.com/closure/library/">Closure Library</a> is a broad,<br />
    well-tested, modular, and cross-browser JavaScript library. You<br />
    can pull just what you need from a large set of reusable UI<br />
    widgets and controls, and from lower-level utilities for<br />
    DOM manipulation, server communication, animation, data structures, unit<br />
    testing, rich-text editing, and more.
  </p>
<p>
    The Closure Library is server-agnostic, and is intended for use<br />
    with the Closure Compiler.
  </p>
</div>
<div>
<h3>An easy templating system for both Java &amp; JavaScript</h3>
<p>
    <a href="http://code.google.com/closure/templates/">Closure Templates</a> simplify the task of<br />
    dynamically generating HTML. They have a simple syntax that is<br />
    natural for programmers. In contrast to traditional templating<br />
    systems, in which you use one big template per page, you can<br />
    think of Closure Templates as small components that you compose to<br />
    form your user interface.
  </p>
<p>
    Closure Templates are implemented for both JavaScript and Java, so<br />
    that you can use the same templates on both the server and client<br />
    side. For the client side, Closure Templates are precompiled into<br />
    efficient JavaScript.
  </p>
</div>
</blockquote>
<p>Check it out. It is a little like an inside out Dojo in some ways. There are years of lessons hidden in this code too (especially around good practices for scalable code, cross browser issues, and perf).</p>
<p>Congrats to the people that made this happen. What do you think of Closure?</p>
<p><b>Update</b></p>
<p>Erik has <a href="http://erik.eae.net/archives/2009/11/05/22.27.29/">posted on the history of Closure</a> and also talks about the future a bit:</p>
<blockquote><p>
I hope we can see more code being shared among the different open source JS libraries out there. We would love to be able to goog.require some Dojo code (especially their data model code) and I’m sure they would love to be able to dojo.require our data structures and i18n code.
</p></blockquote>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ajaxian?a=9g-TIYxmX10:VUhmLkxlcNc:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=9g-TIYxmX10:VUhmLkxlcNc:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=9g-TIYxmX10:VUhmLkxlcNc:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/ajaxian?i=9g-TIYxmX10:VUhmLkxlcNc:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/google-releases-closure-the-tools-behind-the-js-geniuses/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		<feedburner:origLink>http://ajaxian.com/archives/google-releases-closure-the-tools-behind-the-js-geniuses</feedburner:origLink></item>
		<item>
		<title>Riot.js: JavaScript port of the lean fast unit test framework</title>
		<link>http://feedproxy.google.com/~r/ajaxian/~3/Mk775Coiej4/riot-js-javascript-port-of-the-lean-fast-unit-test-framework</link>
		<comments>http://ajaxian.com/archives/riot-js-javascript-port-of-the-lean-fast-unit-test-framework#comments</comments>
		<pubDate>Thu, 05 Nov 2009 11:12:09 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Testing]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7857</guid>
		<description><![CDATA[Riot started as a lean Ruby unit test framework with tests that have a style like this:
PLAIN TEXT
RUBY:



context &#34;a new user&#34; do
&#160; setup { User.new }
&#160; asserts(&#34;that it is not yet created&#34;) { topic.new_record? }
end




Alex Young has now implemented Riot.js which brings you the lean framework in a format that can run stand-along via Rhino, [...]]]></description>
			<content:encoded><![CDATA[<p>Riot started as a <a href="http://github.com/thumblemonks/riot/">lean Ruby unit test framework</a> with tests that have a style like this:</p>
<div class="igBar"><a href="javascript:showCodeTxt('ruby-3');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">RUBY:</span>
<div id="ruby-3">
<div>
<ol>
context &quot;a new user&quot; do<br />
&nbsp; setup { User.new }<br />
&nbsp; asserts(&quot;that it is not yet created&quot;) { topic.new_record? }<br />
end
</ol>
</div>
</div>
</div>
<p>Alex Young has now implemented <a href="http://github.com/alexyoung/riotjs">Riot.js</a> which brings you the lean framework in a format that can run stand-along via Rhino, or through the browser itself with tests that look like:</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-4');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-4">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">Riot.<span style="color: #006600;">run</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><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-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; context<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'basic riot functionality'</span>, <span style="color: #003366; font-weight: bold;">function</span><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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; given<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'some simple equality tests'</span>, <span style="color: #003366; font-weight: bold;">function</span><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-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; asserts<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'a simple truth test should return true'</span>, <span style="color: #003366; font-weight: bold;">true</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">isTrue</span><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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; asserts<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'isNull is null'</span>, <span style="color: #003366; font-weight: bold;">null</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">isNull</span><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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; given<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'another context'</span>, <span style="color: #003366; font-weight: bold;">function</span><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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; asserts<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'equals should compare strings as expected'</span>, <span style="color: #3366CC;">'test string'</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">equals</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'test string'</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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; given<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'a context concerned with functions'</span>, <span style="color: #003366; font-weight: bold;">function</span><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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; asserts<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'asserts() should allow functions to be compared'</span>, <span style="color: #003366; font-weight: bold;">function</span><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-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #3366CC;">'test string'</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">equals</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'test string'</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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color:#006600; font-weight:bold;">&#125;</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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; given<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'yet another context'</span>, <span style="color: #003366; font-weight: bold;">function</span><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-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; asserts<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'equals should compare strings as expected'</span>, <span style="color: #3366CC;">'test string'</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">equals</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'test string'</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color:#006600; font-weight:bold;">&#125;</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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ajaxian?a=Mk775Coiej4:jTzH1oqgA0Q:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=Mk775Coiej4:jTzH1oqgA0Q:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=Mk775Coiej4:jTzH1oqgA0Q:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/ajaxian?i=Mk775Coiej4:jTzH1oqgA0Q:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/riot-js-javascript-port-of-the-lean-fast-unit-test-framework/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://ajaxian.com/archives/riot-js-javascript-port-of-the-lean-fast-unit-test-framework</feedburner:origLink></item>
		<item>
		<title>MooTools Call to Upgrade</title>
		<link>http://feedproxy.google.com/~r/ajaxian/~3/LMvh4SIF29U/mootools-call-to-upgrade</link>
		<comments>http://ajaxian.com/archives/mootools-call-to-upgrade#comments</comments>
		<pubDate>Wed, 04 Nov 2009 20:51:49 +0000</pubDate>
		<dc:creator>Rey Bango</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[MooTools]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7869</guid>
		<description><![CDATA[A change in Firefox 3.6 has prompted a call to upgrade from the MooTools team. Earlier versions of the library used the document.getBoxObjectFor method for browser detection but as of Firefox 3.6, that method has been deprecated and no longer available:
The reason we stress the upgrade to MooTools 1.2.4 and MooTools 1.1.2 is the removal [...]]]></description>
			<content:encoded><![CDATA[<p>A change in Firefox 3.6 <a href="http://mootools.net/blog/2009/11/02/upgrade-mootools/">has prompted a call to upgrade from the MooTools team</a>. Earlier versions of the library used the document.getBoxObjectFor method for browser detection but as of Firefox 3.6, that method has been deprecated and no longer available:</p>
<blockquote><p>The reason we stress the upgrade to MooTools 1.2.4 and MooTools 1.1.2 is the removal of the document.getBoxObjectFor method in the upcoming Mozilla Firefox 3.6 release. Within the browser detection code of MooTools 1.1 and earlier versions of 1.2, MooTools attempts to identify the Gecko engine by checking for the existence of document.getBoxObjectFor. Mozilla’s removal of this method in Firefox 3.6 effectively breaks Gecko detection in MooTools 1.1 and MooTools 1.2.3 down. </p></blockquote>
<p>MooTools 1.1.2 and MooTools 1.2.4 now use the user agent string to detect the browser in use which helps to eliminate the issue. <a href="http://mootools.net/blog/2009/11/02/upgrade-mootools/">The team urges all MooTools developers to upgrade</a> as soon as possible to ensure that your applications continue to function as expected. The updates are 100% compatible with their previous versions.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ajaxian?a=LMvh4SIF29U:x-8he27kp-o:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=LMvh4SIF29U:x-8he27kp-o:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=LMvh4SIF29U:x-8he27kp-o:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/ajaxian?i=LMvh4SIF29U:x-8he27kp-o:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/mootools-call-to-upgrade/feed</wfw:commentRss>
		<slash:comments>27</slash:comments>
		<feedburner:origLink>http://ajaxian.com/archives/mootools-call-to-upgrade</feedburner:origLink></item>
		<item>
		<title>jQuery Bondage</title>
		<link>http://feedproxy.google.com/~r/ajaxian/~3/7axtP6SZX3A/jquery-bondage</link>
		<comments>http://ajaxian.com/archives/jquery-bondage#comments</comments>
		<pubDate>Wed, 04 Nov 2009 11:16:24 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Performance]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7797</guid>
		<description><![CDATA[
When your browser freezes on you on some random web page, there's a pretty good chance its caused by the very JavaScript designed to improve your experience.

Good 'ole JavaScript performance. Sebastian Ruiz of Atlassian recently worked on a UI rewrite of two of their products (FishEye and Crucible) and found some interesting solutions to problems [...]]]></description>
			<content:encoded><![CDATA[<blockquote><p>
When your browser freezes on you on some random web page, there's a pretty good chance its caused by the very JavaScript designed to improve your experience.
</p></blockquote>
<p>Good 'ole JavaScript performance. Sebastian Ruiz of Atlassian recently worked on a UI rewrite of two of their products (<a href="http://www.atlassian.com/software/fisheye/">FishEye</a> and <a href="http://www.atlassian.com/software/crucible/">Crucible</a>) and found some interesting solutions to problems that came up:</p>
<blockquote>
<h2>The event binder</h2>
<p>A simple jQuery event bind selector might look like this:</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-10');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; $<span style="color:#006600; font-weight:bold;">&#40;</span>document<span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">ready</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <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-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">".alert-on-click"</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">bind</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"click"</span>, <span style="color: #003366; font-weight: bold;">function</span> <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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066;">alert</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"Clicked element "</span> + <span style="color: #000066; font-weight: bold;">this</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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;<span style="color:#006600; font-weight:bold;">&#125;</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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p>This is a rather standard method of binding functions to events with jQuery. It's easy and it's elegant. When the html document has finished loading, the anonymous function is executed. This will find all elements which have the class 'alert-on-click' in the document, and binds a function which is triggered on a click event.</p>
<h2>Slow class selectors</h2>
<p>This method can be problematic with large html documents with thousands of DOM elements. Web browsers which aren't able to do efficient evaluations on class based selectors are seriously disadvantaged here as they need to trawl through the entire document tree to find the elements. Other browsers are better off, but it's still a high cost<br />
operation relative to the super fast id based selector.</p>
<h2>The cost of the bind</h2>
<p>For moment, imagine that you are Crucible as a web application. You've been asked to display a review which has 10,000 lines of code visible. Seems simple - throw each of the lines into a table for easy and nice rendering. Then you need to make sure that whenever the user clicks on lines of code, that they are able to create a comment on that requested line. Simple! Bind an a click event handler to the source lines.</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-11');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-11">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; $<span style="color:#006600; font-weight:bold;">&#40;</span>document<span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">ready</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <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-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"tr.sourceLine"</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">bind</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"click"</span>, showCommentBoxFn<span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;<span style="color:#006600; font-weight:bold;">&#125;</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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p>However in this case the browser needs to find 10,000 tr elements, and make 10,000 bind calls. This is noticeably expensive and will slow down the load of the page. Furthermore, it's easy to miss that for memory management reasons, jQuery also <i>unbinds</i> all bound elements on a click away from a page. That means a slow load, but also a slow unload.</p>
<h2>How to count binds</h2>
<p>Here's an easy trick to find out just how many bind and calls you are making when loading your page. Insert this point cut into your JavaScript to add some debugging to jQuery bind events. You'll need <a href="http://www.getfirebug.com/">firebug</a> installed and enabled to see the output.</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-12');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-12">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">jQuery.<span style="color: #006600;">fn</span>.<span style="color: #006600;">bind</span> = <span style="color: #003366; font-weight: bold;">function</span> <span style="color:#006600; font-weight:bold;">&#40;</span>bind<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="color:#000000; 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;">function</span> <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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.<span style="color: #006600;">count</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"jQuery bind count"</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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.<span style="color: #006600;">log</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"jQuery bind %o"</span>, <span style="color: #000066; font-weight: bold;">this</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> bind.<span style="color: #006600;">apply</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>, arguments<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="color:#000000; 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-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#40;</span>jQuery.<span style="color: #006600;">fn</span>.<span style="color: #006600;">bind</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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p><img alt="Bind Count Annotation" src="http://blogs.atlassian.com/developer/2009/08/03/bind-count-annot.png" height="428" width="1022"/></p>
<p>The team moved away to the not-so-recently jQuery addition, live queries:</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-13');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; $<span style="color:#006600; font-weight:bold;">&#40;</span>document<span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">ready</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <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-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"tr.sourceLine"</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">live</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"click"</span>, showCommentBoxFn<span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;<span style="color:#006600; font-weight:bold;">&#125;</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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p>and found a few pitfalls:</p>
<blockquote>
<p>Binding with live events still needs to evaluate the selector expression, which means that $(".class").live() can still be very slow if the DOM is large. We worked around this by loading the large chunks of data with an ajax call after initialising the page view and running our live event binding.</p>
<p>Using live events on mouse events (click, dblclick, mousepress etc) accepts events from the right mouse button when they normally aren't desirable. For example, a right click on a link to copy a gracefully degrading target url would cause the bound event to fire. We solved this by reimplementing jQuery's live function to ignore events caused by right clicks - <span class="mt-enclosure mt-enclosure-file" style="display: inline;"><a href="http://blogs.atlassian.com/developer/2009/08/03/jquery.fecru.overrides.js">see the source</a></span></p>
<p>Quasi race conditions due to the non deterministic execution order of live events. If an element matches more than one live event selector, then the order which in these event functions are executed is not guaranteed. For example:</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-14');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color:#006600; font-weight:bold;">&#40;</span>document<span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">ready</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <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-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"div.comment"</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">live</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"click"</span>, <span style="color: #003366; font-weight: bold;">function</span> <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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; markCommentAsRead<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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"div.comment a.reply"</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">live</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"click"</span>, <span style="color: #003366; font-weight: bold;">function</span> <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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; replyToComment<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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// there is no way to prevent a propagation to div.comment</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;<span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p>In this case, when the &lt;a class="reply"&gt; link is clicked, both replyToComment() and markCommentAsRead() will be executed.</p>
</blockquote>
</blockquote>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ajaxian?a=7axtP6SZX3A:lS1GIK2ZX2k:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=7axtP6SZX3A:lS1GIK2ZX2k:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=7axtP6SZX3A:lS1GIK2ZX2k:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/ajaxian?i=7axtP6SZX3A:lS1GIK2ZX2k:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/jquery-bondage/feed</wfw:commentRss>
		<slash:comments>43</slash:comments>
		<feedburner:origLink>http://ajaxian.com/archives/jquery-bondage</feedburner:origLink></item>
		<item>
		<title>WebOS Developer Event – Roundup</title>
		<link>http://feedproxy.google.com/~r/ajaxian/~3/UWHR8pvRTB4/webos-developer-event-roundup</link>
		<comments>http://ajaxian.com/archives/webos-developer-event-roundup#comments</comments>
		<pubDate>Tue, 03 Nov 2009 20:01:49 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Mobile]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7844</guid>
		<description><![CDATA[Editor's Note:
Michael did a great job jotting down notes at our developer event in London, and we appreciate him taking the time to do a writeup. Some of the notes have been taken out of context, so we wanted to clarify: We started with a talk on the the future of the mobile Web. This [...]]]></description>
			<content:encoded><![CDATA[<p><b>Editor's Note:</b><em><br />
Michael did a great job jotting down notes at our developer event in London, and we appreciate him taking the time to do a writeup. Some of the notes have been taken out of context, so we wanted to clarify: We started with a talk on the the future of the mobile Web. This talked about the potential of the Web as the platform for devices, and why we were excited to join Palm.<br />
We don't comment on our specific SDK plans, and while we are personally excited about the Web gaining GPU acceleration via technologies like WebGL and CSS Transforms, and we would like to see webOS gain these capabilities to allow web developers to better leverage our fantastic hardware, we were answering a question about our personal opinion on what we'd like to see happen to the platform. We don't believe the term "immediate" was even mentioned by us, and we are sorry that people have read too much into this particular topic.<br />
</em></p>
<p><a href="http://developer.palm.com/"><img alt="" src="http://www.omio.com/blog/wp-content/palm-pre-webos.jpg" title="Palm Pre" class="alignnone" width="300" height="385" /></a></p>
<p>Ben and Dion have just wrapped up a <a href="http://developer.palm.com/">WebOS</a> talk in London, in conjunction with O2 Litmus. They explained why Palm is using the web as an application platform (might be preaching to the converted on this website!) and covered some of the development issues.</p>
<h3>Embracing The Web</h3>
<p>Ben and Dion open by discussing a panel Ben was on some years ago with Dave Thomas. Ben answered rich UIs as the most important trend, but Dave held up his mobile and said this is the future of software. And (according to Ben) Dave has been vindicated. Today, we have many, many, devices, and it's tricky for us to target them as both developers (technically) and businesses (commercially).</p>
<p>But what's interesting is the web browsers that have snuck into many of these platforms. The Ajax revolution changed the game for the first time, where you could build real-world web apps. (screenshots: GMail, GMaps, GOffice, Bespin, 280slides.) It's only happening just now, and pretty soon, the web will be a great place not just from portability of the code, but portability of the distribution mechanism.</p>
<p>Tools like Fluid, Mozilla Prism, give us a specialised browser for a web app. On the other end of the spectrum, we have tools like Adobe Air and Appcelerator Titanium that let developers build full-fledged desktop applications.</p>
<p>But why the web? How about other technologies like Silverlight and Flash? Well, the browser really hasn't changed that much (Netscape screenshot). But underneath, the engine has changed dramatically. We're going from the hacky world of the first browsers to one where developers will benefit greatly from the Javascript engines, renderers, and APIs available to us.</p>
<p>For example, with canvas, the ability to do dynamic graphics (nice demos). Likewise, SVGs. Custom typography; Firefox is rolling out support for even obscure features of fonts. Later in the presentation, Ben demonstrates further capabilities: OpenGL and 3D CSS transformations (<a href="http://www.satine.org/research/webkit/snowleopard/snowstack.html">more nice demos</a>); what Ben calls "the final frontier" of visual interfaces.</p>
<p>Faster Javascript engines are more than just increased performance. As Steven Levy points out, when you increase something's performance by an order of magnitude, you haven't just increased the performance; you've created something new. So we have generational garbage collection, for example, which is a sign of the virtual machines maturing and becoming much faster.</p>
<p>Related to JavaScript speed is threading. We don't have threads and given opinions of the creator of JavaScript, probably never will. But "browsers now have something that's even better than threads": web workers. It's used in different ways; for example, Chrome extensions can run in their own process this way. Another example is running a database server like SQLite in a separate process.</p>
<p>So does the web have the capabilities for today's and tomorrow's applicatons? There's a huge user base and a huge developer based - more developers than any other platform. Some people still think of JavaScript as a toy, but when they get into it, they often realize it's actually quite good, and it's not JavaScript they don't like, but things like browser incompatibilities that are troublesome.</p>
<h3>Development Details</h3>
<p>Web developers can use the Mojo framework, which provides simple Prototype based APIs. Notifications are HTML controls themselves, so you can put whatever HTML you want inside it. Security-wise, applications can get different powers</p>
<p>Palm wants to sell phones, not proprietary APIs, so it's involved with BONDI and W3C widgets standardisation efforts. One of the things they need to know from us (the developer community) "Palm pays us, but they didn't pay us enough to sell out"; Ben and Dion are developers and they're not going to tell other developers use "our funny proprietary API, you'll love it". However, they can't say when all this will happen, as they're evolving the platform pragmatically and they feel other things might have more immediate impact, e.g. OpenGL support.</p>
<p>The web distribution model is simple - user surfs to a URL! But many people actually want a catalogue, and in fact some app catalogues are becoming spam catalogues. Some even boast about how many apps there are in the catalogue, Ben notes with a wink at the big I. With Palm, developers pay $50 and it helps to avoid the problem. There will be one catalogue, but developers can control which markets they're selling in, and get useful analytics and feeds about its usage. Wanting to reduce the friction for people to buy an app, so would consider (although nothing definite) carrier billing and affiliate links.</p>
<h3>Q&#038;A</h3>
<p>The developer portal is currently being overhauled. Under consideration are ways to make things more transparent, e.g. bug tracking and planned features.</p>
<p>Ben and Dion anticipate that developers will probably be able to opt in to JavaScript obfuscation (or some other form of obfuscation). As Dion explains, View Source has been really important on the web, so there's a tension and it's likely multiple options will be available.</p>
<p>On ease of use, multitasking has been great; UI latency is still an issue even though the hardware is comparable to 3GS. The problem is the path to the GPU didn't exist, but now with CSS transforms, that will be solved in the future. As far as screen size, where Pixi broke the mold 4 months after the Pre, this happy world of coding to the same screen size on mobiles is going. Ben says it would have been easier for Palm if it wasn't the first phone to break the mould, but reality is the mobile space will break out to big screens, phones, etc etc, so it won't be one fixed resolution or even aspect ratio.</p>
<p>There will be lots of new tools for developing with and they'll be able to work with WebKit. Ben and Dion (not speaking for Palm, they're sure to add) are open to the thought of embracing Flash for native apps and keen to hear people's thoughts on it.</p>
<p>The open source question ... will Palm open source WebOS. Ben says "we (Ben and Dion) would love to do it", but it's not Android working to thousands of phones and it still has to be considered.</p>
<p><strong>Update:</strong> Turned out attendees scored free Pre's after the event. Thanks fellas :).</p>
<p>Announcement from <a href="http://www.o2litmus.co.uk">O2 Litmus guys</a>.</p>
<p>Developer mail to devrel@palm.com.</p>
<p>Event hashtag: <a href="http://search.twitter.com/search?q=%23o2palm">#o2palm</a></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ajaxian?a=UWHR8pvRTB4:DaD3mOAcMUs:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=UWHR8pvRTB4:DaD3mOAcMUs:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=UWHR8pvRTB4:DaD3mOAcMUs:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/ajaxian?i=UWHR8pvRTB4:DaD3mOAcMUs:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/webos-developer-event-roundup/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		<feedburner:origLink>http://ajaxian.com/archives/webos-developer-event-roundup</feedburner:origLink></item>
		<item>
		<title>Ample SDK Goes Open Source!</title>
		<link>http://feedproxy.google.com/~r/ajaxian/~3/VziIJPGYoEA/ample-sdk-goes-open-source</link>
		<comments>http://ajaxian.com/archives/ample-sdk-goes-open-source#comments</comments>
		<pubDate>Tue, 03 Nov 2009 13:15:32 +0000</pubDate>
		<dc:creator>Brad Neuberg</dc:creator>
				<category><![CDATA[Announcements]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Toolkit]]></category>
		<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7832</guid>
		<description><![CDATA[
The Ample SDK, a unique GUI toolkit working to create a cross-browser abstraction backed by open standards, has gone open source! With the new 0.8.9 release the GUI framework is now an open-source project licensed under GPL/MIT and hosted on GitHub.
More about the Ample SDK:
The Ample SDK makes it easy to create interactive vector graphics [...]]]></description>
			<content:encoded><![CDATA[<p><img class="aligncenter size-full wp-image-7833" title="ample_small" src="http://ajaxian.com/wp-content/images/ample_small.png" alt="ample_small" width="470" height="231" /></p>
<p>The <a href="http://www.amplesdk.com/">Ample SDK</a>, a unique GUI toolkit working to create a cross-browser abstraction backed by open standards, has gone open source! With the new 0.8.9 release the GUI framework is now an open-source project licensed under GPL/MIT and <a href="http://github.com/clientside/amplesdk/">hosted on GitHub</a>.</p>
<p>More about the Ample SDK:</p>
<blockquote><p>The Ample SDK makes it easy to create <a href="http://www.amplesdk.com/examples/svg/worldmap_interactive/">interactive vector graphics</a> in the browser, including on Internet Explorer, and create powerful web forms and GUIs. Even better, it supports all of this with a standard API that is the same across all browsers. You don't even need to learn anything new; the API itself is simply web standards such as SVG, XUL, DOM, the Selectors API etc.</p></blockquote>
<p><img class="aligncenter size-full wp-image-7834" title="ample_worldmap" src="http://ajaxian.com/wp-content/images/ample_worldmap.png" alt="ample_worldmap" width="470" height="246" />Make sure to check out the <a href="http://www.amplesdk.com/tutorials/adg/">Application Development Guide</a> and <a href="http://www.amplesdk.com/tutorials/edg/">Extension Development Guide</a> tutorials which feature multiple aspects of client-side development. There is also a detailed <a href="http://www.amplesdk.com/reference/">reference API</a> accompanying.</p>
<p><a href="http://www.ilinsky.com/">Sergey Ilinsky</a>, one of the leaders of the project, reports that there is still a long way to 1.0, including polishing XUL components and implementing new visual themes and charts, but that he is targeting to have a 1.0 by the end of the year. Keep up the great work Sergey!</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ajaxian?a=VziIJPGYoEA:HFlswVS86nI:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=VziIJPGYoEA:HFlswVS86nI:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=VziIJPGYoEA:HFlswVS86nI:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/ajaxian?i=VziIJPGYoEA:HFlswVS86nI:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/ample-sdk-goes-open-source/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://ajaxian.com/archives/ample-sdk-goes-open-source</feedburner:origLink></item>
		<item>
		<title>Fast by Default and Web Performances</title>
		<link>http://feedproxy.google.com/~r/ajaxian/~3/9wk_HNxvX4s/fast-by-default-and-web-performances</link>
		<comments>http://ajaxian.com/archives/fast-by-default-and-web-performances#comments</comments>
		<pubDate>Tue, 03 Nov 2009 13:00:16 +0000</pubDate>
		<dc:creator>webreflection</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Performance]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7800</guid>
		<description><![CDATA[It does not matter if we have the latest CPU able to devour every single bit of a web page, round trip and network delay is still the real bottleneck of whatever website and Steve Souder knows it so well that he summarize best practices in 66 slides.
Fast by Default
View more presentations from Abhay Kumar.

And [...]]]></description>
			<content:encoded><![CDATA[<p>It does not matter if we have the latest CPU able to devour every single bit of a web page, round trip and network delay is still the real bottleneck of whatever website and Steve Souder knows it so well that he summarize best practices in 66 slides.</p>
<div style="width:425px;text-align:left" id="__ss_2400000"><a style="font:14px Helvetica,Arial,Sans-serif;display:block;margin:12px 0 3px 0;text-decoration:underline;" href="http://www.slideshare.net/hashc0de/fast-by-default-2400000" title="Fast by Default">Fast by Default</a><object style="margin:0px" width="425" height="355"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=amazon-20091030-091102002127-phpapp01&#038;stripped_title=fast-by-default-2400000" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=amazon-20091030-091102002127-phpapp01&#038;stripped_title=fast-by-default-2400000" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"></embed></object>
<div style="font-size:11px;font-family:tahoma,arial;height:26px;padding-top:2px;">View more <a style="text-decoration:underline;" href="http://www.slideshare.net/">presentations</a> from <a style="text-decoration:underline;" href="http://www.slideshare.net/hashc0de">Abhay Kumar</a>.</div>
</div>
<h3>And That's Not All!</h3>
<p>Steve slides are mainly focused on JavaScript techniques able to download simultaneous files without blocking download first, and layout render after. He is generally right about his assumptions, but as is for everything, there are cases and cases. Please let me share here my thoughts about performances, not necessary <em>too hard</em> if we perfectly know what we are doing, but somehow hard to make it that perfect as well!</p>
<h3>Image Sprites Rule</h3>
<p>A common technique to avoid unnecessary requests to the server is the usage of image sprites. This means that rather than 16 images, as example, we could have a single 4x4 grid with all required images positioned when necessary via CSS and better compressed. Nothing new? Well, a common side effect of this technique is that if the current page will use only 4 out of 16 images, the total download size will be bigger than required one and the total amount of milliseconds to have a fully rendered layout will be, again, bigger!<br />
Beside, if the image will be cached it won't be downloaded for every other page where other cells in the sprite are necessary. As summary, sprites have pros and cons, if we put every image present in the CSS inside a single sprite but the user is interested only into one page, we are probably wasting bandwidth, and the initial feeling will be a slow website. The good compromise is obtained grouping related images inside a single sprite, being sure that if one is required, the rest of the UI will use at least 2/3 of other images in the same sprite.</p>
<h3>JavaScript And Sprites Rule</h3>
<p>Even if precedent point could sound obvious, we generally act in the opposite way with JavaScript. Not every library has been created to load incrementally and jQuery, as example, is one of these libraries. Even if we use just Sizzle and few core methods, we usually include the full library.<br />
OK, jQuery is lightweight by default, and I have used it as example for its popularity, but it is a good example to explain that JavaScript is usually served as just one file with everything inside, but this is not the best we can do ... remember sprites rule? Only if we use at least 2/3 of the library in that page it makes sense to include the entire library ...<br />
Other libraries such MooTools, YUI, or dojo allow us to choose the exact package we need for our purpose or, even better, these libraries are able to load dependencies incrementally and run-time ... is this always a better technique?<br />
Well, from parallel download point of view it is, but for overall responsiveness it may be not the right way.<br />
Try to imagine a page with 6 files/namespaces dependencies, if these 6 files would have been served in a single one, minified and gzipped, a single request with a better/shared compressed dictionary would have been better than 6 different files. Still Sprites Rule: for few more milliseconds but a single request and a better compression ratio, the overall responsiveness of the page will be improved, thanks to every included dependency, rather than split files and lazy requests.<br />
In other words, if without those files the page is not usable, the user will have a bad or "slow" experience, compared with the page that uses those files loading them in a shot.<br />
The ideal scenario would be a non-blocking lightweight loader on the top able to call grouped or optimized piece of a library and execute code only at the end, something like this:</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-18');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-18">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> script<span style="color:#006600; font-weight:bold;">&#40;</span>src<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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// create the script tag and load it</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> script = d.<span style="color: #006600;">createElement</span><span style="color:#006600; font-weight:bold;">&#40;</span>&amp;quot;script&amp;quot;<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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; script.<span style="color: #006600;">type</span> = &amp;quot;text/javascript&amp;quot;;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; script.<span style="color: #006600;">onload</span> = script.<span style="color: #006600;">onerror</span> = <span style="color: #000066;">onload</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; script.<span style="color: #006600;">src</span> = src;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; head.<span style="color: #006600;">insertBefore</span><span style="color:#006600; font-weight:bold;">&#40;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; script,</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; head.<span style="color: #006600;">firstChild</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #000066;">onload</span><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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// code already parsed, remove this script</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">parentNode</span>.<span style="color: #006600;">removeChild</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// call the callback, if present</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// when every script has been loaded</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span><span style="color:#006600; font-weight:bold;">&#40;</span>--length == <span style="color:#800000;">0</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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; $.<span style="color: #006600;">onload</span><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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; ;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> <span style="color: #009900; font-style: italic;">// document shortcut</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; d = document,</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// the head element or the documentElement (quirks)</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; head = <span style="color:#006600; font-weight:bold;">&#40;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; d.<span style="color: #006600;">getElementsByTagName</span><span style="color:#006600; font-weight:bold;">&#40;</span>&amp;quot;head&amp;quot;<span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#800000;">0</span><span style="color:#006600; font-weight:bold;">&#93;</span> ||</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; d.<span style="color: #006600;">documentElement</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// scripts length</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; length = <span style="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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// exposed object</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; $ = <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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// method to call to load scripts</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; load:<span style="color: #003366; font-weight: bold;">function</span><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-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">for</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; i = <span style="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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; l = length = arguments.<span style="color: #006600;">length</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; i &amp;lt;l; ++i</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#41;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; script<span style="color:#006600; font-weight:bold;">&#40;</span>arguments<span style="color:#006600; font-weight:bold;">&#91;</span>i<span style="color:#006600; font-weight:bold;">&#93;</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="color:#000000; 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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// chain to add an optional onload</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> $</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// silly dual behavior for every taste</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// this.onload = function(){}</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// or</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// this.onload(function(){})</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066;">onload</span>:<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #000066;">onload</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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.<span style="color: #006600;">onload</span> = <span style="color: #000066;">onload</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000066; font-weight: bold;">return</span> $;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span><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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// calling load function ...</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; .<span style="color: #006600;">load</span><span style="color:#006600; font-weight:bold;">&#40;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// one or more file</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// order not guaranteed (parallel downloads)</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// suitable for namespaced libs</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// or totally unrelated files</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #3366CC;">'http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#41;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// adding an onload callback ...</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; .<span style="color: #006600;">onload</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// jQuery is here</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// be sure page has been loaded</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; $<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><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-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066;">alert</span><span style="color:#006600; font-weight:bold;">&#40;</span>$<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'body'</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">html</span><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;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">; </div>
</li>
</ol>
</div>
</div>
</div>
<p>Above is just a 420 bytes (265 deflated) example function but fortunately every library able to load incrementally will have a better and more powerful one. Is the suggestion/idea clear?</p>
<h3>JavaScript And Evaluated Comments</h3>
<p>On slide 16 we can learn about the last amazing technique which aim is to speed up the whole parsing and executing process. I am talking about JavaScript in comments, totally ignored, unless conditionals, from every JavaScript engine, not parsed at all and for this reason faster to include as part of the code. <strike>but for some reason faster to evaluate. To be honest, I have not studied internals yet and to me is quite obscure the reason a function call, as eval is, should be that faster than native included code, since the parser will pass the code in any case and the latter one needs to be executed. The only guess I have is that eval misses something compared to native parsing, but I don't know what</strike> ... Sure is that via Firefox and enabled Firebug or analogue debuggers, eval will be slower, due to overload caused by the debugger itself, so may I suggest <code>Function(strippedComment)()</code> instead?<br />
Global scope as a native included code will have, and less stress for debuggers!<br />
OK, I went to far with Function suggestion, and my point over this comments technique is that being necessary to retrieve the comment content, as part of the text contained in the script, we cannot gzip/deflate the code unless the entire page has been compressed.<br />
Being the network round trip one of the most costly operations for a mobile device, I don't think this is a universally valid technique for desktop browsers. Parallel downloads are almost a joke for today mobile phones, but hopefully a reality for common ADSL or fiber optic connections.<br />
As best option for both scenarios I think the evaluated code in a string one is more than reasonable since it can be easily included as external file and it can be handled via namespaces.</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-19');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-19">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> myLib = <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">/*generic library*/</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; util:<span style="color:#006600; font-weight:bold;">&#123;</span><span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>$nmsp<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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// a generic namespace loader</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">myLib.<span style="color: #006600;">namespaceLoader</span> = <span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>nmsp<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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span><span style="color:#006600; font-weight:bold;">&#40;</span>!$nmsp<span style="color:#006600; font-weight:bold;">&#91;</span>nmsp<span style="color:#006600; font-weight:bold;">&#93;</span><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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; $nmsp<span style="color:#006600; font-weight:bold;">&#91;</span>nmsp<span style="color:#006600; font-weight:bold;">&#93;</span> = <span style="color: #003366; font-weight: bold;">true</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">eval</span><span style="color:#006600; font-weight:bold;">&#40;</span>myLib<span style="color:#006600; font-weight:bold;">&#91;</span>nmsp<span style="color:#006600; font-weight:bold;">&#93;</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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#123;</span><span style="color:#006600; font-weight:bold;">&#125;</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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// code apparently faster to evaluate</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">myLib.<span style="color: #006600;">myLib_util_alert</span> = <span style="color: #3366CC;">"myLib.util.alert=function(s){alert(s)}"</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// load the required namespace</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">myLib.<span style="color: #006600;">namespaceLoader</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"myLib_util_alert"</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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// try the namespace</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">myLib.<span style="color: #006600;">util</span>.<span style="color: #006600;">alert</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"BOOH!"</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p>Well, the whole point is about network round trip, isn't it? At least we know that if we have a dynamic layout but a static script, hopefully based on ETag and caching solutions, above suggestion will make sense as valid alternative.</p>
<h3>CSS And Sprites Rule</h3>
<p>Following for the last time the Stripes logic, CSS are rarely loaded incrementally. One call? Same style sheet for the whole website? Well, it could be a valid reason to serve a single file but at least we should remove noise from our CSS. How? It is simple, split the CSS for targeted browsers.<br />
In the recent <a href="http://www.fivefingercoding.com/xhtml-and-css/confessions-of-a-style-sheet-hacker">Confessions of a style sheet hacker</a>, Jason Garrison justifies the usage of hacks for a single browser: Internet Explorer 6.<br />
How many hacks are necessary to let this browser behave like every other? Unless our layout is not truly simple, lots of them! If we put "noise" inside a CSS specific for every browser but IE6, every browser will load unnecessary styles, slowing down the parser with messed selectors, and adding bytes, improving used bandwidth and download time as well.<br />
Jason already replied and I would like to thanks him, but I still think an extra call for a single case is more worth it than overall noise for everyone.</p>
<h3>My Performances Contribution</h3>
<p>What a good occasion to introduce my latest project which aim is to improve performances for every static client file to serve?<br />
<a href="http://code.google.com/p/php-client-booster/">PHP Client Booster</a> aim is to use some good practice to improve 2 times or more client file serving. A common mistake with PHP website is the one to use</p>
<div class="igBar"><a href="javascript:showCodeTxt('php-20');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">PHP:</span>
<div id="php-20">
<div class="php">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#FF9933; font-style:italic;">// don't stress your server with this</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><a href="http://www.php.net/ob_start"><span style="color:#000066;">ob_start</span></a><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#FF0000;">'ob_gzhandler'</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p>even for static libaries, CSS, recently suggested to serve @font-face compatible fonts ... but this could be a complete waste of resources over performances reductions, rather than improvements, specially if produced generic output could have been pre-compressed.<br />
Compatible with every static file, serving a 304 as soon as possible, including only necessary code, and compatible with load balanced environments as well thanks to a shareable ETag management, PHP Client Builder is a cross-platform tool able to <strong>pre-compress</strong> resources, serving as default file type a <strong>deflate</strong>d version, optionally a gzipped one, and finally the raw version of the original file.<br />
The reason I have chose deflate as default file serving is that it does not overload the compressed file with initial extra bytes and it may be slightly faster with inflate against gunzip.<br />
Moreover, some old browser had problems with gzip and its extra bytes but it should not have problems with deflate. The tool, which needs lot of documentation I am planning to write, should not be obtrusive, it could be customized or added in our already present Framework/environment, and it comes with a bench/ folder for a "try yourself" purpose. Comments, suggestions, or questions, will be appreciated (for the whole post as well).</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ajaxian?a=9wk_HNxvX4s:l-ZqlgsQ-yM:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=9wk_HNxvX4s:l-ZqlgsQ-yM:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=9wk_HNxvX4s:l-ZqlgsQ-yM:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/ajaxian?i=9wk_HNxvX4s:l-ZqlgsQ-yM:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/fast-by-default-and-web-performances/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		<feedburner:origLink>http://ajaxian.com/archives/fast-by-default-and-web-performances</feedburner:origLink></item>
		<item>
		<title>Web Inspector gets major improvements</title>
		<link>http://feedproxy.google.com/~r/ajaxian/~3/9K6jM5uXyPQ/web-inspector-gets-major-improvements</link>
		<comments>http://ajaxian.com/archives/web-inspector-gets-major-improvements#comments</comments>
		<pubDate>Tue, 03 Nov 2009 11:21:14 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Debugging]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Safari]]></category>
		<category><![CDATA[Utility]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7794</guid>
		<description><![CDATA[
Joseph Pecoraro has made some major improvements to Web Inspector.
It is now much easier to create and much around with the content. Create new CSS selectors with ease; Add content in-line with elements; see color representations of any value.
And, there is more:

DOM Storage
The DOM Storage DataGrids now displays live updates. You don’t need to manually [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://blog.bogojoker.com/wp-content/uploads/2009/10/colors.png"/></p>
<p>Joseph Pecoraro has made <a href="http://blog.bogojoker.com/2009/10/improving-the-web-inspector/">some major improvements to Web Inspector</a>.</p>
<p>It is now much easier to create and much around with the content. Create new CSS selectors with ease; Add content in-line with elements; see color representations of any value.</p>
<p>And, there is more:</p>
<blockquote>
<p><b>DOM Storage</b><br />
The DOM Storage DataGrids now displays live updates. You don’t need to manually refresh every time something changes. Also you can create, edit, and tab through the keys/values. Double click any open space to start creating a new value. Catching on to a theme with my updates? Overall this makes working with DOM Storage just a little more developer friendly.</p>
<p><b>Cookies</b><br />
This was the first feature that required me really digging into WebKit’s source, including touching all platforms. With the help of WebKit developers I eventually added support for viewing all cookie information (secure, httpOnly, etc) and deleting cookies for the Mac. All other platforms were able to display basic cookie information available through document.cookie.</p>
<p><b>Event Listeners</b><br />
Not having the ability to enumerate the Event Listeners via JavaScript has plagued me, and most likely plenty of other developers, for a very long time. This made viewing Event Listeners an excellent candidate for an Inspector feature.</p>
<p>The implementation as it stands now has some great functionality. There is a new sidebar pane when you inspect an element in the Elements Tree Hierarchy. If the current Node has registered event listeners there is a separate section for each type of event registered (click, mouseover, etc). Within each of these lists is a display of all of the event listeners in the entire event flow for that type. That means you see all the Capturing Event Listeners followed by the Bubbling Event Listeners in the exact order that they execute and on which nodes they are registered.</p>
<p><b>Natural Sorting of Properties</b><br />
Who counts “1?, “11?, “12?, “2?, “3?, etc. Certainly nobody I know! So, I implemented a variant of the alphanumerical sorting algorithm for properties when they are displayed in the console. Now you get a much more natural ordering!</p>
<p><b>Syntax Highlighting</b></p>
<p>JSON and CSS syntax highlighting is now there.</p>
<p>These are not nearly all of the new features in the Web Inspector. These are just the ones that I worked on and contributed to. To name some other features there are Scope Bars for the Console and Resources Panel, the ability to view Request and Response HTTP Parameters for Resources (great for debugging AJAX), Resource Status Code indicators, complete Serialization between the inspected page and the inspector, and more.
</p></blockquote>
<p>Thanks Joe!</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ajaxian?a=9K6jM5uXyPQ:xSplAHqwT_g:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=9K6jM5uXyPQ:xSplAHqwT_g:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=9K6jM5uXyPQ:xSplAHqwT_g:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/ajaxian?i=9K6jM5uXyPQ:xSplAHqwT_g:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/web-inspector-gets-major-improvements/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://ajaxian.com/archives/web-inspector-gets-major-improvements</feedburner:origLink></item>
		<item>
		<title>A State of the Web via October Tweets</title>
		<link>http://feedproxy.google.com/~r/ajaxian/~3/nn4titvKl4g/a-state-of-the-web-via-october-tweets</link>
		<comments>http://ajaxian.com/archives/a-state-of-the-web-via-october-tweets#comments</comments>
		<pubDate>Mon, 02 Nov 2009 23:44:10 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7828</guid>
		<description><![CDATA[A lot of great news is coming in via Twitter. I make a lot of Ajax comments under @dalmaer and wanted to give you a roundup on the month of October via Tweets. Always interesting to take a glance at the month. What do you think?

Firefox 3.6 beta 1 is here. Full screen video, WOFF [...]]]></description>
			<content:encoded><![CDATA[<p>A lot of great news is coming in via Twitter. I make a lot of Ajax comments under <a href="http://twitter.com/dalmaer">@dalmaer</a> and wanted to give you a roundup on the month of October via Tweets. Always interesting to take a glance at the month. What do you think?</p>
<ul>
<li><a href="http://bit.ly/42IQkV">Firefox 3.6 beta 1 is here. Full screen video, WOFF fonts, js perf, startup bump and more!</a> about 13 hours ago
</li>
<li><a href="http://bit.ly/3Dse2t">Oh the Walloons... you are killing me. IE6??? about 17 hours ago
<li>Thanks to @ryanstewart and @cote for a <a href="http://www.redmonk.com/cote/2009/10/30/palm-development-ria-weekly-66/">nice chat on RIA Weekly</a>. Looking forward to checking back in about 20 hours ago
</li>
<li>RT @jeresig: <a href="http://j.mp/2xBtuF">The most important part of Google Wave uses jQuery</a> about 21 hours ago
</li>
<li>RT @webOSdev: Join Palm developer relations and engineers on <a href="http://bit.ly/3CtM1Z">irc://irc.freenode.net/webos</a> about 23 hours ago
</li>
<li>Howard Lewis Ship gave what looks like a really nice <a href="http://bit.ly/1Mf9Ke">talk about Cappuccino</a> 10:59 PM Oct 29th
</li>
<li>Remi of Aardvark has written up a short post on how they use JS on <a href="http://blog.vark.com/?p=242">the new vark.com</a> 4:17 PM Oct 29th
</li>
<li>RT @thecssninja: Microsoft considering support for WOFF in IE9, that would be a smart move (via @typekit, @johnallsopp) 4:00 PM Oct 29th
</li>
<li><a href="http://bit.ly/1kDDc">JSON job listing</a>. What folks will do to be different :) 61:12 PM Oct 29th
</li>
<li><a href="http://bit.ly/31ryXH">dynaTrace have been writing interesting Ajax performance articles such as</a>: Performance antipatterns 11:34 AM Oct 29th
</li>
<li>RT @tlrobinson > @boucher: This is worth spreading around: <a href="http://is.gd/4GG9n">Some really great WebKit Inspector updates.</a> 10:34 PM Oct 28th
</li>
<li>RT @jrburke: Playing with my JS toolkit experiment, <a href="http://bit.ly/HttI1">Blade</a> 10:04 PM Oct 28th
</li>
<li>RT @chrismessina: Super excited about the <a href="http://j.mp/fonts4fx">new CSS-driven typography controls in Firefox 3.6+</a> 5:05 PM Oct 28th
</li>
<li><a href="http://documentcloud.github.com/underscore/">Underscore.js</a> is "the tie to go along with jQuery's tux." The helpers that JS should just have. 3:20 PM Oct 28th
</li>
<li><a href="http://diveintohtml5.org/semantics.html">"IE5/Mac was so advanced, it actually broke the web."</a> 3:15 PM Oct 28th
</li>
<li>Dave Shea's <a href="http://bit.ly/kIT9e">elevation is cool indeed</a> "A free, open source route visualizer that renders GPS data in 3D space" 1:50 PM Oct 28th
</li>
<li><a href="http://www.mulesoft.org/display/IBEANS/Documentation">iBeans</a> is a cool new project that helps you with integration to the backend from MuleSoft 10:29 AM Oct 28th
</li>
<li>RT @tolmasky: the web requires a constant 20% commitment from your CPU to do absolutely nothing with Flash. Im COMPILING and Flash tops it11:05 PM Oct 27th
</li>
<li>RT @F1LT3R: <a href="http://bit.ly/36GR5Q">Processing.js gets image-handling upgrade</a>. 8:18 PM Oct 27th
</li>
<li>Matt Hornyak gave my favourite talk of our Sprint session when he went into detail on <a href="http://bit.ly/sTTT">his Clock application</a> 24:39 PM Oct 27th
</li>
<li>RT @SickingJ > @mozhacks: <a href="http://bit.ly/190FQO">Firefox 3.6 will support &lt;input type=file multiple&gt;</a> 4:33 PM Oct 27th
</li>
<li>RT @F1LT3R > @processingjs: <a href="http://askken.heroku.com/">Amazing Processing.js Search Engine</a>! --> [Try: 'electronic music'] 4:33 PM Oct 27th
</li>
<li><a href="http://bit.ly/hQ0VM">"IBM Researchers have an interesting way for a Web site to describe itself to visually impaired."</a> 2:59 PM Oct 27th
</li>
<li>HTML5 at Last Call at @WhatWG! (specs: <a href="http://bit.ly/3DSHr">HTML5</a>, <a href="http://bit.ly/387AYt">Web Workers</a>, <a href="http://bit.ly/Euml7">Microdata</a>) 2:16 PM Oct 27th
</li>
<li><a href="http://bit.ly/3uYXKn">"However, on all browsers, even using the string approach was 3x-20x faster than loading the function directly."</a> 2:09 PM Oct 27th
</li>
<li><a href="http://bit.ly/3uYXKn">"Overall, wrapping code as a large comment is faster than wrapping the code as a string on all browsers."</a> 2:09 PM Oct 27th
</li>
<li><a href="http://bit.ly/Hvjtb">“now supporting YUI 2.8 under Caja (protective layer between devs and your browser for Y! 3rd party apps)”</a> -@spullara 12:48 PM Oct 27th
</li>
<li>Bill Zeller has written <a href="http://bit.ly/19uzvt">jLambda</a> which allows lambda functions to be succinctly expressed, eg $('.foo').click($l.hide()) 7:09 AM Oct 27th
</li>
<li>A step by step <a href="http://j.mp/Bxbi">guide to cross browser @font-face support</a> 46:58 AM Oct 27th
</li>
<li>RT @mollydotcom: <a href="http://bit.ly/1inDaD">"XForms 1.1 is now a W3C rec. - anyone working with XForms?"</a> No? :) 10:56 PM Oct 26th
</li>
<li><a href="http://bit.ly/oCboW">"Ruby coders come play with BigRecord, your window to the world of Bigtable-esque data. Which, for now, means HBase."</a> 10:50 PM Oct 26th
</li>
<li>Charles Jolley (@okito) of SproutCore keeps good stuff coming: <a href="http://bit.ly/4x5WGE">Tiki</a> is a prototype SecurableModule loader 10:37 AM Oct 26th
</li>
<li>RT @chrisblizzard: new post: <a href="http://bit.ly/3LIuS">another top 20 web site supports Theora</a> 9:59 AM Oct 26th
</li>
<li><a href="http://mu.daaku.org/">M?</a> is a Facebook Connect JavaScript library that wraps it all up nicely indeed 7:42 AM Oct 26th
</li>
<li>RT @jwatt: <a href="http://bit.ly/3V5MOd">Sent in my draft proposal for supporting z-index in SVG</a> 9:58 PM Oct 25th
</li>
<li>The awesome @bokowski details his experience <a href="http://bit.ly/GlAXn">porting the PDE editor of Eclipse from Java to Web UI</a> 10:55 AM Oct 25th
</li>
<li>We love to <a href="http://bit.ly/1RbuUW">pontificate about software but there are few actual studies</a>.... even though we call it Computer Science 10:53 AM Oct 25th
</li>
<li>RT @jdalton: Prototype+NWMatcher and P+Sizzle ops/sec <a href="http://bit.ly/zxKqz">benchmarks</a> and updated the <a href="http://bit.ly/elhgf">match() benchmarks</a> 11:10 PM Oct 24th
</li>
<li>The Web offers incredible diversity in many areas, so kinda strange that JS is the only viable language on the client, even though it morphs 2:45 PM Oct 24th
</li>
<li>RT @reddit_prog: WebKit WebGL <a href="http://bit.ly/120vpJ">demos ported to Firefox</a> 6:35 AM Oct 24th from Spaz
</li>
<li>RT @okito: <a href="http://bit.ly/Ioqbq">SproutCore 1.0 Release Candidate 1</a> hit the streets tonight! gem install sproutcore to get. Also new demos at 11:05 PM Oct 23rd from Spaz
</li>
<li>RT @timbray: That "SOA Manifesto" is vacuous to the point of being insulting. "Intrinsic Interoperability" my ass.8:12 PM Oct 23rd
</li>
<li>"Please rename the ‘play’ package as ‘org.playframework’!" Awesome @playframework. <a href="http://bit.ly/1dxcX">If you Java, play!</a> 27:46 PM Oct 23rd
</li>
<li>RT @bradneuberg: The DOM APIs should move away from being language agnostic. Pessimizes common case and sacrifices usability. 5:23 PM Oct 23rd
</li>
<li>RT @mozhacks > @janodvarko: Check out the <a href="http://bit.ly/CoxVX">new high accuracy HTTP timings</a> coming with Firebug 1.5 and Firefox 3.6 - 5:14 PM Oct 23rd
</li>
<li>#webOS tip from Evernote: thanks to WebKit and designMode you get a rich text editor for free. Loving Evernote right now... 4:29 PM Oct 23rd
</li>
<li>RT @daveman692: Yahoo! has <a href="http://bit.ly/3tCWL0">made their OpenID and OAuth provider experience work well on mobile devices</a> too! Awesome! 2:25 PM Oct 23rd
</li>
<li><a href="http://bit.ly/4FYQrO">BookGlutton</a> is a cool Dojo driven eBook reader app with chat and annotation 2:02 PM Oct 23rd
</li>
<li>Oh cool, <a href="http://bit.ly/H6CwB">scripty 1.8.3 came out</a> a couple of weeks back. Updated to Prototype 1.6.1 and more 12:16 PM Oct 23rd
</li>
<li>RT @nathansmith: <a href="http://bit.ly/2XT37Q">Ooh, jQuery Summit. Online "conference" w. a great speaker lineup</a> 11:09 PM Oct 22nd
</li>
<li>RT @tobie: Building @prototypejs with your selector engine of choice as easy as: <a href="http://bit.ly/1Ykrw8">$ rake dist SELECTOR_ENGINE=nwmatcher</a> 9:31 PM Oct 22nd
</li>
<li>RT @dberlind: Sir Tim Berners-Lee @ #w2s: W3C things to pay attention to: Web apps, mobile web, SVG, HTML (now at 5) 5:50 PM Oct 22nd
</li>
<li>Wave and Raindrop may have a similar front cover, but the story is sooo different. Squint past "messaging" and see the massive differences. 5:16 PM Oct 22nd
</li>
<li><a href="http://bit.ly/2NMkOl">Raindrop announced</a>; Hacking your email again; Getting personal: I am really jazzed to see the work of the Mozilla M... 3:48 PM Oct 22nd
</li>
<li>RT @davidascher: Pleased to announce the launch of Raindrop -- our experiment for messaging on the Open Web: labs.mozilla.com/raindrop 1:46 PM Oct 22nd
</li>
<li>Addy Osmani <a href="http://bit.ly/2OZg57">has posted</a> on using YUI SWFStore as a storage solution a la Dojo Storage 12:52 PM Oct 22nd
</li>
<li>RT @glazou: "in 1997 I wrote <a href="http://is.gd/4vj06">this</a> and 12 years later, the #whatwg discovers the power of link dereferencing :-) #w3c" 12:19 PM Oct 22nd
</li>
<li>RT @WebReflection: ...and we wonder why Microsoft does not want canvas into HTML5, uh? 90% of Silverlight almost everywhere in microsoft.com 12:00 PM Oct 22nd
</li>
<li>RT @WebReflection: Dean Edwards always ends up with ultra useful snippets: <a href="http://bit.ly/2Li9Qj">IE color value to hex</a> 11:22 AM Oct 22nd
</li>
<li>RT @jobsworth: Pichai: Most operating systems of today were designed before the web existed; most of the time we use OS we use for web. #w2s9:24 AM Oct 22nd
</li>
<li>Alexander Kirk is doing fun work with <a href="http://alexander.kirk.at/2009/10/22/colorillo/">Colorillo</a>, the collaborative drawing app using Canvas 8:58 AM Oct 22nd
</li>
<li>Awesome live <a href="http://ajaxian.com/archives/jira-now-has-a-live-walk-through-demo-using-jquery">in-line interactive walk through of JIRA</a> from @mcannonbrookes and co! 7:58 AM Oct 22nd
</li>
<li>RT @gozala: "WebSocket is implemented in the latest webkit nightly!" 12:23 AM Oct 22nd
</li>
<li>RT @cromwellian How very helpful of them. Next up, "Microsoft to move all unsupported IE8 features out of HTML5 spec." 11:14 PM Oct 21st
</li>
<li>RT @arun: In other news, <a href="http://bit.ly/90JhE">Microsoft has offered to help with Canvas</a>. This isn't Bizarro World, but I should sleep more. 8:20 PM Oct 21st
</li>
<li>RT @pkim: Open Video gets bigger with <a href="http://wp.me/pf2B5-KL">VideoPress support for Ogg</a> 8:14 PM Oct 21st
</li>
<li>The awesome @Nitobi crew and getting their WebGL groove on! <a href="http://blogs.nitobi.com/yohei/?p=43">Check out their early game</a> 6:02 PM Oct 21st
</li>
<li>RT @thecssninja: <a href="http://cssn.in/ja/018">Font Dragr: A drag and drop font tester</a> 11:26 PM Oct 20th
</li>
<li>RT @ethauvin: "Developing for Palm's #webOS is just like hacking. You spend hours experimenting with undocumented features." 11:06 PM Oct 20th
</li>
<li>RT @cyikeda: <a href="http://bit.ly/SP4Zo">"What kind of apps are currently available in the Palm App Catalog? Check out our new featured apps page"</a> 11:03 PM Oct 20th
</li>
<li>RT @pbakaus: Apple has started using HTML5 video with HTML control overlays on their website. Way to go! 10:17 PM Oct 20th
</li>
<li>Was V8 available in January 2007? Has technology changed at all since then? Oh.... yeah! And browser have a lot more headroom! 10:12 PM Oct 20th
</li>
<li>RT @mozhacks: <a href="http://bit.ly/fx-woff">Web Open Font Format for Firefox 3.6</a> - new format to support web designers and font creators 9:37 AM Oct 20th
</li>
<li>“<a href="http://www.typotheque.com/news/typotheque_launches_its_web_fonts_service">Typotheque web font system has launched. All Typotheque fonts can be licensed for print &#038; web.</a>” -@zeldman 6:50 AM Oct 20th
</li>
<li>“web messaging (pubsub, queueing, ..) takes another step out of the <a href="http://bit.ly/o43v2">dark ages of RPC</a> #hybi” -@monadic 6:45 AM Oct 20th
</li>
<li>"HTML 5 Features on Mobile Browsers" has @michaelg <a href="http://ff.im/aa2sy">talking about mobile Web-ness</a> 11:03 PM Oct 19th
</li>
<li>Cloudera Desktop includes cool <a href="http://bit.ly/rYgD8">MooTools goodness</a> including <a href="http://github.com/anutron/art">MooTools ART</a>! 10:28 PM Oct 19th
</li>
<li>RT @cramforce: Can we please get click-invocable fullscreen mode in browsers #killingflashusecasessince1999 10:25 PM Oct 19th
</li>
<li>I bow to @diveintomark, our <a href="http://bit.ly/4z00wv">Zen master of hacker writing :)</a> 9:58 PM Oct 19th
</li>
<li>RT @cramforce: Awesome! <a href="http://jan.io/5Qhd">“The LALR(1) parser and lexical analyzer generator for JavaScript, written in JavaScript”</a> — 9:48 PM Oct 19th
</li>
<li>RT @cssquirrel: The related post asks you to never let friends use <a href="http://cssquirrel.com/?p=48">CSS3 without taste</a> 12:04 PM Oct 19th
</li>
<li>Glad to see <a href="http://bit.ly/2vttqy">Dojo looking good on webOS</a>. Need to work out how to have Shane submit this to our catalog 2:04 PM Oct 19th
</li>
<li>Congrats to Guilaume and co for 1.0 of the <a href="http://www.playframework.org/">@playframework</a> 11:34 AM Oct 19th
</li>
<li>Harshad RJ has a <a href="http://twinkler.in/">fun Canvas visualization of your Twitter connections</a>. @dalmaer follows too many for it so used @ajaxian 10:18 AM Oct 19th
</li>
<li>"scripty2 automatically supports CSS transitions, so whenever scripty2 effects are used the right thing happens" -@thomasfuchs 10:09 AM Oct 19th
</li>
<li>The timeline that shows what is rendered when from <a href="http://twinkler.in/">WebPageTest</a> is awesome. FOX News sucks at perf as well as content! 11:03 PM Oct 18th
</li>
<li>The state of developers tools! @bgalbs #wds <a href="http://bit.ly/1k5ufC">presentation is now online</a> 4:15 PM Oct 18th
</li>
<li>RT @Pre101: "I just opened up <a href="http://webos101.com/">http://webos101.com</a> as a resource for webOS development." 2:56 PM Oct 18th
</li>
<li>“I really need to build a plugin system for #PhoneGap. I just successfully created support for adding native toolbars / buttons!” -@NachoMan 3:17 PM Oct 17th
</li>
<li>RT @chrisblizzard: A planet site for WebGL - <a href="http://bit.ly/2AMTTK">follow everyone involved</a> 3:12 PM Oct 17th
</li>
<li><a href="http://j.mp/3Zyg7Z">Caja is being used in production on Yahoo! Homepage</a>. Congrats to Mark, Ben et al 3:11 PM Oct 17th
</li>
<li>RT @limi: <a href="http://bit.ly/2NLGvS">The vulnerable Microsoft .NET add-on has been blocked from Firefox</a>. Great handling of the matter from @shaver 10:26 PM Oct 16th
</li>
<li>RT @biilly: Some slides from my <a href="http://j.mp/Sk8Ty">'Intro to #Canvas' presentation tonite</a> - and the <a href="http://j.mp/3kOmeG">getting started code</a> 9:42 PM Oct 16th
</li>
<li>Shinichi Tomita has a cool LiveClipboard jQuery plugin. <a href="http://bit.ly/1OemQU">Check out the demo</a> 3:25 PM Oct 16th
</li>
<li>RT @lachlanhardy: <a href="http://tr.im/BXHR">Fantastic tutorial for using @raphaeljs</a>. Just in time for the 1.1 release! 10:43 PM Oct 15th
</li>
<li>RT @okito: "Empty Bug Queue == Hello SproutCore 1.0 Release Candidate 1!!!" Congrats! 9:45 PM Oct 15th
</li>
<li>RT @mozhacks <a href="http://bit.ly/3L6tgi">"a new demo: making waves with html5 by @localhuman"</a> 9:14 PM Oct 15th
</li>
<li>It will be fun to have a naming scheme for lists (already seeing them e.g. @company/team) &#038; then being able 2 ask @dalmaer;@bgalbs/jsgurus 9:11 PM Oct 15th
</li>
<li>Daniel Bogan rules for taking Ben's Web Directions talk and <a href="http://www.flickr.com/photos/wafer/4015817512/sizes/l/">doing this!</a> 8:41 PM Oct 15th
</li>
<li>Fun to be setting up some public lists. <a href="http://twitter.com/dalmaer/jsgurus">jsgurus</a> and <a href="http://twitter.com/dalmaer/ajaxians">ajaxians</a> Who am I missing? 8:30 PM Oct 15th
</li>
<li>RT @webos_school: Acceleroto, Nice <a href="http://bit.ly/29Hfb9">post about developing for webOS</a>. We've also taken a look at your App. Great work. 8:01 PM Oct 15th
</li>
<li>RT @edwk: Firefox 3.6b1 launches so much faster! Good work Mozilla team! 8:01 PM Oct 15th
</li>
<li>“Titanium's addition of an embedded PHP interpreter is gonna be big, I think. Opens up a massive community to desktop app dev.” -@funkatron 12:12 PM Oct 15th
</li>
<li>“IntelliJ IDEA Community Edition released! Free and open-source. http://jetbrains.org/ cool!” awesome. If only they did this years back! 11:54 AM Oct 15th
</li>
<li>ClickToFlash has an awesome tagline "any crash if probably Flash" http://rentzsch.github.com/...11:58 PM Oct 14th
</li>
<li>RT @diveintomark: Damn, I wish <a href="http://diveintohtml5.org/video.html">this were simpler</a> #html5 #video 10:15 PM Oct 14th
</li>
<li>Hamish Friedlander has a nice new <a href="http://bit.ly/24WxGz">jQuery Concrete</a> library for adding functionality to DOM elements w/ a new CSS engine 8:12 PM Oct 14th
</li>
<li>That @srobbin is always doing cool shizzle. This time he has <a href="http://bit.ly/4DEbCN">jQuery Approach</a> which animates content based on proximity 4:29 PM Oct 14th
</li>
<li>Frederico Knabben has <a href="http://bit.ly/33WwZr">an interesting article on the loading performance of CKEditor</a> and various tricks they employ 4:18 PM Oct 14th
</li>
<li>And @bradneuberg is kicking arse with his new View Source <a href="http://j.mp/1QiSM9">article</a> <a href="http://j.mp/13LdAP">series</a> 2:26 PM Oct 14th
</li>
<li>Robert Nyman has written a high level <a href="http://bit.ly/3XFhjE">intro to HTML5</a> 2:01 PM Oct 14th
</li>
<li>RT @novemberborn: Firefox 3.6 can read your accelerometer. <a href="http://bit.ly/Fygup">Mario Kart in Firefox</a>! (<a href="http://bit.ly/aFETa">via @nonken</a>) 1:54 PM Oct 14th
</li>
<li><a href="http://bit.ly/YNEyB">Secure String Interpolation in JavaScript</a> 12:13 AM Oct 14th
</li>
<li><a href="http://learningwebgl.com/blog/">Learning WebGL</a>. Nice. (via @bradneuberg) 12:09 AM Oct 14th
</li>
<li>RT @andreasbovens: <a href="http://my.opera.com/unite/blog/2009/10/14/it-is-on-10-10-beta-with-opera-unite-is-out">Opera 10.10 beta with Opera Unite is out</a> 11:08 PM Oct 13th
</li>
<li>Congrats Zach! <a href="http://j.mp/13gjga">"@Triggit is reborn as a service that allows advertisers to easily participate in real-time ad exchanges."</a> 3:10 PM Oct 13th
</li>
<li>“Keynote uses path values compatible with SVG for triangles (both types), squares (both types), circles and speech bubbles.” -@dstorey 2:54 PM Oct 13th
</li>
<li>We have an awesome HI team and they have published <a href="http://bit.ly/9QzJA">Immersive App Guidelines</a> (by @webOSdev) 2:50 PM Oct 13th
</li>
<li>RT @tlrobinson: <a href="http://bit.ly/lbrEH">WebSaver, a WebKit-based Mac OS X screensaver</a>. Use any webpage or JavaScript / canvas app. 11:53 AM Oct 13th
</li>
<li>Zack Grossbart gave a jQuery "jumpstart" talk to a bunch of Java devs, and <a href="http://bit.ly/QcILa">you can see it here</a> 10:51 AM Oct 13th
</li>
<li>@font-face performance from @souders: <a href="http://j.mp/k1UtL">"IE doesn’t render anything in the page until the font file is done downloading."</a> 8:56 AM Oct 13th
</li>
<li>RT @iTod: <a href="http://cruzapp.com/">Cruz 0.3 is out</a>. Fluid to follow soonish. 11:06 PM Oct 12th
</li>
<li><a href="http://bit.ly/1mYgZP">“Hello World"</a> :-) -@BBCwebdev welcome Beeb! 6:27 PM Oct 12th
</li>
<li>RT @mozhacks: new post: new device API for Firefox 3.6: <a href="http://bit.ly/fxorient">orientation</a> 5:09 PM Oct 12th
</li>
<li>RT @appcelerator: Building Mobile Apps with Your Web Skills: <a href="http://bit.ly/LKEoc">Titanium for New Devs. Oct 20, 9AM PST.</a> 4:10 PM Oct 12th
</li>
<li>Mike Taylor gives you an easy sample page to <a href="http://j.mp/1OkZI">check HTML5 input attribute support</a> 3:51 PM Oct 12th
</li>
<li>“Real web designers write code. Always have, always will. #aea” -@zeldman3:31 PM Oct 12th
</li>
<li>The <a href="http://bit.ly/4FQ9NG">Ext JS Designer tool</a> looks nice. Fall 2009 will be the time of the Web Developer Tool call outs! 9:35 AM Oct 12th
</li>
<li><a href="http://bit.ly/3BU1LI">Chrome Win Size</a>; Playing with Chrome extension mechanism: I have been watching the work of Aaron and the Chrome.. 9:00 AM Oct 12th
</li>
<li>Tom Theisen has a nice Canvas demo that reminds you of the <a href="http://tomtheisen.com/spread/">Algorithmic Ink / Processing demos</a> 10:15 PM Oct 11th
</li>
<li>"eval() is the forcing function that makes view-source useful for more than just markup." -- Alex Russell 10:02 PM Oct 11th
</li>
<li>“(function(){"use strict";return this}).call(this); - http://bit.ly/iG1r5” -@WebReflection 3:16 PM Oct 11th
</li>
<li>“Muxing 4 videos together into a single stream with <a href="http://bit.ly/kKgah">gstreamer</a> <a href="http://bit.ly/QDdye">video</a>” -@chrisblizzard 3:09 PM Oct 11th
</li>
<li><a href="http://bit.ly/1w2O7C">This Week in HTML5 talks about microdata</a> (by @diveintomark) 12:00 AM Oct 11th
</li>
<li>Alex responds to @ppk on the multi-WebKit issue: <a href="http://bit.ly/19o0z6">"The data doesn’t reflect how fast the mobile market changes."</a> 11:50 PM Oct 10th
</li>
<li>RT @thomasfuchs: Awesome slides on <a href="http://bit.ly/PMsiT">Interface Design Basics</a> by @smoofles. Highly rec'd for devs. 11:47 PM Oct 10th
</li>
<li><a href="http://bit.ly/3orcPZ">Perlito</a> == MiniPerl6 compiler self-hosted in Javascript, Lisp and in Perl 5. 10:08 PM Oct 10th
</li>
<li>RT @nathansmith: Page count for jQuery Cookbook = 468 pages. Looking over a PDF preview. Excited to see it near completion. 10:06 PM Oct 10th
</li>
<li><a href="http://codepad.org/">Codepad</a> is interesting in that it lets you collaboratively run code :) Nice work @sahazel look at embedding @bespin! 10:02 PM Oct 10th
</li>
<li>Love how Adam Barth answered "When will Chrome 4 be released?" A: "When these bugs are done" instead of "We have not publicly announced.." 8:59 PM Oct 10th
</li>
<li>Met the <a href="http://taptu.com/">Taptu</a> folks who have a search "machine" that uses how mobile friendly websites are to the scoring algorithm 12:17 PM Oct 9th
</li>
<li>RT @jeremiahg: <a href="http://bit.ly/xo1pe">"CSS History Hack Used To Ban Torrent Users"</a> 10:03 PM Oct 8th
</li>
<li>RT @stshank: WebGL now in developer version of Chrome, though disabled by <a href="http://bit.ly/2SRJj">default still</a> 10:02 PM Oct 8th
</li>
<li>RT @jhaynie: Appcelerator Titanium + Yahoo YQL = awesomeness .. see the <a href="http://bit.ly/ti_yql">video demo</a> @ 9:56 PM Oct 8th
</li>
<li>RT @WHATWG: HTML5: <a href="http://bit.ly/3FhRh8">Dramatically simplify &lt;script defer&gt; and &lt;script async&gt; handling</a>. 9:56 PM Oct 8th
</li>
<li>RT @kangax: Should you learn Javascript? <a href="http://bit.ly/NTCb8">The answer is simple</a> 9:40 PM Oct 8th
</li>
<li>Awesome :) @bskahan has a quick implementation of <a href="http://bit.ly/2CBpBv">Google's crawlable Ajax proposal</a> 5:36 PM Oct 8th
</li>
<li>RT @nathansmith: <a href="http://bit.ly/17NGEl">Slides on jQuery Performance</a> - Great for designers who write bad jQuery code. (Yeah, you) 4:41 PM Oct 8th
</li>
<li>Panagiotis <a href="http://past.github.com/despin">Astithas has a new Desktop Bespin plugin :)</a> 3:46 PM Oct 8th
</li>
<li><a href="http://bit.ly/1gNwO4">Google wants to make Ajax crawlable</a> via http://url#!state magic that maps to url?_escaped_fragment_=state 9:54 AM Oct 8th
</li>
<li>Mika @Tuupola has written a <a href="http://bit.ly/jvvFG">nice tutorial on doing drag and drop + multi file upload with Gears</a> 9:24 AM Oct 8th
</li>
<li>RT @snookca: <a href="http://snook.ca/s/957">Becoming a Font Embedding Master</a> 10:06 PM Oct 7th
</li>
<li>Simon Kenyon Shepard has <a href="http://www.trisis.co.uk/blog/">created CSSUnit as a way to unit test your presentation code</a> 9:40 PM Oct 7th
</li>
<li>Daniel Steigerwald has a nice lil <a href="http://gist.github.com/204554">JavaScript object type checker</a> that works cross frame/browser 9:27 PM Oct 7th
</li>
<li>Nice to see @ppk do his diligent magic on mobile, this <a href="http://bit.ly/10ulp">time with WebKit comparisons</a> 10:54 AM Oct 7th
</li>
<li>RT @tolmasky: My FOWA talk is up, <a href="http://bit.ly/jq3bV">check out the Bespin integration and new Desktop features in Atlas</a> 8:55 AM Oct 7th
</li>
<li>RT @brucel: #HTML5 doctor article: <a href="http://bit.ly/SELaZ">measure up with the meter tag</a> by @leads. Groovy. 8:54 AM Oct 7th
</li>
<li>Audrew Dupont likes to <a href="http://bit.ly/ywdTm">autojump</a> 8:49 AM Oct 7th
</li>
<li><a href="http://bit.ly/fhDdi">"Install any HTML theme/template into your Rails app"</a> by the awesome @drnic 11:22 PM Oct 6th
</li>
<li>RT @BenWard: Google's front page is using CSS animations to fade in the peripheral chrome when you move the mouse. Actually pretty cool. 11:13 PM Oct 6th
</li>
<li>I love that the What Browser? site by Google (for dummies?) has a section with terms such as "V8 Benchmark Suite." http://whatbrowser.org/ 10:49 PM Oct 6th
</li>
<li>Gilad Bracha discusses the pros and cons of the <a href="http://bit.ly/158aYw">SmallTalk Image</a> 10:22 PM Oct 6th
</li>
<li>RT @eugegim: "I've open sourced an <a href="http://is.gd/40WmU">unobtrusive Javascript plugin for Rails</a> with other goodies." Cool! 9:29 PM Oct 6th
</li>
<li>Bespin just got props in the Air 2.0 session at #AdobeMax #AdobeMax198 (should work in Air 2.0). (via @FlashMorgan) 6:30 PM Oct 6th
</li>
<li>Nice <a href="http://bit.ly/HSYFv">graphical view of browsers</a> (via @azaaza) 11:25 AM Oct 6th
</li>
<li>RT @azaaza: 10 UX Myths. A truly <a href="http://bit.ly/Ist08">excellent article</a> by @songcarver. 11:21 AM Oct 6th
</li>
<li>RT @erikdahlstrom: <a href="http://bit.ly/3NVMKj">SVG icon loader</a>, similar to CSS sprites, multiple images in one file nice work @fyrd 11:08 AM Oct 6th
</li>
<li>Clarification: Web distribution isn't just for free apps. You can charge for apps and not put them into the App Catalog. Your choice! 10:26 AM Oct 6th
</li>
<li>RT @kangax: The most in-depth <a href="http://bit.ly/1B8hXs">explanation of inheritance</a> in ECMAScript I've ever seen. Amazingly, all in Russian 10:11 AM Oct 6th
</li>
<li>RT @jhaynie: #titanium 0.7 should drop final this week. here's a <a href="http://bit.ly/13xaDH">sneak peak</a> 1:04 AM Oct 6th
</li>
<li>An intense couple of weeks; <a href="http://bit.ly/4CBD5W">Palm Developer Program announced</a>: The first couple of weeks at Palm have been a whi.. 1:00 AM Oct 6th
</li>
<li>@bradneuberg Give it a bit of time. <a href="http://bit.ly/2bW4WI">It works. See</a>. You are in WebKit so you can &lt;canvas&gt; <a href="http://bit.ly/JYsv4">See</a> 12:04 AM Oct 6th
</li>
<li>RT @precentral: Why Palm's webOS Dev Announcements tonight <a href="http://bit.ly/vpg9Z">are a big deal</a> 11:26 PM Oct 5th
</li>
<li>RT @palm Recap of a <a href="http://bit.ly/1PA2WL">busy day for webOS developers</a> 11:25 PM Oct 5th
</li>
<li>If @souders likes it, worth looking into. Here he talks about Aptimize, their real-time spriting, <a href="http://bit.ly/Vrtms">and more</a> 11:12 PM Oct 5th
</li>
<li>A refreshed <a href="http://bit.ly/pvjDK">code.google.com/speed</a> w/ more technical content for you (via @GoogleCode) 4:28 PM Oct 5th
</li>
<li><a href="http://post.ly/7Q4z">Why server-side Javascript</a> (via @mahemoff)4:27 PM Oct 5th
</li>
<li>HTML5: Add <a href="http://bit.ly/tFRxe">document.head.</a> (via @WHATWG)4:25 PM Oct 5th
</li>
<li>I've been afraid of changing / because I've built my app / around SQL Features get bolder / schemas get older / Code's getting older 2 @al3x 3:52 PM Oct 5th
</li>
<li>Crazy times: parsing HTML and rendering it using Canvas tag: http://github.com/jamesu/ht... #html5 (via @bradneuberg) 3:17 PM Oct 5th
</li>
<li>James Hall has a really <a href="http://bit.ly/13ZMXZ">nice roundup</a> of cool FF features: full screen video; drag and drop; WebGL; -moz-image-rect 9:42 AM Oct 5th
</li>
<li>Kevin Decker keeps <a href="http://bit.ly/FxLBp">kicking arse with Firediff</a>. His latest version offers revert, search, snapshot, and safe diff 11:27 PM Oct 4th
</li>
<li>Another HTML builder with(HTML). Firebug has one. <a href="http://bit.ly/10rt8O">mkup</a> is one and this is <a href="http://bit.ly/18KTUF">@cramforce's</a> 10:11 PM Oct 4th
</li>
<li><a href="http://bit.ly/4obGpr">"Access binary data of the live &#038; continuous waveform coming from the microphone to create new types of audio apps"</a> 9:51 PM Oct 4th
</li>
<li>Samuel Clay has a nice Raphael demo of a <a href="http://bit.ly/G65qN">Topic Connections Graph</a> 9:42 PM Oct 4th
</li>
<li><a href="http://bit.ly/38YywQ">"We need to disentangle threads from the problems of locks and shared mutable memory."</a>  (via @spyced) 8:46 PM Oct 4th
</li>
<li>Run Perl 6 in the browser? <a href="http://bit.ly/HpIzf">Sprixel is trying to get you there.</a> 8:06 PM Oct 4th
</li>
<li>RT @erikdahlstrom: Script-driven demo exploding a playing video, paper describing some of the <a href="http://tinyurl.com/yctam24">nice svg demos</a> 2:34 PM Oct 4th
</li>
<li>RT @codedread: @danfooo "There's no such thing as the Mobile Web" Fully agree! #svgopen (via @erikdahlstrom) 10:41 AM Oct 4th
</li>
<li>Looking forward to seeing the <a href="http://www.webosschool.com/">classes flushed out</a> for @webos_school. Let us know if you need anything guys! 8:37 AM Oct 4th
</li>
<li>RT @silentlennie "Big 3 &lt;video&gt; improvements: quality (Theora 1.1), seek performance and fullscreen-support. It seems to be maturing nicely"8:34 AM Oct 4th
</li>
<li>Firefox 3.6 has support for <a href="http://bit.ly/2NC46">full screening video</a> 11:15 PM Oct 3rd
</li>
<li>RT @kriszyp > @tlrobinson: node.js, narwhal-jsc proving potential for high perf JS app servers http://bit.ly/15NsS3, http://bit.ly/votoG 10:32 PM Oct 3rd
</li>
<li>Usability testing HTML5 microdata: @hixie posts on the study http://bit.ly/kFVsd 10:31 PM Oct 3rd
</li>
<li>RT @billwscott: Slides from today at Silicon Valley Code Camp 09: DHTML Prototyping. http://bit.ly/1U4zMf. #svcc 10:28 PM Oct 3rd
</li>
<li>This is a top notch post on @font-face including detailed <a href="http://bit.ly/omD7o">browser differences</a> (by Zoltan Hawryluk) 7:00 PM Oct 3rd
</li>
<li><a href="http://bit.ly/22Kihf">The Firefox memory profiler</a> is looking nice thanks to @avarma. There is an <a href="http://bit.ly/4sDPIx">updated addon available</a> 6:54 PM Oct 3rd
</li>
<li>The best and most important talk I've seen in years. Rich Hickey on Clojure's approach to Identity &#038; State http://is.gd/3SLeI (via @jboner) 1:01 PM Oct 2nd
</li>
<li>RT @bradneuberg: "Google urges Web adoption of vector graphics": CNet News: Stephen Shankland: http://tinyurl.com/yexawat #svgweb #svg 12:01 PM Oct 2nd
</li>
<li>Steve Faulkner has tested ARIA support in Windows browsers. FF/IE = 44/43 http://www.paciellogroup.co... 12:00 PM Oct 2nd
</li>
<li>An Engineer's Guide to Bandwidth, a nice right up by YDN http://bit.ly/9HuNP 11:10 AM Oct 2nd
</li>
<li>RT @gruber: Rather than dropping calls, AT&#038;T's new strategy seems to be not ringing your iPhone in the first place when calls come in. 10:23 AM Oct 2nd
</li>
<li>RT @kirillcool > @swingrocks Interesting, #JavaOne is listed on the Moscone center website! http://j.mp/10y7nh OracleOne is here! :) 9:44 AM Oct 2nd
</li>
<li>Joonas Lehtinen has created GWT Graphics, an open source wrapper on SVG and VML http://bit.ly/123rFA 9:36 AM Oct 2nd
</li>
<li>Weave is way faster and reliable now. The team has been cranking the last few months! http://bit.ly/HklpC 11:13 PM Oct 1st
</li>
<li>"processing.js is already amazing. Imagine if we took 8 students, finished it &#038; added 3D support from C3DL?" http://vocamus.net/dave/?p=771 11:07 PM Oct 1st
</li>
<li>David Humphrey shows Cathy Leung's Motionview 3D web goodness http://vocamus.net/dave/?p=771 and ... 11:06 PM Oct 1st
</li>
<li>Nice! The @cloudera folks have created a MooTools based rich web app view for Hadoop: Cloudera Desktop http://bit.ly/3938cT 11:00 PM Oct 1st
</li>
<li>RT @mozhacks new guest post by @humphd: WebGL in the wild: http://bit.ly/10KH4V 10:34 PM Oct 1st
</li>
<li>Just when I get excited about the Web as an app platform.... I use Google Docs :/ 9:45 PM Oct 1st
</li>
<li>Tamura Jones goes into detail on various ways to detect and utilize Chrome Frame, e.g., how to turn it on for all pages http://bit.ly/xjTv2 8:01 PM Oct 1st
</li>
<li>RT @bradneuberg &gt; @sil That's like putting the HTML 4.1 DOCTYPE onto an HTML 2 document &#038; calling it HTML 4.1. Technically but actually no:) 2:44 PM Oct 1st
</li>
<li>Got to see dynaTrace as well as @souders. Some nice work coming there. http://bit.ly/1IgdPD 2:40 PM Oct 1st
</li>
<li>Tony Ross of Microsoft fancies <a href="http://bit.ly/2cJc6F">namespaces lite in HTML</a> 10:56 PM Sep 30th
</li>
<li>Chris Vanrensburg has packaged his <a href="http://bit.ly/16OGqT">zooming image work</a> 9:13 PM Sep 30th
</li>
<li>Not sure I like this praise but... <a href="http://bit.ly/1NVcbr">"Microsoft’s Steve Ballmer slams OS X and Safari and praises Firefox"</a> (via @gen) 8:25 PM Sep 30th
</li>
<li>JavaScript <a href="http://bit.ly/kSOAJ">ZX Spectrum emulator</a> that we posted about awhile back now runs on the iPhone / Mobile Safari 8:59 AM Sep 30th
</li>
<li>@AndreCharland @nitobi if only we would have a chance to meet sometime soon to chat about things :) 3:45 PM Sep 29th
</li>
<li>Kalle Saas has shared a simple JavaScript localization <a href="http://bit.ly/V9MqH">function that he uses</a> 12:00 PM Sep 29th
</li>
<li>RT @dewitt: It's simple math: Microsoft will fix the browser only when they start making money on the web. I'm rooting for Bing. 12:00 AM Sep 29th
</li>
<li>RT @okito: <a href="http://www.listenapp.com">Listenapp</a> - cool new SproutCore 1.0 app 11:58 PM Sep 28th
</li>
<li>RT @kriszyp &gt; @WebReflection Persevere truly preserves the JS paradigm all the way down where CouchDB fails to: dates, circ refs, functions 9:56 PM Sep 28th
</li>
<li>Mojo SDK 1.2 has followed up after webOS 1.2. New tools (e.g. palm-log), new APIs (e.g. Download Manager API), <a href="http://bit.ly/2XQKBX">and more</a> 3:15 PM Sep 28th
</li>
<li>Dean Edwards: "I'm currently writing a JavaScript implementation of the &lt;video&gt; element." Ahhhhh yeah :) Good news for us ;) 1:43 PM Sep 28th
</li>
<p></a></li>
</ul>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ajaxian?a=nn4titvKl4g:ZPGMLGwGvU4:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=nn4titvKl4g:ZPGMLGwGvU4:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=nn4titvKl4g:ZPGMLGwGvU4:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/ajaxian?i=nn4titvKl4g:ZPGMLGwGvU4:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/a-state-of-the-web-via-october-tweets/feed</wfw:commentRss>
		<slash:comments>8</slash:comments>
		<feedburner:origLink>http://ajaxian.com/archives/a-state-of-the-web-via-october-tweets</feedburner:origLink></item>
		<item>
		<title>Firefox 3.6 appearance adds a lot of developer features</title>
		<link>http://feedproxy.google.com/~r/ajaxian/~3/llXWnLkOSiU/firefox-3-6-appearance-adds-a-lot-of-developer-features</link>
		<comments>http://ajaxian.com/archives/firefox-3-6-appearance-adds-a-lot-of-developer-features#comments</comments>
		<pubDate>Mon, 02 Nov 2009 11:30:36 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Browsers]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Mozilla]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7791</guid>
		<description><![CDATA[Firefox 3.6 is already on the scene with the first beta release. The Mozilla team is moving faster and faster these days which is fantastic to see.
At the high level:

Users can now change their browser’s appearance with a single click,  with built in support for Personas.
Firefox 3.6 will alert  users about out of [...]]]></description>
			<content:encoded><![CDATA[<p>Firefox 3.6 is already on the scene with <a href="https://developer.mozilla.org/devnews/index.php/2009/10/30/firefox-3-6-beta-1-is-now-available-for-download/">the first beta release</a>. The Mozilla team is moving faster and faster these days which is fantastic to see.</p>
<p>At the high level:</p>
<ul>
<li>Users can now change their browser’s appearance with a single click,  with built in support for <a href="http://www.getpersonas.com/">Personas</a>.</li>
<li>Firefox 3.6 will <a href="http://theunfocused.net/2009/10/06/firefox-3-6-knows-when-your-plugins-are-out-of-date/">alert  users about out of date plugins</a> to keep them safe.</li>
<li>Open, native video can now be displayed <a href="http://mozillalinks.org/wp/2009/10/firefox-3-6-gets-full-screen-native-video/">full  screen</a>, and supports <a href="https://developer.mozilla.org/En/HTML/Element/Video">poster frames</a>.</li>
<li>Support for the <a href="http://hacks.mozilla.org/2009/10/woff/">WOFF font format</a>.</li>
<li>Improved JavaScript performance, overall browser  responsiveness and startup time.</li>
<li>Support for new CSS, DOM and HTML5 web technologies.</li>
</ul>
<p>But there is <a href="https://developer.mozilla.org/en/Firefox_3.6_for_developers">so much more</a>. There is a ton of CSS work including background-size, gradients, and multiple background images. Video can now have a poster frame, <a href="https://developer.mozilla.org/en/Monitoring_HTTP_activity">HTTP activity can be monitored</a>, Web Workers can self-terminate with close(), drag and drop supports files via <a href="https://developer.mozilla.org/En/DragDrop/DataTransfer">DataTransfer</a>, <a href="https://developer.mozilla.org/en/DOM/window.onhashchange">window.onhashchange</a>.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ajaxian?a=llXWnLkOSiU:Bg1qrq80AJY:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=llXWnLkOSiU:Bg1qrq80AJY:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=llXWnLkOSiU:Bg1qrq80AJY:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/ajaxian?i=llXWnLkOSiU:Bg1qrq80AJY:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/firefox-3-6-appearance-adds-a-lot-of-developer-features/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		<feedburner:origLink>http://ajaxian.com/archives/firefox-3-6-appearance-adds-a-lot-of-developer-features</feedburner:origLink></item>
		<item>
		<title>WebSync: Comet for IIS</title>
		<link>http://feedproxy.google.com/~r/ajaxian/~3/TaNGaLg3Tpg/websync-comet-for-iis</link>
		<comments>http://ajaxian.com/archives/websync-comet-for-iis#comments</comments>
		<pubDate>Fri, 30 Oct 2009 11:02:01 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Comet]]></category>
		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7768</guid>
		<description><![CDATA[The following is a guest post. If you have something to say to the Ajaxian community, please feel free to either link us to your work, or give us a guest posting that goes into detail! Contact us.
My name is Jerod Venema, and I'm excited to write to you about our new Comet server for [...]]]></description>
			<content:encoded><![CDATA[<p><em>The following is a guest post. If you have something to say to the Ajaxian community, please feel free to either link us to your work, or give us a guest posting that goes into detail! <a href="mailto:ajaxians@ajaxian.com">Contact us</a>.</em></p>
<p>My name is Jerod Venema, and I'm excited to write to you about our new Comet server for the Microsoft stack - WebSync.  It is written in 100% managed C#, and uses IIS to reach incredibly high user concurrency. Despite being written in C#, we've made it easy to integrate other languages as well by pre-building client libraries and allowing generic HTTP requests to send messages.</p>
<p>There are many challenges in getting a Comet server to operate efficiently in any language, and the .NET environment delivers its own set of unique challenges.  One of the biggest challenges we faced was how to make IIS "play nice" when scaling to tens of thousands of concurrent HTTP connections and message transactions.  A great deal of time was spent minimizing the memory footprint (even to the point of lazy object construction), optimizing libraries, and digging through pages of profiler results.  Multi-threading reared its ugly (but powerful) head on more than one occasion as we sought to take maximum advantage of multiple CPU cores while keeping locking and concurrency issues to a minimum.  We even ended up writing a new lock-free data structure similar to a linked queue that allows us to perform multiple-writer add/remove operations - very helpful when dealing with large lists of clients and messages. Once all was said and done, we tested on a $500 Acer desktop and saw over 30,000 concurrent users and 25,000 messages per second. (We were pretty pumped when we saw some of those numbers coming through!)</p>
<p>Once we were satisfied with the server's performance, we set our sights on a JavaScript client. We had originally been using the Dojo Toolkit, but the overhead was more than what we wanted (it rang in at about 90k after compression, but before gzipping), so we wrote our own library that, when compressed and gzipped, comes across the wire at about 8k total (just over 15k before gzipping). We also ran into a slew of cross-browser issues (of course), in particular when dealing with long-lived HTTP connections. A bit of effort, though, and we can now claim the client to be fully compatible with over a dozen browsers, from IE5.5 all the way to the iPhone and Android browsers.  Being fans of open-source technology (even in a Microsoft world), we decided to use the Bayeux transport protocol rather than develop our own, so any Bayeux-compliant client can link in to the server.</p>
<p>We also spent some time on making it easy to integrate into non-browser applications. One of the really neat features is the ability to publish data via a simple GET/POST request, so it can integrate into any application that can make a web request, regardless of the language. If you're writing in PHP or .NET, we've made life even easier by writing publishers that wrap up the creation and invocation of the web request into single method calls.</p>
<p>Oh, and we've got a hosted version too (WebSync On-Demand), so people with smaller sites who don't want the cost of hosting their own Comet server can still get all the benefits of a full Comet solution. For the On-Demand solution we've also implemented request proxing, which allows developers to direct the low-impact publish and subscribe requests to their server first, so they can pre-process any incoming messages (to add authentication, save messages to a database, etc). And again, for PHP or .NET users, it's a one-liner to implement.</p>
<p>Anyway, it's a pretty neat product, easy to get started with, and as I said, we're pretty excited and proud of it, so <a href="http://www.frozenmountain.com/websync">check it out</a> including <a href="http://www.frozenmountain.com/websync/demos">demos</a> or <a href="http://www.frozenmountain.com/documentation/tutorials">tutorials</a> and let us know what you think!</p>
<p><object width="400" height="270"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=4748722&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=4748722&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="270"></embed></object></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ajaxian?a=TaNGaLg3Tpg:VEILGcZBDYE:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=TaNGaLg3Tpg:VEILGcZBDYE:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=TaNGaLg3Tpg:VEILGcZBDYE:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/ajaxian?i=TaNGaLg3Tpg:VEILGcZBDYE:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/websync-comet-for-iis/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		<feedburner:origLink>http://ajaxian.com/archives/websync-comet-for-iis</feedburner:origLink></item>
		<item>
		<title>YUI 2.8.0 now Caja compliant</title>
		<link>http://feedproxy.google.com/~r/ajaxian/~3/GBlMwi4KYoA/yui-2-8-0-now-caja-compliant</link>
		<comments>http://ajaxian.com/archives/yui-2-8-0-now-caja-compliant#comments</comments>
		<pubDate>Thu, 29 Oct 2009 16:48:41 +0000</pubDate>
		<dc:creator>Chris Heilmann</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Library]]></category>
		<category><![CDATA[Security]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7786</guid>
		<description><![CDATA[Caja is one of the most promising attempts to deliver secure web applications not prone to the attacks that normal JavaScript solutions sadly enough allow for. Let's face it - the concept of global variables and the lack of sandboxed environments in addition to the fun that is browser security holes makes the web as [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://code.google.com/p/google-caja/">Caja</a> is one of the most promising attempts to deliver secure web applications not prone to the attacks that normal JavaScript solutions sadly enough allow for. Let's face it - the concept of global variables and the lack of sandboxed environments in addition to the fun that is browser security holes makes the web as it stands now quite hard to secure. </p>
<p>The problem with Caja is that it is quite troublesome to get your head around. Caja pre-processes web content (HTML, CSS and JavaScript) and converts it to something really unreadable but very secure. Practices that are insecure but have become quite common use rightfully are being flagged up as errors and fail to compile. This reminds me of Netscape 4.x rightfully not rendering tables that weren't closed or Netscape 6 not supporting document.all any more - the response from developers was outrage as we are happy to write "convenient" code. </p>
<p>The way around a lot of browser bugs and implementation funnies (see John Resig's talk <a href="http://www.yuiblog.com/blog/2009/02/02/video-resig-2/">the DOM is a mess</a> for a deep-dive on that) is libraries. All the different JavaScript libraries - Dojo, MooTools, jQuery, YUI... first and foremost want to make our lives easier by making browsers behave. That's cool and all, but the problem is that the libraries themselves are not Caja compliant. </p>
<p>As Yahoo's <a href="http://developer.yahoo.com/yap/">new application platform YAP</a> that allows you to run small apps in My Yahoo and the Yahoo homepage uses Caja there was an immediate need to make YUI work. The YUI team and the YAP engineers put their heads down and now announced that YUI has been cleaned up and made compatible.</p>
<p>As Caja doesn't allow for <code>script</code> with a <code>src</code> inside a container this restriction has been lifted for the official YUI locations. Read more details about the changes to YUI <a href="http://developer.yahoo.net/blog/archives/2009/10/yap_yui2.html">on the YDN blog</a> and here are the links to the docs and the forum where I'd encourage you to report any bugs you find:</p>
<ul>
<li><a href="http://developer.yahoo.com/yap/guide/yui-support.html">YUI on YAP documentation</a></li>
<li><a href="http://developer.yahoo.net/forum/index.php?showforum=40">YUI on YAP developer forum</a></li>
</ul>
<p>This is a great step towards secure apps that can be built easily. There were a few earlier attempts to "fix" prototype to become Caja compliant and I would love that to come to fruition. Furthermore, a Caja compliant jQuery and Mootools would rock, too. The official whitelisted endpoint for inclusion could be the <a href="http://code.google.com/apis/ajaxlibs/">Google Ajax Libraries API</a>.  </p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ajaxian?a=GBlMwi4KYoA:Hb8_88vDcus:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=GBlMwi4KYoA:Hb8_88vDcus:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=GBlMwi4KYoA:Hb8_88vDcus:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/ajaxian?i=GBlMwi4KYoA:Hb8_88vDcus:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/yui-2-8-0-now-caja-compliant/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://ajaxian.com/archives/yui-2-8-0-now-caja-compliant</feedburner:origLink></item>
		<item>
		<title>YQLAutoTagger – making it easier for people to tag their content</title>
		<link>http://feedproxy.google.com/~r/ajaxian/~3/6iaLcrhTF9A/yqlautotagger-making-it-easier-for-people-to-tag-their-content</link>
		<comments>http://ajaxian.com/archives/yqlautotagger-making-it-easier-for-people-to-tag-their-content#comments</comments>
		<pubDate>Thu, 29 Oct 2009 14:10:20 +0000</pubDate>
		<dc:creator>Chris Heilmann</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Usability]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7783</guid>
		<description><![CDATA[I am right now part of the Stackoverflow DevDays conference tour introducing the attendees to the things Yahoo has to offer for developers. One of the things is YQL as an easy way to use web services. When talking to the Stackoverflow developers they wondered how to make it easier for people to tag their [...]]]></description>
			<content:encoded><![CDATA[<p>I am right now part of the <a href="http://stackoverflow.carsonified.com/">Stackoverflow DevDays</a> conference tour introducing the attendees to the things <a href="http://developer.yahoo.com">Yahoo has to offer for developers</a>. One of the things is YQL as an easy way to use web services. When talking to the Stackoverflow developers they wondered how to make it easier for people to tag their questions. I've taken on the challenge and whipped up a  GreaseMonkey script that enhances the Stackoverflow question form to automatically add tags to the question using the <a href="http://developer.yahoo.com/search/content/V1/termExtraction.html">Yahoo Term Extractor API</a>. You can see a <a href="http://www.youtube.com/watch?v=SA4Et1DiVbE">screencast of the pimped StackOverflow</a> or <a href="http://github.com/codepo8/YQLAutoTagger/raw/master/stackoverflow_tags.user.js.">install the GreaseMonkey Script</a>. </p>
<p>The next logical step was to clean up the script a bit and make it work without Greasemonkey. Now you can simply embed it into any document. See it in action on YouTube:</p>
<p><object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/GZL3xrcQr3c&#038;hl=en&#038;fs=1&#038;rel=0&#038;color1=0x006699&#038;color2=0x54abd6"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/GZL3xrcQr3c&#038;hl=en&#038;fs=1&#038;rel=0&#038;color1=0x006699&#038;color2=0x54abd6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object></p>
<p>As shown in the <a href="http://isithackday.com/demos/yqlautotagger.html">demo page</a>, all you need to do is to point to the script and call the <code>init()</code> method with the two field IDs as parameters.</p>
<div class="igBar"><a href="javascript:showCodeTxt('html-22');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">HTML:</span>
<div id="html-22">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/form.html"><span style="color: #000000; font-weight: bold;">&lt;form</span></a> <span style="color: #000066;">action</span>=<span style="color: #ff0000;">"#"</span> <span style="color: #000066;">method</span>=<span style="color: #ff0000;">"get"</span> <span style="color: #000066;">accept-charset</span>=<span style="color: #ff0000;">"utf-8"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;<span style="color: #009900;"><a href="http://december.com/html/4/element/label.html"><span style="color: #000000; font-weight: bold;">&lt;label</span></a> <span style="color: #000066;">for</span>=<span style="color: #ff0000;">"mainfield"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>Your Message:<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/label&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;<span style="color: #009900;"><a href="http://december.com/html/4/element/textarea.html"><span style="color: #000000; font-weight: bold;">&lt;textarea</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"mainfield"</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">"mainfield"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>Hello I am a programmer that does care about interfaces. What kind of library can I use that gives me a defined set of widgets that have been tested in the real world?<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/textarea&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;<span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/label.html"><span style="color: #000000; font-weight: bold;">&lt;label</span></a> <span style="color: #000066;">for</span>=<span style="color: #ff0000;">"tags"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>Tags:<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/label&gt;</span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">&lt;input</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text"</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"tags"</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">"tags"</span>/<span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/form&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/script.html"><span style="color: #000000; font-weight: bold;">&lt;script</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/javascript"</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">"http://github.com/codepo8/YQLAutoTagger/raw/master/YQLAutoTagger.js"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/script&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/script.html"><span style="color: #000000; font-weight: bold;">&lt;script</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/javascript"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>YQLAutoTagger.init('mainfield','tags');<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/script&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p>There are some ways to customise the script and its behaviour, all of which are described on GitHub. <a href="http://github.com/codepo8/YQLAutoTagger/">Download the script</a> and <a href="http://wiki.github.com/codepo8/YQLAutoTagger">read the docs</a> there.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ajaxian?a=6iaLcrhTF9A:urWtvDWjxes:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=6iaLcrhTF9A:urWtvDWjxes:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=6iaLcrhTF9A:urWtvDWjxes:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/ajaxian?i=6iaLcrhTF9A:urWtvDWjxes:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/yqlautotagger-making-it-easier-for-people-to-tag-their-content/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<feedburner:origLink>http://ajaxian.com/archives/yqlautotagger-making-it-easier-for-people-to-tag-their-content</feedburner:origLink></item>
		<item>
		<title>S2.enableMultitouchSupport = true; // Getting touchy feely with scripty</title>
		<link>http://feedproxy.google.com/~r/ajaxian/~3/SP6LewQ5J2Q/s2-enablemultitouchsupport-true-getting-touchy-feely-with-scripty</link>
		<comments>http://ajaxian.com/archives/s2-enablemultitouchsupport-true-getting-touchy-feely-with-scripty#comments</comments>
		<pubDate>Thu, 29 Oct 2009 11:56:22 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Prototype]]></category>
		<category><![CDATA[Scriptaculous]]></category>
		<category><![CDATA[multitouch]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7766</guid>
		<description><![CDATA[
Thomas Fuchs has been working with Nokia on their multi-touch API for Qt/WebKit:

scripty2 supports multiple API vendors for Multitouch events, and even provides a desktop emulation (click+drag to pan, shift+click+drag to scale and rotate)– so you can try this out even without having multitouch hardware at your disposal.
Currently the scripty2 API abstraction event supports Desktop [...]]]></description>
			<content:encoded><![CDATA[<p><object width="425" height="349"><param name="movie" value="http://www.youtube.com/v/WCW561oVVxQ&#038;rel=0&#038;border=1&#038;color1=0xb1b1b1&#038;color2=0xcfcfcf&#038;hl=en&#038;feature=player_embedded&#038;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/WCW561oVVxQ&#038;rel=0&#038;border=1&#038;color1=0xb1b1b1&#038;color2=0xcfcfcf&#038;hl=en&#038;feature=player_embedded&#038;fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="425" height="349"></embed></object></p>
<p>Thomas Fuchs has been <a href="http://mir.aculo.us/2009/10/15/pinch-twist-zoom-bringing-multitouch-to-a-browser-near-you/">working with Nokia on their multi-touch API for Qt/WebKit</a>:</p>
<blockquote><p>
scripty2 supports multiple API vendors for Multitouch events, and even provides a desktop emulation (click+drag to pan, shift+click+drag to scale and rotate)– so you can try this out even without having multitouch hardware at your disposal.</p>
<p>Currently the scripty2 API abstraction event supports Desktop emulation, Nokia Starlight and Apple iPhone Mobile Safari. With just one API, you can now multi-touch enable any web application easily, just <a href="http://scripty2.com/demos/touch/">check out the demos</a>.</p>
<p>In a recent update to scripty2, I’ve also introduced automatic support for WebKit CSS transitions, so whenever scripty2 effects are used and CSS transitions are available, the effects engine will automatically do the right thing for you.</p>
<p>All in all, using this in your web sites or apps boils down to just a couple of lines of code:</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-24');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-24">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'element'</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">observe</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'manipulate:update'</span>, <span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>event<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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; $<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'element'</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">transform</span><span style="color:#006600; font-weight:bold;">&#40;</span>event.<span style="color: #006600;">memo</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">setStyle</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;left: event.<span style="color: #006600;">memo</span>.<span style="color: #006600;">panX</span>+<span style="color: #3366CC;">'px'</span>, top: event.<span style="color: #006600;">memo</span>.<span style="color: #006600;">panY</span>+<span style="color: #3366CC;">'px'</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
</blockquote>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ajaxian?a=SP6LewQ5J2Q:fPzJoJnLE4I:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=SP6LewQ5J2Q:fPzJoJnLE4I:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=SP6LewQ5J2Q:fPzJoJnLE4I:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/ajaxian?i=SP6LewQ5J2Q:fPzJoJnLE4I:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/s2-enablemultitouchsupport-true-getting-touchy-feely-with-scripty/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		<feedburner:origLink>http://ajaxian.com/archives/s2-enablemultitouchsupport-true-getting-touchy-feely-with-scripty</feedburner:origLink></item>
		<item>
		<title>Would you like a _ with that $? New library gives JS what it should have</title>
		<link>http://feedproxy.google.com/~r/ajaxian/~3/gci9NYDYBzQ/would-you-like-a-_-with-that-new-library-gives-js-what-it-should-have</link>
		<comments>http://ajaxian.com/archives/would-you-like-a-_-with-that-new-library-gives-js-what-it-should-have#comments</comments>
		<pubDate>Thu, 29 Oct 2009 05:50:06 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Library]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7780</guid>
		<description><![CDATA[Jeremy Ashkenas and the DocumentCloud team have just released Underscore.js a small library that provides all the functional programming helpers that you expect from Prototype.js or Ruby, but without extending any core JavaScript objects.
Jeremy told us:

This makes it a natural fit alongside jQuery, without having to worry about the conflicts and redundant functionality that using [...]]]></description>
			<content:encoded><![CDATA[<p>Jeremy Ashkenas and the DocumentCloud team have just released <a href="http://documentcloud.github.com/underscore/">Underscore.js</a> a small library that provides all the functional programming helpers that you expect from Prototype.js or Ruby, but without extending any core JavaScript objects.</p>
<p>Jeremy told us:</p>
<blockquote><p>
This makes it a natural fit alongside jQuery, without having to worry about the conflicts and redundant functionality that using Prototype and jQuery together would entail. For browsers that support the new Javascript 1.6 array functions, it delegates to the native implementations, so your "_.map()" can run at full speed, where available. It's a tiny download, 4k when gzipped. Here's the project page, with full documentation, live <a href="http://documentcloud.github.com/underscore/test/test.html">tests and benchmarks</a>.
</p></blockquote>
<p>Some of the utilities:</p>
<p>      <b>Collections</b><br />
      <span class="methods"><a href="#each">each</a>, <a href="#map">map</a>,<br />
      <a href="http://documentcloud.github.com/underscore/#reduce">reduce</a>, <a href="http://documentcloud.github.com/underscore/#detect">detect</a>, <a href="#select">select</a>, <a href="http://documentcloud.github.com/underscore/#reject">reject</a>, <a href="http://documentcloud.github.com/underscore/#all">all</a>,<br />
      <a href="http://documentcloud.github.com/underscore/#any">any</a>, <a href="http://documentcloud.github.com/underscore/#include">include</a>, <a href="http://documentcloud.github.com/underscore/#invoke">invoke</a>, <a href="http://documentcloud.github.com/underscore/#pluck">pluck</a>, <a href="http://documentcloud.github.com/underscore/#max">max</a>,<br />
      <a href="http://documentcloud.github.com/underscore/#min">min</a>, <a href="http://documentcloud.github.com/underscore/#sortBy">sortBy</a>, <a href="http://documentcloud.github.com/underscore/#sortedIndex">sortedIndex</a>, <a href="http://documentcloud.github.com/underscore/#toArray">toArray</a>,<br />
      <a href="http://documentcloud.github.com/underscore/#size">size</a></span> </p>
<p>
      <b>Arrays</b><br />
      <br />
      <span class="methods"><a href="http://documentcloud.github.com/underscore/#first">first</a>, <a href="http://documentcloud.github.com/underscore/#last">last</a>,<br />
      <a href="http://documentcloud.github.com/underscore/#compact">compact</a>, <a href="http://documentcloud.github.com/underscore/#flatten">flatten</a>, <a href="http://documentcloud.github.com/underscore/#without">without</a>, <a href="http://documentcloud.github.com/underscore/#uniq">uniq</a>,<br />
      <a href="http://documentcloud.github.com/underscore/#intersect">intersect</a>, <a href="http://documentcloud.github.com/underscore/#zip">zip</a>, <a href="http://documentcloud.github.com/underscore/#indexOf">indexOf</a></span>,<br />
      <a href="http://documentcloud.github.com/underscore/#lastIndexOf">lastIndexOf</a></p>
<p>
      <b>Functions</b><br />
      <br />
      <span class="methods"><a href="http://documentcloud.github.com/underscore/#bind">bind</a>, <a href="http://documentcloud.github.com/underscore/#bindAll">bindAll</a>, <a href="http://documentcloud.github.com/underscore/#delay">delay</a>,<br />
      <a href="http://documentcloud.github.com/underscore/#defer">defer</a>, <a href="http://documentcloud.github.com/underscore/#wrap">wrap</a></span>, <a href="http://documentcloud.github.com/underscore/#compose">compose</a></p>
<p>
      <b>Objects</b><br />
      <br />
      <span class="methods"><a href="http://documentcloud.github.com/underscore/#keys">keys</a>, <a href="http://documentcloud.github.com/underscore/#values">values</a>,<br />
      <a href="http://documentcloud.github.com/underscore/#extend">extend</a>, <a href="http://documentcloud.github.com/underscore/#clone">clone</a>, <a href="http://documentcloud.github.com/underscore/#isEqual">isEqual</a>, <a href="http://documentcloud.github.com/underscore/#isElement">isElement</a>,<br />
      <a href="http://documentcloud.github.com/underscore/#isArray">isArray</a>, <a href="http://documentcloud.github.com/underscore/#isFunction">isFunction</a>, <a href="http://documentcloud.github.com/underscore/#isUndefined">isUndefined</a></p>
<p>      </span>
    </p>
<p>
      <b>Utility</b><br />
      <br />
      <span class="methods"><a href="http://documentcloud.github.com/underscore/#noConflict">noConflict</a>,<br />
      <a href="http://documentcloud.github.com/underscore/#uniqueId">uniqueId</a>, <a href="http://documentcloud.github.com/underscore/#template">template</a><br />
    </span></p>
<p>There has already been nice community patches and suggestions from the community, and Kris Kowal helped make it CommonJS-compliant.</p>
<p>Obviously, other libraries have covered a lot of these before, but it is nice to see a small core covering.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ajaxian?a=gci9NYDYBzQ:ixl67Z2gbsc:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=gci9NYDYBzQ:ixl67Z2gbsc:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=gci9NYDYBzQ:ixl67Z2gbsc:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/ajaxian?i=gci9NYDYBzQ:ixl67Z2gbsc:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/would-you-like-a-_-with-that-new-library-gives-js-what-it-should-have/feed</wfw:commentRss>
		<slash:comments>21</slash:comments>
		<feedburner:origLink>http://ajaxian.com/archives/would-you-like-a-_-with-that-new-library-gives-js-what-it-should-have</feedburner:origLink></item>
		<item>
		<title>SproutCore 1.0 gets closer; new demos too</title>
		<link>http://feedproxy.google.com/~r/ajaxian/~3/50Eq-8dAC4Q/sproutcore-1-0-gets-closer-new-demos-too</link>
		<comments>http://ajaxian.com/archives/sproutcore-1-0-gets-closer-new-demos-too#comments</comments>
		<pubDate>Wed, 28 Oct 2009 11:40:14 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[SproutCore]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7762</guid>
		<description><![CDATA[SproutCore 1.0 has its first release candidate that you can grab via gem install sproutcore.

There are also new demos to play with and other interesting features:
Animation Layer

I’ve been working on a mixin to add animation to SproutCore views.
The current version only works for layout properties, and does not yet work for centerX and centerY properties [...]]]></description>
			<content:encoded><![CDATA[<p>SproutCore 1.0 has its first release candidate that you can grab via <code>gem install sproutcore</code>.</p>
<p><img src="http://ajaxian.com/wp-content/images/sproutcoredemos.png" alt="sproutcoredemos" title="sproutcoredemos" width="410" height="351" class="alignnone size-full wp-image-7763" /></p>
<p>There are also new <a href="http://demo.sproutcore.com/">demos to play with</a> and other interesting features:</p>
<p><a href="http://create.tpsitulsa.com/blog/2009/10/21/javascript-animation-benchmarks/">Animation Layer</a></p>
<blockquote><p>
I’ve been working on a mixin to add animation to SproutCore views.</p>
<p>The current version only works for layout properties, and does not yet work for centerX and centerY properties (they used to work, but some of the performance optimizations have made it slightly more tricky—I’ll be adding it back soon, though).</p>
<p>I decided to see how fast the code was in different browsers. The tests were done using a test application which generated a specified number of views, and then, once per second, updated a “frames per second” display. The measuring is somewhat subjective, as I have to deduce, based on consistency (or lack thereof) in the numbers, what the frame rate actually is. For the most part, they were pretty consistent, but the WebKit browsers at really low numbers of views (and really high frame rates) could be quite inconsistent at times.
</p></blockquote>
<p><a href="http://create.tpsitulsa.com/blog/2009/10/17/sprouting%E2%80%94automated-spriting-for-sproutcore/">Sprouting—Automated Spriting for SproutCore</a></p>
<p>A Python script that generates CSS like:</p>
<div class="igBar"><a href="javascript:showCodeTxt('css-27');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">CSS:</span>
<div id="css-27">
<div class="css">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #6666ff;">.set-name </span>.icon-name.icon, <span style="color: #6666ff;">.set-name </span>.icon-name<span style="color: #6666ff;">.icon </span><span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color: #808080; font-style: italic;">/* CSS */</span> <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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p>which you can work with via:</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-28');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-28">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">ImageView.<span style="color: #006600;">design</span><span style="color:#006600; font-weight:bold;">&#40;</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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; layout: <span style="color:#006600; font-weight:bold;">&#123;</span> left: <span style="color:#800000;">100</span>, top: <span style="color:#800000;">100</span>, width: <span style="color:#800000;">64</span>, height: <span style="color:#800000;">64</span> <span style="color:#006600; font-weight:bold;">&#125;</span>,</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; value: <span style="color: #3366CC;">"common refresh-64 icon"</span> <span style="color: #009900; font-style: italic;">// using SproutCore's built-in className support for spriting</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">View.<span style="color: #006600;">design</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; layout: <span style="color:#006600; font-weight:bold;">&#123;</span>left: <span style="color:#800000;">100</span>, top:<span style="color:#800000;">100</span>, width:<span style="color:#800000;">256</span>, height: <span style="color:#800000;">256</span><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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; classNames: <span style="color:#006600; font-weight:bold;">&#91;</span><span style="color: #3366CC;">"common"</span><span style="color:#006600; font-weight:bold;">&#93;</span>, <span style="color: #009900; font-style: italic;">// the theme</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; childViews: <span style="color:#006600; font-weight:bold;">&#91;</span><span style="color: #3366CC;">"styledView"</span><span style="color:#006600; font-weight:bold;">&#93;</span>,</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; styledView: ImageView.<span style="color: #006600;">design</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; layout: <span style="color:#006600; font-weight:bold;">&#123;</span> left: <span style="color:#800000;">100</span>, top: <span style="color:#800000;">100</span>, width: <span style="color:#800000;">64</span>, height: <span style="color:#800000;">64</span> <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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; value: <span style="color: #3366CC;">"refresh-64 icon"</span> <span style="color: #009900; font-style: italic;">// using SproutCore's built-in className support for spriting</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color:#006600; font-weight:bold;">&#125;</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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ajaxian?a=50Eq-8dAC4Q:mHdl_d2VtgQ:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=50Eq-8dAC4Q:mHdl_d2VtgQ:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=50Eq-8dAC4Q:mHdl_d2VtgQ:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/ajaxian?i=50Eq-8dAC4Q:mHdl_d2VtgQ:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/sproutcore-1-0-gets-closer-new-demos-too/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		<feedburner:origLink>http://ajaxian.com/archives/sproutcore-1-0-gets-closer-new-demos-too</feedburner:origLink></item>
		<item>
		<title>JavaScriptMVC 2.0: Major Rewrite, Strong Test Suite Integration and Improved Documentation</title>
		<link>http://feedproxy.google.com/~r/ajaxian/~3/mVIQdct0gtg/javascriptmvc-2-0-major-rewrite-strong-test-suite-integration-and-improved-documentation</link>
		<comments>http://ajaxian.com/archives/javascriptmvc-2-0-major-rewrite-strong-test-suite-integration-and-improved-documentation#comments</comments>
		<pubDate>Tue, 27 Oct 2009 20:00:27 +0000</pubDate>
		<dc:creator>Rey Bango</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7771</guid>
		<description><![CDATA[The JavaScriptMVC team has announced v2.0, a major update &#038; rewrite to their MVC-based JavaScript framework. The release incorporates several big changes including a rewrite of the library to leverage jQuery's functionality and style guidelines. For example, if you have a list of entries, you can organize the event handlers like:
PLAIN TEXT
JAVASCRIPT:




&#160;


$.Controller.extend&#40;"EntriesController",&#123;


&#160; ".entry click" : [...]]]></description>
			<content:encoded><![CDATA[<p>The <a href="http://javascriptmvc.com">JavaScriptMVC</a> team has announced v2.0, a major update &#038; rewrite to their MVC-based JavaScript framework. The release incorporates several big changes including a rewrite of the library to leverage <a href="http://jquery.com">jQuery's</a> functionality and style guidelines. For example, if you have a list of entries, you can organize the event handlers like:</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-31');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-31">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">$.<span style="color: #006600;">Controller</span>.<span style="color: #006600;">extend</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"EntriesController"</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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #3366CC;">".entry click"</span> : <span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>$el, ev<span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#123;</span> ...<span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #3366CC;">".handle draginit"</span> : <span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>$el, ev, drag<span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#123;</span> ... <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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #3366CC;">".trash dropon"</span> : <span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>$el, ev, drop, drag<span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#123;</span> ...<span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><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="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p>And then add 'EntryController' functionality like:</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-32');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-32">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'.entries_list'</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">entries_controller</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p>The new release of JSMVC offers deep integration with the <a href="http://seleniumhq.org/">Selenium</a> web application testing system, <a href="http://env-js.appspot.com/">Env.js</a> and the projects own in-browser testing library. JavaScriptMVC has integrated all three approaches, enabling developers to write and debug tests in the browser, but automatically run the same tests in Selenium and Rhino/Env.js.</p>
<p>JMVC's documentation application has also undergone a major enhancement.  The interface, based off <a href="http://api.jquery.com/">Remy Sharp's jQuery API Browser</a>, allows rapid search of any part of your documentation.  </p>
<p>A <a href="http://cdn.javascriptmvc.com/videos/2_0/2_0_demo.htm">video</a> explaining the new enhancements can be found <a href="http://cdn.javascriptmvc.com/videos/2_0/2_0_demo.htm">here</a>.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ajaxian?a=mVIQdct0gtg:jFtCzuHuXAE:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=mVIQdct0gtg:jFtCzuHuXAE:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=mVIQdct0gtg:jFtCzuHuXAE:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/ajaxian?i=mVIQdct0gtg:jFtCzuHuXAE:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/javascriptmvc-2-0-major-rewrite-strong-test-suite-integration-and-improved-documentation/feed</wfw:commentRss>
		<slash:comments>11</slash:comments>
		<feedburner:origLink>http://ajaxian.com/archives/javascriptmvc-2-0-major-rewrite-strong-test-suite-integration-and-improved-documentation</feedburner:origLink></item>
		<item>
		<title>BookGlutton: Dojo-driven eBook Reading App</title>
		<link>http://feedproxy.google.com/~r/ajaxian/~3/zJvMAHG7yos/bookglutton</link>
		<comments>http://ajaxian.com/archives/bookglutton#comments</comments>
		<pubDate>Tue, 27 Oct 2009 11:28:19 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Dojo]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Showcase]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=7755</guid>
		<description><![CDATA[
Aaron Miller and his team have released BookGlutton an online bookstore and social network meant to facilitate social reading. It features a Dojo-driven e-book reading app with chat and annotation, and the store now offers over 500 O'Reilly titles for sale.
The site is built using Dojo and PHP and features pagination, real-time chat, group and [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://ajaxian.com/wp-content/images/bookglutton.png" alt="bookglutton" title="bookglutton" width="500" height="309" class="alignnone size-full wp-image-7756" /></p>
<p>Aaron Miller and his team have released <a href="http://www.bookglutton.com/reader/unbound?group_id=0&#038;id=3160&#038;view=ub#href(cover.html#!0p:0)">BookGlutton</a> an online bookstore and social network meant to facilitate social reading. It features a Dojo-driven e-book reading app with chat and annotation, and the store now offers over 500 O'Reilly titles for sale.</p>
<p>The site is built using Dojo and PHP and features pagination, real-time chat, group and private modes and asynchronous annotation of each paragraph in a book. It can be embedded in other sites as a widget, and is one of only a few web-based apps which can read the open, reflowable e-book format known as ePub.</p>
<p>Nice work guys!</p>
<div style="display:none"><a href="http://desiredav.net/buy-cheap-autodesk-autocad-2010.php">Buy Cheap Autodesk AutoCAD 2010</a></div>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/ajaxian?a=zJvMAHG7yos:MjDdHB5SUOk:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=zJvMAHG7yos:MjDdHB5SUOk:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/ajaxian?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/ajaxian?a=zJvMAHG7yos:MjDdHB5SUOk:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/ajaxian?i=zJvMAHG7yos:MjDdHB5SUOk:D7DqB2pKExk" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/bookglutton/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://ajaxian.com/archives/bookglutton</feedburner:origLink></item>
	</channel>
</rss>
