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

<channel>
	<title>Ajaxian &#187; Michael Mahemoff</title>
	<atom:link href="http://ajaxian.com/archives/author/michael/feed" rel="self" type="application/rss+xml" />
	<link>http://ajaxian.com</link>
	<description>Cleaning up the web with Ajax</description>
	<lastBuildDate>Thu, 02 Feb 2012 22:23:48 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
    	<generator>http://wordpress.org/?v=3.2</generator>
		<item>
		<title>jQuery Data Binding, Templates, and Mobile: John Resig at FOWA</title>
		<link>http://ajaxian.com/archives/jquery-data-binding-templates-and-mobile-john-resig-at-fowa</link>
		<comments>http://ajaxian.com/archives/jquery-data-binding-templates-and-mobile-john-resig-at-fowa#comments</comments>
		<pubDate>Tue, 05 Oct 2010 15:35:03 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=10396</guid>
		<description><![CDATA[Here's a live blog from jQuery creator John Resig's talk at FOWA, where he's giving us an update on the new toys from the jQuery team. Data Link jQuery already supports a data API: PLAIN TEXT JAVASCRIPT: &#160; $&#40;"div"&#41;.data&#40;"test", 5&#41;; $&#40;"div"&#41;.data&#40;"test"&#41;===5; $&#40;"div"&#41;.removeData&#40;&#41;; &#160; This is better than attaching data directly to data nodes for various <a href="http://ajaxian.com/archives/jquery-data-binding-templates-and-mobile-john-resig-at-fowa">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>Here's a live blog from jQuery creator John Resig's talk at FOWA, where he's giving us an update on the <a href="http://blog.jquery.com/2010/10/04/new-official-jquery-plugins-provide-templating-data-linking-and-globalization/">new</a> <a href="http://jquerymobile.com/">toys</a> from the jQuery team.</p>
<p><a href="http://ajaxian.com/wp-content/images/resig.jpg"><img src="http://ajaxian.com/wp-content/images/resig.jpg" alt="" title="resig" width="300" height="450" class="alignnone size-full wp-image-10400" /></a></p>
<h3>Data Link</h3>
<p>jQuery already supports a data API:</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-6');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-6">
<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;">"div"</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">data</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"test"</span>, <span style="color:#800000;">5</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;">&#40;</span><span style="color: #3366CC;">"div"</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">data</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"test"</span><span style="color:#006600; font-weight:bold;">&#41;</span>===<span style="color:#800000;">5</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;">&#40;</span><span style="color: #3366CC;">"div"</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">removeData</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;</div>
</li>
</ol>
</div>
</div>
</div>
<p>This is better than attaching data directly to data nodes for various reasons, e.g. storing non-string data and improving performance. And it also avoids memory leaks - when you remove an element, jQuery removes everything. Looking towards jQuery 1.4.3, the project had to decide if they want to remove data events, and they decided to keep them and make them more useful.</p>
<p>The <a href="http://api.jquery.com/category/plugins/data-link/">new data linking plugin</a>, developed in conjunction with Microsoft and released yesterday, supports binding between DOM objects and elements. Binding from an object to a form element looks like this:</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-7');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-7">
<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: #003366; font-weight: bold;">var</span> user = <span style="color: #003366; font-weight: bold;">new</span> User<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;">$<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"form"</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">link</span><span style="color:#006600; font-weight:bold;">&#40;</span>user, <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; firstName: <span style="color: #3366CC;">"first-name"</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; lastName: <span style="color: #3366CC;">"last-name"</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>
<p>Whenever "first-name" or "last-name" elements are updated, the form element is updated. You can also bind in the opposite direction, so that a form element changes when you change an object.</p>
<p><a href="http://github.com/jquery/jquery-datalink">More info on GitHub</a>.</p>
<h3>Templating</h3>
<p>Templating has become a big deal in Javascript, and there's now an official <a href="http://api.jquery.com/category/plugins/templates/">jQuery templating plugin</a>, also released yesterday, which John tells me has a good chance of being integrated into the core at some point. John told me his <a href="http://ejohn.org/blog/javascript-micro-templating/">original Micro-Templating library</a> was considered at one point, but the new templating is more refined.</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-8');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-8">
<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;">"#test"</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">append</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"&lt;li&gt;&lt;em&gt;${name}&lt;/em&gt;&lt;/li&gt;"</span>, <span style="color: #3366CC;">"john"</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>Pre-compiling template strings is possible too:</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-9');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-9">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="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: #003366; font-weight: bold;">var</span> data = <span style="color:#006600; font-weight:bold;">&#123;</span> firstName: <span style="color: #3366CC;">"John"</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;">$<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"#item"</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">tmp</span><span style="color:#006600; font-weight:bold;">&#40;</span>data<span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">appendTo</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"ul"</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;">&lt;script id=<span style="color: #3366CC;">"item"</span> type=<span style="color: #3366CC;">"text/html"</span>&gt;</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; &lt;li&gt;$<span style="color:#006600; font-weight:bold;">&#40;</span>firstName<span style="color:#006600; font-weight:bold;">&#125;</span>&lt;/li&gt;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&lt;/script&gt;</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>The most interesting feature is that elements retain the data that made them - you can ask an element "what data did you come from"?</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;"><span style="color: #003366; font-weight: bold;">var</span> lastTemplateItem = $<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">".movieName:last"</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">tmplItem</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;"><span style="color: #003366; font-weight: bold;">var</span> movie = lastTemplateItem.<span style="color: #006600;">data</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> htmlNodes = lastTemplateItem.<span style="color: #006600;">nodes</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>John argues that developers try to create too much abstraction between HTML and the data model. At least in the client, the DOM "is everywhere" and you should be okay with storing your data against it.</p>
<p><a href="http://github.com/jquery/jquery-tmpl">More info on GitHub.</a></p>
<h3>jQuery Mobile</h3>
<p><a href="http://jquerymobile.com/">jQuery Mobile</a>, under development, aims for broad mobile browser support, which also means a high regard for progressive enhancement. John explains the need to target multiple mobile browsers by focusing on BlackBerry. Why support BlackBerry? Among other things, BlackBerry mobile traffic is rising (<a href="http://gs.statcounter.com/#mobile_browser-ww-monthly-200909-201009">he shows this stat of 10% growth in the past 12 months</a>), your boss probably views your apps in it, and targeting one mobile browser is like targeting one desktop browser. (i.e. wrong.)</p>
<p>With most mobile browsers, there's a big problem: You can't do fixed positioning - John says it's just been added in Android 2.2, but not there in earlier Android, iPhone, etc. Some frameworks have done the complete simulation of scrolling to get around this, but it leads to massive amounts of code and doesn't work right - the subtle UI issues it causes are very noticeable.</p>
<p>Considering it unacceptable to simulate scrolling, jQuery Mboile always uses native scrolling. e.g. to show a select menu, it simply hides the rest of the page and makes the select list occupy the entire page.</p>
<p>There are toolbars available - user clicks to show and hide them, and it works nicely because it supports native scrolling. While you're scrolling, the toolbars are hidden, and they show again when the scroll action is complete (if they were cvisible before the scroll action began). </p>
<p>Developers can detect the various touch events:</p>
<p>taphold<br />
tap<br />
swipeleft<br />
swiperight<br />
swipe</p>
<h3>Web Roundup</h3>
<p>John finishes off with some highlights on the web in general:</p>
<ul>
<li>Performance improvements (showing <a href="http://arewefastyet.com/">Are We There Yet?</a>)</li>
<li>Web GL (he shows <a href="http://people.mozilla.com/~sicking/webgl/ray.html">this ray-tracing </a><a href="http://ajaxian.com/wp-content/images/resig.jpg"></a>)</li>
<li>Audio (he shows <a href="http://www.nihilogic.dk/labs/pocket_full_of_canvas/">some Nihlogic magic</a> and <a href="http://cubicvr.org/CubicVR.js/bd3/BeatDetektor4HD.html">the Beat Detektor</a>).</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/jquery-data-binding-templates-and-mobile-john-resig-at-fowa/feed</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>When does JavaScript trigger reflows and rendering?</title>
		<link>http://ajaxian.com/archives/when-does-javascript-trigger-reflows-and-rendering</link>
		<comments>http://ajaxian.com/archives/when-does-javascript-trigger-reflows-and-rendering#comments</comments>
		<pubDate>Wed, 18 Aug 2010 11:26:21 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Performance]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=10098</guid>
		<description><![CDATA[Thomas Fuchs has some good performance things to say reflows and rendering. A video of wikipedia gives you an idea of how much happens when a basic page is rendered: The advice? The important thing is to always remember that reflowing and rendering HTML is the single most expensive operation browsers do. If your page <a href="http://ajaxian.com/archives/when-does-javascript-trigger-reflows-and-rendering">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>Thomas Fuchs has some good performance things to say <a href="http://mir.aculo.us/2010/08/17/when-does-javascript-trigger-reflows-and-rendering/">reflows and rendering</a>. A video of wikipedia gives you an idea of how much happens when a basic page is rendered:</p>
<p><embed id=VideoPlayback src=http://video.google.com/googleplayer.swf?docid=-5863446593724321515&#038;hl=en&#038;fs=true style=width:400px;height:326px allowFullScreen=true allowScriptAccess=always type=application/x-shockwave-flash> </embed></p>
<p>The advice?</p>
<blockquote><p>The important thing is to always remember that <b>reflowing and rendering HTML is the single most expensive operation browsers do.</b> If your page feels sluggish it’s most likely a problem with rendering. While the easiest way to optimize is to get rid of as many nodes as you can, and trying to have simpler CSS rules, sometimes JavaScript is the culprit.</p></blockquote>
<p>Following changes to the page, a Javascript query like <tt>someElement.offsetHeight</tt> will block execution - to give you the right answer, any pending reflow has to be executed first. So code like this:</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;">someElement.<span style="color: #006600;">style</span>.<span style="color: #006600;">fontSize</span> = <span style="color: #3366CC;">"14px"</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: #000066; font-weight: bold;">if</span><span style="color:#006600; font-weight:bold;">&#40;</span>someElement.<span style="color: #006600;">offsetHeight</span>&gt;<span style="color:#800000;">100</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color: #009900; font-style: italic;">/* ... */</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;">someElement.<span style="color: #006600;">style</span>.<span style="color: #006600;">paddingLeft</span> = <span style="color: #3366CC;">"20px"</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: #000066; font-weight: bold;">if</span><span style="color:#006600; font-weight:bold;">&#40;</span>someElement.<span style="color: #006600;">offsetWidth</span>&gt;<span style="color:#800000;">100</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color: #009900; font-style: italic;">/* ... */</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;</div>
</li>
</ol>
</div>
</div>
</div>
<p>could be twice as fast if you wrote it like this:</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;">someElement.<span style="color: #006600;">style</span>.<span style="color: #006600;">fontSize</span> = <span style="color: #3366CC;">"14px"</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;">someElement.<span style="color: #006600;">style</span>.<span style="color: #006600;">paddingLeft</span> = <span style="color: #3366CC;">"20px"</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: #000066; font-weight: bold;">if</span><span style="color:#006600; font-weight:bold;">&#40;</span>someElement.<span style="color: #006600;">offsetHeight</span>&gt;<span style="color:#800000;">100</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color: #009900; font-style: italic;">/* ... */</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;"><span style="color: #000066; font-weight: bold;">if</span><span style="color:#006600; font-weight:bold;">&#40;</span>someElement.<span style="color: #006600;">offsetWidth</span>&gt;<span style="color:#800000;">100</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color: #009900; font-style: italic;">/* ... */</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;</div>
</li>
</ol>
</div>
</div>
</div>
<p>because there are two reflows in the first example, and only one in the second.</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/when-does-javascript-trigger-reflows-and-rendering/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>Canto.js: An Improved Canvas API</title>
		<link>http://ajaxian.com/archives/canto-js-an-improved-canvas-api</link>
		<comments>http://ajaxian.com/archives/canto-js-an-improved-canvas-api#comments</comments>
		<pubDate>Thu, 29 Jul 2010 04:10:24 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[Canvas]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Library]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=9889</guid>
		<description><![CDATA[Javascript author extraordinaire David Flanagan released Canto.js recently, a lightweight wrapper API for canvas, introduced here and documented at the top of the source code. Example: PLAIN TEXT JAVASCRIPT: &#160; canto&#40;"canvas_id"&#41;.moveTo&#40;100,100&#41;.lineTo&#40;200,200,100,200&#41;.closePath&#40;&#41;.stroke&#40;&#41;; &#160; Notice three things: canto() returns an abstraction of the canvas - a "Canto" object. As with jQuery and similar libraries, there's method chaining; <a href="http://ajaxian.com/archives/canto-js-an-improved-canvas-api">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>Javascript author extraordinaire David Flanagan released <a href="http://code.google.com/p/canto-js/">Canto.js</a> recently, a lightweight wrapper API for canvas, <a href="http://www.davidflanagan.com/2010/07/cantojs-an-impr.html">introduced here</a> and documented at <a href="http://code.google.com/p/canto-js/source/browse/trunk/canto.js">the top of the source code</a>. Example:</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-17');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-17">
<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;">canto<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"canvas_id"</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">moveTo</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#800000;">100</span>,<span style="color:#800000;">100</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">lineTo</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#800000;">200</span>,<span style="color:#800000;">200</span>,<span style="color:#800000;">100</span>,<span style="color:#800000;">200</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">closePath</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">stroke</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;</div>
</li>
</ol>
</div>
</div>
</div>
<p>Notice three things:</p>
<ul>
<li> canto() returns an abstraction of the canvas - a "Canto" object.
</li>
<li> As with jQuery and similar libraries, there's method chaining; each method called on a Canto also returns the Canto.
</li>
<li> lineTo() has been extended to support multiple lines being drawn in a single call.
</li>
</ul>
<p>Instead of setting the ink properties and then painting it, you can do it all in one step:</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;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">canto<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"canvas_id"</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">moveTo</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#800000;">100</span>,<span style="color:#800000;">100</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">lineTo</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#800000;">200</span>,<span style="color:#800000;">200</span>,<span style="color:#800000;">100</span>,<span style="color:#800000;">200</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">closePath</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">stroke</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#123;</span>lineWidth: <span style="color:#800000;">15</span>, strokeStyle: <span style="color: #3366CC;">"red"</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>
</ol>
</div>
</div>
</div>
<p>And plenty more syntactic sugar - check out the API in the <a href="http://code.google.com/p/canto-js/source/browse/trunk/canto.js">source code comments</a>. Sweet!</p>
<p>Thanks <a href="http://twitter.com/pkeane/statuses/19785917337">@pkeane</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/canto-js-an-improved-canvas-api/feed</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>Canvas Color Cycling</title>
		<link>http://ajaxian.com/archives/canvas-color-cycling</link>
		<comments>http://ajaxian.com/archives/canvas-color-cycling#comments</comments>
		<pubDate>Tue, 27 Jul 2010 00:21:55 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[Canvas]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Games]]></category>
		<category><![CDATA[Graphics]]></category>
		<category><![CDATA[Performance]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=9881</guid>
		<description><![CDATA[Interest in Canvas, as well as mobile apps, has led to a renaissance of old-school 8-bit graphics. Joe Huckaby of Effect Games has been playing around with color cycling, leading to some stunning effects. Anyone remember Color cycling from the 90s? This was a technology often used in 8-bit video games of the era, to <a href="http://ajaxian.com/archives/canvas-color-cycling">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.effectgames.com/demos/canvascycle/?sound=0"><img src="http://ajaxian.com/wp-content/images/Canvas-Cycle_-True-8-bit-Color-Cycling-with-HTML5.jpg" alt="" title="Canvas Cycle_ True 8-bit Color Cycling with HTML5" width="525" height="421" class="alignnone size-full wp-image-9880" /></a></p>
<p>Interest in Canvas, as well as mobile apps, has led to a renaissance of old-school 8-bit graphics. Joe Huckaby of <a href="http://www.effectgames.com/">Effect Games</a> has been playing around with color cycling, leading to some <a href="http://www.effectgames.com/demos/canvascycle/?sound=0">stunning effects</a>.</p>
<blockquote><p>
Anyone remember <a href="http://en.wikipedia.org/wiki/Color_cycling" class="dx_external_link" target="_blank">Color cycling</a> from the 90s?  This was a technology often used in 8-bit video games of the era, to achieve interesting visual effects by cycling (shifting) the color palette.  Back then video cards could only render 256 colors at a time, so a palette of selected colors was used.  But the programmer could change this palette at will, and all the onscreen colors would instantly change to match.  It was fast, and took virtually no memory.
</p></blockquote>
<p>There's a neat optimization going on here too: instead of clearing and redrawing the entire scene with each frame, he only updates the pixels that change:</p>
<blockquote><p>
In order to achieve fast frame rates in the browser, I had to get a little crazy in the engine implementation. Rendering a 640x480 indexed image on a 32-bit RGB canvas means walking through and drawing 307,200 pixels per frame, in JavaScript. That's a very big array to traverse, and some browsers just couldn't keep up. To overcome this, I pre-process the images when they are first loaded, and grab the pixels that reference colors which are animated (i.e. are part of cycling sets in the palette). Those pixel X/Y offsets are stored in a separate, smaller array, and thus only the pixels that change are refreshed onscreen. This optimization trick works so well, that the thing actually runs at a pretty decent speed on my iPhone 3GS and iPad!
</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/canvas-color-cycling/feed</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>TabNabbing: Phishing By Switching Background Tab Content</title>
		<link>http://ajaxian.com/archives/tabnabbing-phishing-by-switching-background-tab-content</link>
		<comments>http://ajaxian.com/archives/tabnabbing-phishing-by-switching-background-tab-content#comments</comments>
		<pubDate>Tue, 25 May 2010 15:10:25 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=9398</guid>
		<description><![CDATA[Aza Raskin identifies yet another form of phishing attack. Tabnabbing is the process of replacing the entire contents of a page while it's in a background tab. Want to see it in action? Just visit Aza's article, switch to another tab for 5 seconds and see what happens. Nice clean demo, and as scary as <a href="http://ajaxian.com/archives/tabnabbing-phishing-by-switching-background-tab-content">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>Aza Raskin identifies yet another form of phishing attack. <a href="http://www.azarask.in/blog/post/a-new-type-of-phishing-attack/">Tabnabbing</a> is the process of replacing the entire contents of a page while it's in a background tab. Want to see it in action? Just visit <a href="http://www.azarask.in/blog/post/a-new-type-of-phishing-attack/">Aza's article</a>, switch to another tab for 5 seconds and see what happens. Nice clean demo, and as scary as it is simple.</p>
<p>There's no reload because it's possible to change favicon, title, and page contents via Javascript. Reading through the comments, the attack seems to work most consistently and potently in Firefox, with other browsers being a mixed bag based on how they handle dynamic favicons and the focus event.</p>
<p>The steps in detail:</p>
<blockquote>
<ol>
<li>A user navigates to your normal looking site.</li>
<li>You detect when the page has lost its focus and hasn&#8217;t been interacted with for a while.</li>
<li><a href="http://softwareas.com/dynamic-favicon-library-updated">Replace the favicon</a> with the Gmail favicon, the title with &#8220;Gmail: Email from Google&#8221;, and the page with a Gmail login look-a-like. This can all be done with just a little bit of Javascript that takes place instantly.</li>
<li>As the user scans their many open tabs, the favicon and title act as a strong visual cue&mdash;memory is malleable and moldable and the user will most likely simply think they left a Gmail tab open. When they click back to the fake Gmail tab, they&#8217;ll see the standard Gmail login page, assume they&#8217;ve been logged out, and provide their credentials to log in. The attack preys on the perceived immutability of tabs. </li>
<li>After the user has entered their login information and you&#8217;ve sent it back to your server, you redirect them to Gmail. Because they were never logged out in the first place, it will appear as if the login was successful.</li>
</ol>
</blockquote>
<p>Aza also notes the attack could get a lot more potent if they (a) used <a href="http://www.sitepoint.com/blogs/2010/04/06/mozilla-to-tackle-browser-css-history-privacy-leak/">the CSS history exploit</a> to discover which sites the user has visited; (b) employed certain other techniques, like timing attacks, to determine which services a user is currently logged into.</p>
<p><object width="400" height="267"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=12003099&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=12003099&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="267"></embed></object>
<p><a href="http://vimeo.com/12003099">A New Type of Phishing Attack</a> from <a href="http://vimeo.com/user532161">Aza Raskin</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/tabnabbing-phishing-by-switching-background-tab-content/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>PHPJS: PHP Functions in JS, Now with CommonJS Packaging</title>
		<link>http://ajaxian.com/archives/phpjs</link>
		<comments>http://ajaxian.com/archives/phpjs#comments</comments>
		<pubDate>Thu, 22 Apr 2010 15:11:02 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Library]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=9120</guid>
		<description><![CDATA[PHPJS is an effort to bring the mammoth PHP API into the land of JS., where it can be used for web apps as well as the increasing number of Javascript applications outside the browser. The homepage explains some of the philosophy behind this project: PHP is a language with many high-level functions and while <a href="http://ajaxian.com/archives/phpjs">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://phpjs.org/"><img src="http://ajaxian.com/wp-content/images/phpjs.png" alt="phpjs" title="phpjs" width="170" height="90" class="alignnone size-full wp-image-9119" /></a></p>
<p><a href="http://phpjs.org/">PHPJS</a> is an effort to bring the mammoth <a href="http://www.php.net/manual/en/funcref.php">PHP API</a> into the land of JS., where it can be used for web apps as well as the increasing number of Javascript applications outside the browser.</p>
<p>The homepage explains some of the philosophy behind this project:</p>
<blockquote>
<p><strong>PHP</strong> is a language with many high-level functions and while they're not always implemented as consistently as we'd like (mostly to blame on its underlying C parts), it has a huge following familiar with its syntax so it makes sense to pick its API as a reference<strong>.</strong> Eliminating the need for our own <a href="http://php.net">documentation</a>, thus making life easier, we hope.  </p>
<p> We recognize <strong>JS</strong> - on the other hand - has beautiful language features, and we encourage you to <a href="http://www.youtube.com/watch?v=hQVTIJBZook">learn them</a>.  Never let php.js be an excuse <u>not to</u>.</p>
<p>For the same reason, we're not porting entire language or control structures of PHP; we stick with the functions.</p>
<p>That said, we think of it as a <strong>challenge</strong> to port everything and decided to also port low-level PHP functions like <a href="http://phpjs.org/functions/strpos:545">strpos</a> even though it may have a JavaScript counterpart (<a href="https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Objects/String/IndexOf">String.indexOf</a>).  Cause besides the intellectual challenge for us, porting more also opens up php.js to all kinds of thought excercises and study purposes.  And so we leave it up to the developer to <a href="http://phpjs.org/packages/configure">decide what to take from this resource</a>. And what not.</p>
</blockquote>
<p>It's not new - the project's been around a while and went to GitHub last September. However, it's noteworthy as it appears to be fairly unknown in parts of the Javascript community, judging from <a href="http://js.pastebin.com/2RYJWgEX">recent Twitter responsage</a> to a mention of the project. (It was news to me, and I dabble in PHP.)</p>
<p>Moreover, there is significant progress here: project founder Kevin van Zonneveld yesterday <a href="http://twitter.com/kvz/status/12602365534">announced CommonJS support</a>. The homepage indicates it's "first steps", but longer term, this potentially brings a huge corpus of library functions into the realm of CommonJS, a win for reuse and a win for all the PHPers getting into JS.</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/phpjs/feed</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>The Best of Steve: Performance at JSConf</title>
		<link>http://ajaxian.com/archives/the-best-of-steve-performance-at-jsconf</link>
		<comments>http://ajaxian.com/archives/the-best-of-steve-performance-at-jsconf#comments</comments>
		<pubDate>Sun, 18 Apr 2010 19:54:18 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Performance]]></category>
		<category><![CDATA[Presentation]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=9047</guid>
		<description><![CDATA[(Live blogging notes.) At JSConf, Steve Souders walks us through several performance-optimising things on his mind lately. Site Speed in PageRank A week ago, Google announced site speed is going to be taken into account for PageRank. For Steve, this is a dream come true. Now companies are going to start investing in performance, so <a href="http://ajaxian.com/archives/the-best-of-steve-performance-at-jsconf">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><img src="http://ajaxian.com/wp-content/images/steve_book_large.jpg" alt="steve_book_large" title="steve_book_large" width="140" height="185" class="alignnone size-full wp-image-9046" /></p>
<p>(Live blogging notes.)</p>
<p>At JSConf, <a href="http://stevesouders.com/">Steve Souders</a> walks us through several performance-optimising things on his mind lately.</p>
<h3>Site Speed in PageRank</h3>
<p>A week ago, Google announced site speed is going to be taken into account for PageRank. For Steve, this is a dream come true. Now companies are going to start investing in performance, so less of those slow-loading sites that frustrated him enough to get started down this performance path. One of the criticisms is that this will favour big companies, but Steve points out that smaller companies are often more nimble and able to adapt to changes like this.</p>
<p>As part of Google's webmaster tools, site performance is shown to respective site masters, along with some guidance. Another good resource is <a href="http://www.webpagetest.org/">http://www.webpagetest.org/</a>. Other than its main measurement service, a great feature of WebPageTest is side-by-side comparisons. Show your manager a side-by-side against a competitor for guaranteed satisfaction.</p>
<h3>Performance of Third Party Widgets</h3>
<p>There's been something of a reversal in performance hotspots. Five years ago, it was the core application code that was mostly slowing things down, much as teams would like to blame performance problem on 3rd party ads. Nowadays, those apps have been more finely tuned, and at the same time, people are using more 3rd party stuff - not just ads, but embedded widgets. All of which explains why Steve's been looking at third-party widgets lately. You can see what he's been up to at <a href="http://www.stevesouders.com/p3pc/">P3PC</a>, a benchmark tool for third-party widgets.</p>
<p>A key question is how are the widgets embedded? People are no longer just doing the blocking document.write calls. Instead, it's much more common to dynamically create a script tag and append to the page.  But where and how do you append it? jQuery's library code, for example, does it in a simple, elegant, manner:</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-20');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-20">
<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: #003366; font-weight: bold;">var</span> head = document.<span style="color: #006600;">getElementsByTagName</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"head"</span><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> || document.<span style="color: #006600;">documentElement</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; script = document.<span style="color: #006600;">createElement</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"script"</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>
<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;">head</span>.<span style="color: #006600;">insertBefore</span><span style="color:#006600; font-weight:bold;">&#40;</span>script, head.<span style="color: #006600;">firstChild</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>Others, not so much. See Steve's recent blog posts for more analysis on these techniques (<a href="http://www.stevesouders.com/blog/2010/03/03/p3pc-google-analytics/">e.g. on Google Analytics</a>).</p>
<h3>Frag Tag</h3>
<p>An <a href="http://www.stevesouders.com/blog/2010/02/15/browser-performance-wishlist/#download_scripts">early proposal</a> from Steve and Alex Russell ...</p>
<pre>
&lt;FRAG&gt;
&lt;script src="snippet.js"&gt;&lt;/script&gt;
&lt;/FRAG&gt;
</pre>
<p>The idea is that the frag loads independently; even document.write doesn't block. And it could go further, into a sandboxing mechanism. "If we had this frag tag, it would be one of the biggest things website owners could do to improve the performance of their pages."</p>
<h3>Browser Disk Cache</h3>
<p>The main message here is that browser disk cache is too small, and he's been talking to vendors about upping capacity. <a href="http://stevesouders.com/cache.php">And there's a survey for you</a>.</p>
<h3>What makes sites feel slow?</h3>
<p>So lately Steve's been going back to basics and looking at user perception, thinking not just about how fast the Javascript takes to load, but how fast till the user sees anything. So he's promoting the standard progressive enhancement pattern, similar to <a href="http://ajaxian.com/archives/facebook-javascript-jsconf">Facebook's earlier talk</a>:</p>
<p>* Deliver HTML<br />
* Defer JS<br />
* Avoid DOM<br />
* Decorate later.</p>
<p>He's done a couple of studies to this end:</p>
<p>* Charting page load time - as the user actually sees it - against market share...in an attempt to show faster sites mean bigger market share.<br />
* Looking at initiail payload versus execution. Many of the sample (highly popular) sites are serving many functions on initial payload, which could be deferred until later - putting scripts at the bottom of the page, and loading scripts asynchronously.</p>
<h3>Other Stuff</h3>
<p>Check out:</p>
<p>* <a href="http://www.browserscope.org/">Browserscope</a>, "a community-driven project for profiling web browsers".</p>
<p>* HTTP Archive Format (HAR). An industry standard for capturing Used in an increasing number of tools, e.g. NetExport plugin in Firebug.</p>
<p>* <a href="http://en.oreilly.com/velocity2010">Velocity Conference</a>, which Steve founded with O'Reilly. June 22-24, Santa Clara.</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/the-best-of-steve-performance-at-jsconf/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Facebook&#8217;s Javascript Speed-Up</title>
		<link>http://ajaxian.com/archives/facebook-javascript-jsconf</link>
		<comments>http://ajaxian.com/archives/facebook-javascript-jsconf#comments</comments>
		<pubDate>Sun, 18 Apr 2010 15:56:58 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Performance]]></category>
		<category><![CDATA[Showcase]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=9023</guid>
		<description><![CDATA[(Live blogging notes.) Makinde Adeagbo is describing Facebook's Javascript performance optimisation efforts at JSConf. By 2009, it became clear something had to be done, as the trend was towards longer and longer page loads. Back in 2006, the objective had been super fast page loading: "If any page loads in under 100ms, it takes way <a href="http://ajaxian.com/archives/facebook-javascript-jsconf">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><img src="http://ajaxian.com/wp-content/images/facebook_logo1.jpg" alt="facebook_logo" title="facebook_logo" width="150" height="56" class="alignnone size-full wp-image-9022" /></p>
<p>(Live blogging notes.)</p>
<p>Makinde Adeagbo is describing Facebook's Javascript performance optimisation efforts at JSConf. By 2009, it became clear something had to be done, as the trend was towards longer and longer page loads. Back in 2006, the objective had been super fast page loading: "If any page loads in under 100ms, it takes way too long". By 2008, given all the new interactive features on the page, the 100 millisecond target had expanded to 1 second, and by mid-2009, pages were taking 5 seconds to load. Even HipHop, the PHP compiler, was smaller than the Javascript code base. And when Steve Souders called out Facebook in his book numerous times, it only adding to the team's sense of fun and joy ;).</p>
<p>In June 2009, the team quickly chose a target by year's end by simply checking the load time without Javascript: 2.5 seconds. Thus, dropping load time from 5 seconds to 2.5 seconds was the goal for end of 2009.</p>
<p>The first initiative was to include the Javascript at the bottom of the page. Great, it's faster, but at what cost? A big one: Users try to click on controls, and nothing happens. Back to the drawing board, and the team refined the setup so that the actionable stuff was initialised on the top of the page. But how to minimise all this code at the top of the page?  Here, the team exploited the observation that most controls work the same way:</p>
<p>* User clicks<br />
* Sends ASync request<br />
* Insert/Replace some content</p>
<p>So the team set up elements like this:</p>
<p>&lt;a href="/ring.php rel="dialog"&gt;...&lt;/a&gt;</p>
<p>... And then <a href="http://www.domscripting.com/blog/display/41">hijacked</a> them with a standard listener routine, one that would work for most of the controls. (Most, not all; 80/20 principle is in effect here.) This way, they could have one small listener routine to handle most of the controls on the page. Once the user clicks, the server gets called and outputs a new snippet of Javascript:</p>
<p>The Javascript:</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: #003366; font-weight: bold;">new</span> Dialog<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">setTitle</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">setBody</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">show</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;</div>
</li>
</ol>
</div>
</div>
</div>
<p>would be output by a PHP script, and then evaluated in the browser:</p>
<div class="igBar"><a href="javascript:showCodeTxt('php-25');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">PHP:</span>
<div id="php-25">
<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;">&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:#0000FF;">$response</span> = <span style="color:#000000; font-weight:bold;">new</span> DialogResponse<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;"><span style="color:#0000FF;">$response</span>-&gt;<span style="color:#006600;">setTitle</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>-&gt;<span style="color:#006600;">setBody</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>-&gt;<span style="color:#006600;">send</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;</div>
</li>
</ol>
</div>
</div>
</div>
<p>(A form of On-Demand Javascript.)</p>
<p>In fact, the team has a whole PHP library for outputting Javascript. For example, when a request comes in to expand a new story:</p>
<div class="igBar"><a href="javascript:showCodeTxt('php-26');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">PHP:</span>
<div id="php-26">
<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;">&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:#0000FF;">$response</span> = <span style="color:#000000; font-weight:bold;">new</span> AsyncResponse<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;"><span style="color:#0000FF;">$response</span>-&gt;<span style="color:#006600;">setContent</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#FF0000;">"#elem_id"</span>, <span style="color:#0000FF;">$new_content</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:#0000FF;">$response</span>-&gt;<span style="color:#006600;">appendContent</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#FF0000;">"#content .stories"</span>, <span style="color:#0000FF;">$new_story</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:#0000FF;">$response</span>-&gt;<span style="color:#006600;">send</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;</div>
</li>
</ol>
</div>
</div>
</div>
<p>And they are using a convention: "ajaxify=1" on an element indicates it's ... Ajaxified.</p>
<p>At this point, the team had now Ajaxified a bunch of features, but people were still skeptical about more complicated features. For example, would setting status be too hard with the same techniques. So after some research, Makinde came back with an epiphany: the humble form. Whereas the previous async requests were effectively information-less - just a simple directive and maybe an ID - the requests would now include content too. And of course, most of these things look nothing like forms due to styling. But underneath, they're still forms, e.g. the entire comments block is a single form.</p>
<p>Nowadays, most of Facebook runs without complete page refreshes, by dynamically flipping the content and the fragment ID. (What Facebook calls page transitions.)</p>
<p>Ongoing, Makinde says performance optimisation requires ongoing vigilance. Every engineer has their special case, but in the scheme of things, it's better to say no to new features unless they can be strongly justified. For example, we can live with user submitting a form that hasn't yet been hijacked; a complete page refresh is fine on occasion. We don't like it, but we don't want to make it a special case just for the sake of it.</p>
<p>The Gantt charts tell a great tale: users now see content much earlier, and it's interactive. So how did they fare with that 2.5 second goal for year's end? Achieved by December 23. And Makinde wants people to know Facebook is hiring as they have more Javascript to write...and delete.</p>
<p>UPDATE: And here are the slides ...</p>
<div style="width:425px" id="__ss_3769022"><strong style="display:block;margin:12px 0 4px"><a href="http://www.slideshare.net/makinde/javascript-primer" title="Javascript Primer">Javascript Primer</a></strong><object width="425" height="355"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=jsconfprimertalk-100418161633-phpapp02&#038;stripped_title=javascript-primer" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=jsconfprimertalk-100418161633-phpapp02&#038;stripped_title=javascript-primer" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"></embed></object>
<div style="padding:5px 0 12px">View more <a href="http://www.slideshare.net/">presentations</a> from <a href="http://www.slideshare.net/makinde">makinde</a>.</div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/facebook-javascript-jsconf/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>The Future of History</title>
		<link>http://ajaxian.com/archives/the-future-of-history</link>
		<comments>http://ajaxian.com/archives/the-future-of-history#comments</comments>
		<pubDate>Mon, 12 Apr 2010 22:52:00 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[HTML]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=8963</guid>
		<description><![CDATA[Kyle Scholz has a good overview HTML5 history (spec here). We've seen more and more apps adopt the fragment identifier pattern, where you get URLs like http://www.viewru.com/#Bonobo. Better than nothing, but Kyle observes there are several downsides: Sluggishness Executing a timeout function every 100ms won't make your app any faster. 100ms delay in responding to <a href="http://ajaxian.com/archives/the-future-of-history">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.kylescholz.com/blog/2010/04/html5_history_is_the_future_1.html"><img src="http://ajaxian.com/wp-content/images/back-to-the-future.jpg" alt="back-to-the-future" title="back-to-the-future" width="400" height="300" class="alignnone size-full wp-image-8962" /></a></p>
<p>Kyle Scholz has a good overview <a href="http://www.kylescholz.com/blog/2010/04/html5_history_is_the_future_1.html">HTML5 history</a> (<a href="http://www.whatwg.org/specs/web-apps/current-work/#history">spec here</a>). We've seen more and more apps adopt the fragment identifier pattern, where you get URLs like http://www.viewru.com/#Bonobo. Better than nothing, but Kyle observes there are several downsides:</p>
<blockquote><p>
<b>Sluggishness</b> </p>
<ul style="margin-left: 16px;">
<li>Executing a timeout function every 100ms won't make your app any faster.
  </li>
<li>100ms delay in responding to back button actions.
</li>
</ul>
<p> <br />
<b>Browser compatibility</b> </p>
<ul style="margin-left: 16px;">
<li>The solution above doesn't work, for example, in IE 6-7, which won't add a history event on a hash change. Really Simple History gets around this by adding an iframe and issuing a call to your server for every state change. Webkit browsers present different challenges.
</li>
</ul>
<p><b>Not a stack</b> </p>
<ul style="margin-left: 16px;">
<li>Suppose your application transitions from A->B->C. Can it transition directly back to A?
</li>
</ul>
</blockquote>
<p>HTML5 offers a cleaner solution: </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;"><span style="color: #009900; font-style: italic;">// Push the state onto the history stack</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> setState<span style="color:#006600; font-weight:bold;">&#40;</span>state<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; window.<span style="color: #006600;">history</span>.<span style="color: #006600;">pushState</span><span style="color:#006600; font-weight:bold;">&#40;</span>state, <span style="color: #3366CC;">''</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></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;">// Respond to a popstate event.</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;">window.<span style="color: #006600;">onpopstate</span> = <span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>e<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; handleState<span style="color:#006600; font-weight:bold;">&#40;</span>e.<span style="color: #006600;">state</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>;</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>Not only can you move back and forth between state, but you can also set URL and page title with this API. (The fragment ID was traditionally used because it was the only way to set the URL without causing a page reload.) Comparing the new techniques to traditional fragment ID hackery:</p>
<blockquote>
<li>Content is crawlable: A developer may express all crawlable states of their application as valid URLs.
</li>
<li>HTTP-Referer is meaningful: The referrer can reflect the latest state of the application and show or hide any information to/from 3rd parties, at the developer's discretion.
</li>
<li>Bookmarks can be handled in a single fetch: Since application state can be expressed in a URL, it's possible to service a request for the application and state in one request/response.
</li>
<li>Can use a single URI scheme to cover new and old browsers: Since information is encoded in URLs instead of the location hash, modern and legacy users can share bookmarks and links.
</li>
<li>Audible "click" in IE? Okay, I don't know about this one, but it makes sense that programmatic operations on window.history would not have an audible side effect, right?
</li>
</blockquote>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/the-future-of-history/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>TXJS: Upcoming JS Conference in Austin</title>
		<link>http://ajaxian.com/archives/txjs-upcoming-js-conference-in-austin</link>
		<comments>http://ajaxian.com/archives/txjs-upcoming-js-conference-in-austin#comments</comments>
		<pubDate>Mon, 29 Mar 2010 09:25:02 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[Conferences]]></category>
		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=8798</guid>
		<description><![CDATA[JSConf is around the corner, but there's more 2010 conference action in the pipeline. Paul Irish pinged me about YayQuery's TXJS and its all-star cast: TXJS is a full-day conference hosted by yayQuery on June 5 in Austin, Texas. We just landed Douglas Crockford and John Resig as speakers, so what started as a regional <a href="http://ajaxian.com/archives/txjs-upcoming-js-conference-in-austin">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://texasjavascript.com/"><img src="http://gyazo.com/1d325773c950c9461de7f08b84425624.png" alt="txjs" title="txjs" width="400" height="110" class="alignnone size-full wp-image-8800" /></a></p>
<p><a href="http://jsconf.us">JSConf</a> is around the corner, but there's more 2010 conference action in the pipeline. Paul Irish pinged me about YayQuery's <a href="http://texasjavascript.com/">TXJS</a> and its all-star cast:</p>
<blockquote><p>
TXJS is a full-day conference hosted by yayQuery on June 5 in Austin, Texas. We just landed Douglas Crockford and John Resig as speakers, so what started as a regional conference has turned into sort of a big deal. </p>
<p>Besides Crockford and Resig, we've got Peter Higgins, project lead for the Dojo toolkit; Juriy Zaytsev (aka kangax) and Andrew Dupont from the Prototype library; Brian LeRoux of PhoneGap fame; Node.js contributor Tim Caswell; and many others. We'll be announcing the venue in a few days.</p>
<p>After the talks, we have a hack night and party in downtown Austin, sponsored by Google and hosted by Austin JS.
</p></blockquote>
<p>They've kept the prices cheap at $69 for the day.</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/txjs-upcoming-js-conference-in-austin/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Harmony: Canvas Drawing Tool</title>
		<link>http://ajaxian.com/archives/harmony-canvas-drawing-tool</link>
		<comments>http://ajaxian.com/archives/harmony-canvas-drawing-tool#comments</comments>
		<pubDate>Wed, 10 Mar 2010 09:50:44 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[Canvas]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Showcase]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=8702</guid>
		<description><![CDATA[Harmony is a new drawing tool, a HTML5/Canvas experiment with great potential. It provides some unique brush styles, and can produce some great-looking charcoal pencil style sketches, among other things. Better to try it out than explain it in words. Creator Mr. Doob (Richard Cabello) explains how he used Canvas to make it darker the <a href="http://ajaxian.com/archives/harmony-canvas-drawing-tool">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/To1A-EPz79w&#038;hl=en_US&#038;fs=1&#038;"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/To1A-EPz79w&#038;hl=en_US&#038;fs=1&#038;" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></p>
<p><a href="http://mrdoob.com/lab/javascript/harmony/">Harmony</a> is a new drawing tool, a HTML5/Canvas experiment with great potential. It provides some unique brush styles, and can produce some great-looking charcoal pencil style sketches, among other things. Better to <a href="http://mrdoob.com/lab/javascript/harmony/">try it out</a> than explain it in words.</p>
<p>Creator Mr. Doob  (Richard Cabello) <a href="http://mrdoob.com/blog/post/689">explains</a> how he used Canvas to make it darker the more you draw over it:</p>
<blockquote><p>
The whole thing is quite modular so I can keep adding more brush styles whenever I get inspired. During the process I found out that, for some reason (apparently lack of hardware acceleration), Firefox and Opera do not support context.globalCompositeOperation = 'darker'. This was on the HTML5 spec before but got removed. Just so you know what I'm talking about, this is like the "multiply" blending in Photoshop. Webkit does support it tho. I hope they put it back on the specs and all browsers support it.
</p></blockquote>
<p>You can also save images using data URI encoding.</p>
<p>As it works on webkit, he made sure it worked on the mobile Android and iPhone browsers. No multi-touch as yet, but the touch UI still makes a nice input mechanism.</p>
<p><a href="http://mrdoob.com/lab/javascript/harmony/"><img src="http://ajaxian.com/wp-content/images/harmony.jpg" alt="harmony" title="harmony" width="320" height="480" class="alignnone size-full wp-image-8703" /></a></p>
<p>(Thanks <a href="http://twitter.com/FND">FND</a>)</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/harmony-canvas-drawing-tool/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Mouseovers on Touch Devices</title>
		<link>http://ajaxian.com/archives/mouseovers-on-touch-devices</link>
		<comments>http://ajaxian.com/archives/mouseovers-on-touch-devices#comments</comments>
		<pubDate>Tue, 23 Feb 2010 07:35:29 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[Apple]]></category>
		<category><![CDATA[Editorial]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[iPhone]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=8642</guid>
		<description><![CDATA[Most of the thinking on iPad's exclusion of Flash has been focused on battery life, performance, stability, or control of the application market, but here's a Flash developer who's thinking differently. Morgan Adams argues it's all about the mouseover, and he raises a point that is just as relevant to rich Javascript apps. Many (if <a href="http://ajaxian.com/archives/mouseovers-on-touch-devices">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>Most of the thinking on iPad's exclusion of Flash has been focused on battery life, performance, stability, or control of the application market, but here's <a href="http://www.roughlydrafted.com/2010/02/20/an-adobe-flash-developer-on-why-the-ipad-cant-use-flash/">a Flash developer who's thinking differently</a>. Morgan Adams argues it's all about the mouseover, and he raises a point that is just as relevant to rich Javascript apps.</p>
<blockquote><p>
Many (if not most) current Flash games, menus, and even video players require a visible mouse pointer. They are coded to rely on the difference between hovering over something (mouseover) vs. actually clicking. This distinction is not rare. It’s pervasive, fundamental to interactive design, and vital to the basic use of Flash content. New Flash content designed just for touchscreens can be done, but people want existing Flash sites to work. All of them—not just some here and there—and in a usable manner. That’s impossible no matter what.<br />
....<br />
<strong>Mouseover examples:</strong></p>
<p>* Video players where the controls appear on mouseover and hide otherwise. (This seems to be the norm, in fact. Whereas a click on the same video does something different: usually Pause. Try Hulu for instance.)</p>
<p>* Games where you steer with the mouse without clicking (extremely common).</p>
<p>* Menus that popup up subpage links when you mouse over a main button, vs. going directly to a main category page when you click.<br />
....
</p></blockquote>
<p>He claims all the alternatives are unsatisfactory, e.g. re-coding every application manually, introducing gestures, substituting double-clicking for clicking and clicking for mouseovers.</p>
<p>The issues are relevant to Javascript developers; for example, PPK has previously speculated on <a href="http://www.quirksmode.org/blog/archives/2008/08/iphone_events.html">the demise of mouse* events, as well as hover</a> in touch environments. How will that play out with a web app that relies on them?</p>
<p>It's a bit like Dion's <a href="hhttp://twitter.com/dalmaer/status/8663249663">recent tweet</a>: "I find myself typing click^H^H^H^H^Htap 20 times a day at the moment. Is there a term that abstractly could mean both? :)". We can get away with simple substitutions with straightforward web apps maybe, but it gets a lot more complicated with seriously rich interaction styles, the kind traditionally seen in some Flash games and now possible with Javascript. We tend to think of mobile device design as a matter of massaging the look with some CSS...the harder part to get right is often the "feel" in the look-and-feel equation. Platforms, like the web, which want to support multiple interaction styles, need to provide ways to ease the transition for developers, automating degradation and enhancement in the first instance, but allowing application designers to customise further for each device. <a href="http://www.odannyboy.com/">Dan Saffer</a>'s sideshow below makes the point well, regarding gesture design in touch devices:</p>
<div style="width:425px;text-align:left" id="__ss_2495091"><a style="font:14px Helvetica,Arial,Sans-serif;display:block;margin:12px 0 3px 0;text-decoration:underline;" href="http://www.slideshare.net/dansaffer/tap-is-the-new-click-2495091" title="Tap is the New Click">Tap is the New Click</a><object style="margin:0px" width="425" height="355"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=tapisthenewclick-091113125811-phpapp01&#038;stripped_title=tap-is-the-new-click-2495091" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=tapisthenewclick-091113125811-phpapp01&#038;stripped_title=tap-is-the-new-click-2495091" 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/dansaffer">Dan Saffer</a>.</div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/mouseovers-on-touch-devices/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>Think You Know Javascript? Try this Quiz!</title>
		<link>http://ajaxian.com/archives/think-you-know-javascript-try-this-quiz</link>
		<comments>http://ajaxian.com/archives/think-you-know-javascript-try-this-quiz#comments</comments>
		<pubDate>Tue, 09 Feb 2010 08:49:31 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=8578</guid>
		<description><![CDATA[If you know you think you know your objects from your arrays and your null from your undefined, here's a quiz for you from Perfection Kills. I was recently reminded about Dmitry Baranovsky&#8217;s Javascript test, when N. Zakas answered and explained it in a blog post. First time I saw those questions explained was by <a href="http://ajaxian.com/archives/think-you-know-javascript-try-this-quiz">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>If you know you think you know your objects from your arrays and your <tt>null</tt> from your <tt>undefined</tt>, here's <a href="http://perfectionkills.com/javascript-quiz/">a quiz for you</a> from Perfection Kills.</p>
<blockquote>
<p>I was recently reminded about <a href="http://dmitry.baranovskiy.com/post/91403200"> Dmitry Baranovsky&#8217;s Javascript test</a>, when N. Zakas answered and <a href="http://www.nczonline.net/blog/2010/01/26/answering-baranovskiys-javascript-quiz/">explained it in a blog post</a>. First time I saw those questions explained was by <a href="http://groups.google.com/group/comp.lang.javascript/msg/ae4d0d92361497f6">Richard Cornford in comp.lang.javascript</a>, although not as thoroughly as by Nicholas.</p>
<p>I decided to come up with my own little quiz. I wanted to keep question not very obscure, practical, yet challenging. They would also cover wider range of topics.</p>
</blockquote>
<p>There are fourteen questions in all, starting here:</p>
<blockquote><p>
<code>
<pre>
    (function(){
      return typeof arguments;
    })();
</pre>
<p></code></p>
<li> “object”
    </li>
<li> “array”
    </li>
<li> “arguments”
    </li>
<li> “undefined”
</li>
</blockquote>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/think-you-know-javascript-try-this-quiz/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Javascript ePub Readers</title>
		<link>http://ajaxian.com/archives/javascript-epub-readers</link>
		<comments>http://ajaxian.com/archives/javascript-epub-readers#comments</comments>
		<pubDate>Tue, 09 Feb 2010 08:34:33 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[eBooks]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Showcase]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=8572</guid>
		<description><![CDATA[eBooks have gone mainstream, and right now the open ePub format is getting a lot of attention, being the iPad's book format of choice. Often overlooked in gadget-centric media is the fact that ePub is based on web standards, and therefore amenable to being rendered in the browser, sans plugins. Pure Javascript ePub readers are <a href="http://ajaxian.com/archives/javascript-epub-readers">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://romeda.org/republish"><img src="http://ajaxian.com/wp-content/images/republish2.png" alt="republish2" title="republish2" width="470" height="330" class="alignnone size-full wp-image-8574" /></a></p>
<p>eBooks have gone mainstream, and right now the open ePub format is getting a lot of attention, being the iPad's book format of choice. Often overlooked in gadget-centric media is the fact that ePub is based on web standards, and therefore amenable to being rendered in the browser, sans plugins. Pure Javascript ePub readers are starting to crop up, and Keith Fahlgren has written about <a href="http://blog.threepress.org/2010/02/06/three-javascript-epub-readers/">several of them</a>:</p>
<blockquote>
<p>Just in the last few days, details emerged of two new JavaScript ePub readers, <a href="http://romeda.org/rePublish/">rePublish</a> from <a href="http://twitter.com/blaine/status/8733522914">Blaine Cook (@blaine)</a> and <a href="http://github.com/augustl/js-epub">JSEpub</a> (<a href="http://s3.amazonaws.com/augustl-stuff/epub-is-getting-there-95.png">screenshot</a>) from <a href="http://twitter.com/augustl/status/8700582603">August Lilleaas (@augustl)</a>. These two new readers join <a href="http://twitter.com/liza">@liza</a>’s <a href="http://blog.threepress.org/2009/02/09/introducing-epubjs/">epubjs</a>, which will be a year old on Tuesday. An improved version of epubjs powers the <a href="http://epubzengarden.com">ePub Zen Garden</a>, which helps “dispel the myth that digital books can&#8217;t also be crafted works of visual design.”</p>
</blockquote>
<p>All are open source, and as Keith notes in the comments, there's also the commercial <a href="http://www.bookglutton.com/reader/unbound?group_id=0&#038;id=3160&#038;view=ub#href(cover.html#!0p:0)">BookGlutton project</a>. BookGlutton (which we <a href="http://ajaxian.com/archives/bookglutton">covered earlier</a>) shows the promise of browser-based eBooks: it lets you embed books as lightbox-powered widgets, and supports annotation.</p>
<p>The underlying structure of ePub is <a href="http://en.wikipedia.org/wiki/EPUB">described on wikipedia</a>:</p>
<blockquote><p>
EPUB consists of three specifications:<br />
Open Publication Structure (OPS) 2.0, contains the formatting of its content.[5]<br />
Open Packaging Format (OPF) 2.0, describes the structure of the .epub file in XML.[6]<br />
OEBPS Container Format (OCF) 1.0, collects all files as a ZIP archive.[7]<br />
Basically, EPUB internally uses XHTML or DTBook (an XML standard provided by the DAISY Consortium) to represent the text and structure of the content document, and a subset of CSS to provide layout and formatting. XML is used to create the document manifest, table of contents, and EPUB metadata. Finally, the files are bundled in a zip file as a packaging format.
</p></blockquote>
<p>In the case of unzipping, Keith points out the <a href="http://www.onicos.com/staff/iz/amuse/javascript/expert/inflate.txt">inflate library</a> has been around since 1999. One can imagine other applications for zip too; for example, it's often used as a format for bundling code (Java JARs, Python Eggs, Firefox and Chrome extensions), so reliable unzipping makes it possible to build browser-based IDEs and exploration tools against such archives.</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/javascript-epub-readers/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Gordon: Flash Runtime Implemented in Javascript</title>
		<link>http://ajaxian.com/archives/gordon-flash-runtime-implemented-in-javascript</link>
		<comments>http://ajaxian.com/archives/gordon-flash-runtime-implemented-in-javascript#comments</comments>
		<pubDate>Wed, 13 Jan 2010 20:38:35 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=8426</guid>
		<description><![CDATA[This was quite a surprise! Tobias Schneider has built a Flash runtime that works right in the browser. It's implemented in pure Javascript and HTML5, and the whole thing is open source, MIT-licensed, and hosted on GitHub. See Gordon in action (demos hosted by Paul Irish). It works like a charm in recent versions of <a href="http://ajaxian.com/archives/gordon-flash-runtime-implemented-in-javascript">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>This was quite a surprise! <a href="http://twitter.com/tobeytailor">Tobias Schneider</a> has built a Flash runtime that works right in the browser. It's implemented in pure Javascript and HTML5, and the whole thing is open source, MIT-licensed, and <a href="http://github.com/tobeytailor/gordon">hosted on GitHub</a>.</p>
<p><a href="http://paulirish.com/work/gordon/demos/">See Gordon in action</a> (demos hosted by Paul Irish).</p>
<p>It works like a charm in recent versions of Firefox, Chrome, and Safari (and, yes, iPhone Safari, though the "blue" demo runs at tedious pace on my 3G). To install it yourself, use "git clone git://github.com/tobeytailor/gordon.git". I found the demos don't work from a file:/// URI due to the script dependency system, so point your web server at the root and point your browser at demos/.</p>
<p>There's not yet any docs, so it's not clear how broadly compatible Gordon is or where it's headed. But if nothing else, it makes a bold statement about the maturity of open web technologies.</p>
<div class="igBar"><a href="javascript:showCodeTxt('html-30');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">HTML:</span>
<div id="html-30">
<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;">&nbsp;</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/body.html"><span style="color: #000000; font-weight: bold;">&lt;body</span></a> <span style="color: #000066;">onload</span>=<span style="color: #ff0000;">"new Gordon.Movie('trip.swf', {id: 'stage', width: 500, height: 400})"</span><span style="color: #000000; font-weight: bold;">&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; <span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"stage"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span><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; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/body&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;</div>
</li>
</ol>
</div>
</div>
</div>
<p><a href="http://github.com/tobeytailor/gordon"><img alt="Gordon" src="http://ajaxian.com/wp-content/images/20100113-bwijjxyyhmr2m75rd44rhx2k9r.png" title="Gordon" class="alignnone" width="382" height="395" /></a></p>
<p><i>(Update: After much twitter love, someone finally figured out the name. How did we miss it?!!)</i></p>
<p><img alt="Flash Gordon: Saviour?" src="http://ajaxian.com/wp-content/images/flashgordon.jpg" title="flashgordon2" width="426" height="572" /></p>
<p><i>Update 2: There's a <a href="http://wiki.github.com/tobeytailor/gordon/swf-tag-support-table">SWF tag support table</a> and a <a href="http://wiki.github.com/tobeytailor/gordon/browser-support-table">browser support table</a>. (thanks <a href="http://twitter.com/tuxified/statuses/7728879174">@tuxified</a>)</i></p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/gordon-flash-runtime-implemented-in-javascript/feed</wfw:commentRss>
		<slash:comments>25</slash:comments>
		</item>
		<item>
		<title>WebAIM Study: Screenreaders and Javascript Co-Exist</title>
		<link>http://ajaxian.com/archives/webaim-study-screenreaders-and-javascript-co-exist</link>
		<comments>http://ajaxian.com/archives/webaim-study-screenreaders-and-javascript-co-exist#comments</comments>
		<pubDate>Sun, 10 Jan 2010 22:06:59 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[Accessibility]]></category>
		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=8408</guid>
		<description><![CDATA[Paul Irish points to a recent survey by WebAIM showing what high-level accessibility guidelines frequently omit to mention: screenreaders and Javascript often co-exist. The study shows between 75% and 90% of screenreader users have Javascript enabled. This isn't just speculation, but a survey of 655 screenreader users. This response may help strengthen the notion that <a href="http://ajaxian.com/archives/webaim-study-screenreaders-and-javascript-co-exist">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>Paul Irish <a href="http://twitter.com/paul_irish/status/7560447023">points</a> to a recent survey by <a href="http://www.webaim.org/">WebAIM</a> showing what high-level accessibility guidelines frequently omit to mention: screenreaders and Javascript often co-exist. The study shows <a href="http://webaim.org/projects/screenreadersurvey2/#javascript">between 75%  and 90% of screenreader users have Javascript enabled</a>. This isn't just speculation, but a survey of 655 screenreader users.</p>
<p><a href="http://webaim.org/projects/screenreadersurvey2/#javascript"><br />
<img alt="" src="http://img.skitch.com/20100110-kubk76eb6t7fkgyc66br2ytx55.png" title="screenreader" class="alignnone" width="467" height="356" /></a></p>
<blockquote><p>
This response may help strengthen the notion that scripted content must be made accessible. Many developers incorrectly believe that inaccessible scripting is permissible so long as it degrades gracefully or a non-scripted alternative is provided. The vast majority of screen reader respondents encounter scripted content.
</p></blockquote>
<p>Assuming you've solved the accessibility problem just by graceful degradation to raw HTML is fallacy. The whole issue is <a href="http://directwebremoting.org/blog/joe/2006/03/09/1141929483908.html">much more nuanced</a>.</p>
<p>There's also a handy summary of problematic items reported by this user segment, which ranked as follows:</p>
<blockquote>
<ul>
<li>CAPTCHA - images presenting text used to verify that you are a human user
</li>
<li>The presence of inaccessible Flash content
</li>
<li>Links or buttons that do not make sense
</li>
<li>Images with missing or improper descriptions (alt text)
</li>
<li>Complex or difficult forms
</li>
<li>Lack of keyboard accessibility
</li>
<li>Screens or parts of screens that change unexpectedly
</li>
<li>Missing or improper headings
</li>
<li>Too many links or navigation items
</li>
<li>Complex data tables
</li>
<li>Lack of "skip to main content" or "skip navigation" links
</li>
<li>Inaccessible or missing search functionality
</li>
</ul>
</blockquote>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/webaim-study-screenreaders-and-javascript-co-exist/feed</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>QBasic on Javascript</title>
		<link>http://ajaxian.com/archives/qbasic-on-javascript</link>
		<comments>http://ajaxian.com/archives/qbasic-on-javascript#comments</comments>
		<pubDate>Sun, 10 Jan 2010 12:37:01 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=8401</guid>
		<description><![CDATA[Steve Hanov has been busy. Following from his hand-drawn canvas app, he's now built a working QBasic implementation powered by Canvas and Javascript and is blogging about how he did it. The most straightforward way of creating a basic compiler in javascript is to directly translate the basic into javascript functions. But this approach will <a href="http://ajaxian.com/archives/qbasic-on-javascript">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>Steve Hanov has been busy. Following from <a href="http://ajaxian.com/archives/hand-drawn-look-in-canvas-drawing-app">his hand-drawn canvas app</a>, he's now built <a href="http://stevehanov.ca/blog/index.php?id=92">a working QBasic implementation</a> powered by Canvas and Javascript and is blogging about how he did it.</p>
<blockquote><p>
The most straightforward way of creating a basic compiler in javascript is to directly translate the basic into javascript functions. But this approach will not work for two reasons. First, there is "goto" which, although it is a reserved word, is not yet in Javascript. (Obviously, ECMAScript community finds "with", prototype inheritance, and the rules of the 'this' keyword to be far less confusing than allowing "goto"). It is possible to automatically move statements around to eliminate GOTO, but you don't want to go there.</p>
<p>The other problem is that browsers tend to freeze until javascript programs finish running. To avoid freezing the browser until the program ends, we break the program into small chunks, and execute a few of those chunks every so often using a javascript timer. This gives the appearance of a running program and doesn't freeze the browser.</p>
<p>Bytecode solves both of those problems. By breaking the program into bytecode instructions, we can implement goto by just changing which instruction we are going to execute next. We can also suspend execution any time to allow the user to interact with the browser.
</p></blockquote>
<p><a href="http://stevehanov.ca/blog/index.php?id=92"><img alt="" src="http://img.skitch.com/20100110-f7h55b2rjurqqgh5fqimqxi65r.png" title="QBasic" class="alignnone" width="442" height="200" /></a></p>
<p>(<a href="http://twitter.com/shauntrennery/status/7589661540">thanks Shaun</a>)</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/qbasic-on-javascript/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Hand-Drawn Look in Canvas Drawing App</title>
		<link>http://ajaxian.com/archives/hand-drawn-look-in-canvas-drawing-app</link>
		<comments>http://ajaxian.com/archives/hand-drawn-look-in-canvas-drawing-app#comments</comments>
		<pubDate>Tue, 29 Dec 2009 11:57:28 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[Canvas]]></category>
		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=8361</guid>
		<description><![CDATA[Steve Hanov has produced a Canvas-based drawing tool with a hand-drawn look. Lines can be drawn with a "sloppiness" option, with possible values "Draftsman", "Artist", "Cartoonist", "Child", and - perfect for this time of year - "Drunk" :). The FG Virgil font, applied to text elements, adds to the cartoon vibe. The techniques are used <a href="http://ajaxian.com/archives/hand-drawn-look-in-canvas-drawing-app">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://stevehanov.ca/blog/index.php?id=93#implementation"><img alt="" src="http://stevehanov.ca/blog/images/stick-figures.png" title="stick figures" class="alignnone" width="245" height="245" /></a></p>
<p>Steve Hanov has produced <a href="http://stevehanov.ca/blog/index.php?id=93#implementation">a Canvas-based drawing tool with a hand-drawn look</a>. Lines can be drawn with a "sloppiness" option, with possible values "Draftsman", "Artist", "Cartoonist", "Child", and - perfect for this time of year - "Drunk" :). The <a href="http://www.fontco.com/font-info/fgvirgil.php">FG Virgil font</a>, applied to text elements, adds to the cartoon vibe.</p>
<p>The techniques are used in a C library for <a href="http://www.websequencediagrams.com/">WebSequenceDiagrams</a>, which Steve <a href="http://stevehanov.ca/blog/index.php?id=33">explained in an older blog post</a>, but here he's done it with Javascript and Canvas.</p>
<p><a href="http://stevehanov.ca/blog/index.php?id=93#implementation"><img alt="" src="http://farm5.static.flickr.com/4031/4224496713_1cfdda13bb.jpg" title="hand drawn" class="alignnone" width="500" height="370" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/hand-drawn-look-in-canvas-drawing-app/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>HTML5 Video Autobuffers, Always</title>
		<link>http://ajaxian.com/archives/html5-video-autobuffers-always</link>
		<comments>http://ajaxian.com/archives/html5-video-autobuffers-always#comments</comments>
		<pubDate>Mon, 21 Dec 2009 23:56:26 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Video]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=8337</guid>
		<description><![CDATA[John Gruber of Daring Fireball says that the HTML5 video element, simple as it is, always autobuffers on Safari, Chrome, and Firefox. It's something others have also come up against. Any videos on the page will start downloading right away, regardless of the "autobuffer" attribute's setting: The HTML5 spec defines an autobuffer attribute for the <a href="http://ajaxian.com/archives/html5-video-autobuffers-always">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>John Gruber of Daring Fireball says that the HTML5 video element, simple as it is, <a href="http://daringfireball.net/2009/12/html5_video_unusable">always autobuffers</a> on Safari, Chrome, and Firefox. It's something <a href="http://stackoverflow.com/questions/1495146/audio-element-autobuffers-no-matter-what">others</a> have <a href="https://bugs.webkit.org/show_bug.cgi?id=25267">also</a> come up against. Any videos on the page will start downloading right away, regardless of the "autobuffer" attribute's setting:</p>
<blockquote><p>
The HTML5 spec defines an autobuffer  attribute for the video and other media elements (bold emphasis added):</p>
<p><em>The autobuffer attribute is a boolean attribute. Its presence hints to the user agent that the author believes that the media element will likely be used, even though the element does not have an autoplay attribute. (The attribute has no effect if used in conjunction with the autoplay attribute, though including both is not an error.) <strong>This attribute may be ignored altogether.</strong></em></p>
<p>It would appear, in my testing, that all three of these browsers take the spec up on the aforebolded offer to ignore this attribute. Even if you do not explicitly turn this attribute on, Safari, Chrome, and Firefox will still auto-buffer the content for your &lt;video&gt; (and &lt;audio&gt;) elements. There is no way to suppress this using HTML markup.
</p></blockquote>
<p>As Gruber points out, this might seem like a good thing for fast UI: videos start playing as soon as the user wants them to. That would be true in a world of unlimited bandwidth, but for now, this feature is likely to be a massive bandwidth hog. There is a nice workaround, albeit one that peels back the utter simplicity of a single &lt;video&gt; tag:</p>
<blockquote>
<ol>
<li>In the HTML markup, rather than a <code>&lt;video&gt;</code> element, instead use an <code>&lt;img&gt;</code> element with the intended poster frame.</li>
<li>Add an <code>onclick</code> JavaScript handler to the <code>&lt;img&gt;</code> element, which, when invoked, does some DOM jiggery-pokery to remove the just-clicked-upon <code>&lt;img&gt;</code> element and replace it with a <code>&lt;video&gt;</code> element that sources the intended video files.</li>
</ol>
<p>And, in fact, that is exactly what I resorted to for my PastryKit videos. Do a View Source on <a href="http://daringfireball.net/misc/2009/12/user_guide_demos">that page</a> to see the solution.
</p>
</blockquote>
<p>It's difficult to see &lt;video&gt; becoming the web's standard video component if every video buffers as soon as the page loads.</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/html5-video-autobuffers-always/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>EtherPad Goes Open Source</title>
		<link>http://ajaxian.com/archives/etherpad-goes-open-source</link>
		<comments>http://ajaxian.com/archives/etherpad-goes-open-source#comments</comments>
		<pubDate>Fri, 18 Dec 2009 21:32:58 +0000</pubDate>
		<dc:creator>Michael Mahemoff</dc:creator>
				<category><![CDATA[Comet]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[Server]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=8307</guid>
		<description><![CDATA[Following their recent acquisition by Google, AppJet announced they would open source EtherPad, the collaborative, real-time, notepad. That's now done, and you can find the project home at - surprise, surprise - Google Code. Checkout Instructions Browse the Source What's especially cool about this is that Etherpad is Javascript on both sides of the wire. <a href="http://ajaxian.com/archives/etherpad-goes-open-source">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><img alt="" src="http://farm3.static.flickr.com/2660/4195323637_9fd97b6703.jpg" title="etherpad2009" class="alignnone" width="500" height="181" /></p>
<p>Following their recent acquisition by Google, AppJet <a href="http://etherpad.com/ep/blog/posts/etherpad-back-online-until-open-sourced">announced</a> they would open source EtherPad, the collaborative, real-time, notepad. That's now <a href="http://etherpad.com/ep/blog/posts/etherpad-open-source-release">done</a>, and you can find the project home at - surprise, surprise - <a href="http://code.google.com/p/etherpad/">Google Code</a>.</p>
<p><a href="http://code.google.com/p/etherpad/source/checkout">Checkout Instructions</a></p>
<p><a href="http://code.google.com/p/etherpad/source/browse/trunk/">Browse the Source</a></p>
<p>What's especially cool about this is that Etherpad is Javascript on both sides of the wire. In a new ReadWriteWeb article on <a href="http://www.readwriteweb.com/archives/server-side_javascript_back_with_a_vengeance.php">Server-Side Javascript</a>, I wrote that EtherPad is probably the most popular site powered by Javascript (anyone want to up the ante?). As server-side Javascript is getting interesting again, with Comet a major driver, it's a big deal that we now have the entire source tree for a Comet-style, server-side Javascript, application that's been proven in the real world.</p>
<p>AppJet also released <a href="http://appjet.wordpress.com/2008/09/02/appjetjar-platform-in-a-jar/">appjet.jar</a> when they discontinued the general server-side Javascript platform earlier this year. Unfortunately, the download link is broken on AppJet.com, so I don't know if there's any way to get hold of the official version. It does, however, live on as a cloud-hosted offering at <a href="http://apps.jgate.de/">JGate</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/etherpad-goes-open-source/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

