<?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; Google</title>
	<atom:link href="http://ajaxian.com/by/topic/google/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>How Gmail&#8217;s Drag and Drop from the Desktop Works</title>
		<link>http://ajaxian.com/archives/how-gmails-drag-and-drop-from-the-desktop-works</link>
		<comments>http://ajaxian.com/archives/how-gmails-drag-and-drop-from-the-desktop-works#comments</comments>
		<pubDate>Thu, 23 Sep 2010 11:00:06 +0000</pubDate>
		<dc:creator>Brad Neuberg</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Google]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=10242</guid>
		<description><![CDATA[The CSS Ninja details how Gmail's drag and drop from the desktop works; when you drag a file from the desktop into Gmail the file will automatically start uploading. The CSS Ninja recreated the code in a demo (source code [zip]). The code works in Firefox and Chrome. On Firefox the File API is used <a href="http://ajaxian.com/archives/how-gmails-drag-and-drop-from-the-desktop-works">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><a href="http://ajaxian.com/wp-content/images/cssninja.gif"><img class="aligncenter size-full wp-image-10243" title="cssninja" src="http://ajaxian.com/wp-content/images/cssninja.gif" alt="" width="140" height="144" /></a></p>
<p style="text-align: left;"><a href="http://www.thecssninja.com/javascript/gmail-upload">The CSS Ninja details</a> how Gmail's drag and drop from the desktop works; when you drag a file from the desktop into Gmail the file will automatically start uploading.</p>
<p>The CSS Ninja recreated the code in a <a href="http://www.thecssninja.com/demo/gmail_upload/">demo</a> (<a href="http://www.thecssninja.com/demo/gmail_upload/gmail_upload.zip">source code [zip]</a>).</p>
<p>The code works in Firefox and Chrome. On Firefox the File API is used (<a href="http://www.thecssninja.com/javascript/fileapi">detailed in another blog post</a>) while on Chrome a different API is used.</p>
<p>How does Chrome work?</p>
<blockquote><p>Using a bit of CSS trickery we can create the illusion of having File API support and still allow users to drag and drop files from the desktop into Gmail. I accomplish this by having the drop zone, which becomes visible on a dragenter event, contain an invisible file input with a 100% width and height of the drop zone area. The file input also has the attribute multiple on it allowing a user to drop multiple files.</p></blockquote>
<div class="igBar"><a href="javascript:showCodeTxt('html-4');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">HTML:</span>
<div id="html-4">
<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;"><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;">"drop"</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;"><span style="color: #009900;"><a href="http://december.com/html/4/element/h1.html"><span style="color: #000000; font-weight: bold;">&lt;h1&gt;</span></a></span>Drop files here<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/h1&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;">To add them as attachments</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">&lt;input</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"filesUpload"</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"file"</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-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 drop zone is hidden by default until a dragenter event happens on the BODY tag:</p>
<div class="igBar"><a href="javascript:showCodeTxt('css-5');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">CSS:</span>
<div id="css-5">
<div class="css">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #cc00cc;">#drop <span style="color:#006600; font-weight:bold;">&#123;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000000; font-weight: bold;">position</span>: <span style="color: #993333;">relative</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">#drop input <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000000; font-weight: bold;">position</span>: <span style="color: #993333;">absolute</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: #000000; font-weight: bold;">width</span>: <span style="color:#800000;">100</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: #000000; font-weight: bold;">height</span>: <span style="color:#800000;">100</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: #000000; font-weight: bold;">top</span>: <span style="color:#800000;">0</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: #000000; font-weight: bold;">left</span>: <span style="color:#800000;">0</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">opacity: <span style="color:#800000;">0</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p>When the drop input is activated a change event is fired and the files can be enumerated:</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;">dropArea.<span style="color: #006600;">addEventListener</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"change"</span>, TCNDDU.<span style="color: #006600;">handleDrop</span>, <span style="color: #003366; font-weight: bold;">false</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">TCNDDU.<span style="color: #006600;">handleDrop</span> = <span style="color: #003366; font-weight: bold;">function</span> <span style="color:#006600; font-weight:bold;">&#40;</span>evt<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> files = evt.<span style="color: #006600;">target</span>.<span style="color: #006600;">files</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">dropArea.<span style="color: #006600;">style</span>.<span style="color: #006600;">display</span> = <span style="color: #3366CC;">"none"</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;">for</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i = <span style="color:#800000;">0</span>, len = files.<span style="color: #006600;">length</span>; i &amp;lt;len; i++<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// iterate over file(s) and process them for uploading</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:#006600; font-weight:bold;">&#125;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<div>The actual uploading is handled by XHR2:</p>
<blockquote><p>Using XHR2 and the <a href="http://www.w3.org/TR/2009/WD-XMLHttpRequest2-20090820/#the-upload-attribute">upload attribute</a> to attach progress events so we can do a real progress bar that indicates to the user how much the file has uploaded.</p></blockquote>
<div><a href="http://www.thecssninja.com/javascript/gmail-upload">Read the full blog post</a>.</div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/how-gmails-drag-and-drop-from-the-desktop-works/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Chrome Frame is out of Beta!</title>
		<link>http://ajaxian.com/archives/chrome-frame-is-out-of-beta</link>
		<comments>http://ajaxian.com/archives/chrome-frame-is-out-of-beta#comments</comments>
		<pubDate>Wed, 22 Sep 2010 19:47:32 +0000</pubDate>
		<dc:creator>Brad Neuberg</dc:creator>
				<category><![CDATA[Chrome]]></category>
		<category><![CDATA[Chrome Frame]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[IE]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=10361</guid>
		<description><![CDATA[Big news: Chrome Frame is now stable and out of beta! Today, we’re very happy to take the Beta tag off of Google Chrome Frame and promote it to the Stable channel. This stable channel release provides our most polished version of Google Chrome Frame to date, allowing users to access modern web technologies like <a href="http://ajaxian.com/archives/chrome-frame-is-out-of-beta">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/WP3N1bgjiek?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/WP3N1bgjiek?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></p>
<p>Big news: <a href="http://blog.chromium.org/2010/09/google-chrome-frame-stable-and-speedy.html">Chrome Frame is now stable and out of beta</a>!</p>
<blockquote><p>Today, we’re very happy to take the Beta tag off of Google Chrome Frame and promote it to the Stable channel. This stable channel release provides our most polished version of Google Chrome Frame to date, allowing users to access modern web technologies like HTML5 on legacy browsers. You now can <a href="http://www.google.com/chromeframe/">download the stable version of Google Chrome Frame</a> and users of the Beta will be automatically updated to it in the days ahead. If you’re an IT administrator, we’ve also posted an <a href="http://www.google.com/chromeframe/eula.html?msi=true">MSI installer</a> for deploying Google Chrome Frame in your network.</p></blockquote>
<p>Chrome Frame is now much faster and stable. It's <a href="http://www.chromium.org/developers/how-tos/chrome-frame-getting-started">extremely simple</a> to have a site use Chrome Frame:</p>
<div class="igBar"><a href="javascript:showCodeTxt('html-8');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">HTML:</span>
<div id="html-8">
<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;"><span style="color: #009900;"><a href="http://december.com/html/4/element/meta.html"><span style="color: #000000; font-weight: bold;">&lt;meta</span></a> <span style="color: #000066;">http-equiv</span>=<span style="color: #ff0000;">"X-UA-Compatible"</span> <span style="color: #000066;">content</span>=<span style="color: #ff0000;">"chrome=1"</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;</div>
</li>
</ol>
</div>
</div>
</div>
<p>For the next step the Chrome Frame team is focusing on making start-up speed even faster and removing the need for administrator rights when installing the plug-in.</p>
<p>Congrats to the Chrome Frame team!</p>
<p>[<em>Disclosure: Alex Russell, the chipper-looking fellow in the video, and I have worked together at Google and on Dojo before.</em>]</meta></p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/chrome-frame-is-out-of-beta/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>It&#8217;s Gmail: The Game!</title>
		<link>http://ajaxian.com/archives/its-gmail-the-game</link>
		<comments>http://ajaxian.com/archives/its-gmail-the-game#comments</comments>
		<pubDate>Fri, 27 Aug 2010 10:00:01 +0000</pubDate>
		<dc:creator>Brad Neuberg</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Fun]]></category>
		<category><![CDATA[Games]]></category>
		<category><![CDATA[Google]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=10002</guid>
		<description><![CDATA[TechCrunch reports on a Googler, Paul Truong, who created an HTML5-based game for Gmail called Galactic Inbox using his 20% time: When you start it up, a little Gmail logo envelope guy pops out of a “20% Projects Lab” and starts flying. Essentially, he’s a spaceship and can shoot objects coming his way. It’s simple, <a href="http://ajaxian.com/archives/its-gmail-the-game">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><a href="http://ajaxian.com/wp-content/images/444.png"><img class="aligncenter size-full wp-image-10003" title="444" src="http://ajaxian.com/wp-content/images/444.png" alt="" width="504" height="378" /></a></p>
<p><a href="http://techcrunch.com/2010/08/13/gmail-game/">TechCrunch reports</a> on a Googler, <a href="http://www.monocubed.com">Paul Truong</a>, who created an HTML5-based game for Gmail called <a href="http://www.monocubed.com/?p=549">Galactic Inbox</a> using his 20% time:</p>
<blockquote><p>When you start it up, a little Gmail logo envelope guy pops out of a “20% Projects Lab” and starts flying. Essentially, he’s a spaceship and can shoot objects coming his way. It’s simple, but fun.</p></blockquote>
<p style="text-align: center;"><a href="http://ajaxian.com/wp-content/images/galactic4.png"><img class="aligncenter size-full wp-image-10004" title="galactic4" src="http://ajaxian.com/wp-content/images/galactic4.png" alt="" width="504" height="378" /></a></p>
<p>Read more on the <a href="http://gmailblog.blogspot.com/2010/08/galactic-inbox-html5-game-inspired-by.html?utm_source=feedburner&amp;utm_medium=feed&amp;utm_campaign=Feed:+OfficialGmailBlog+(Gmail+Blog)">Gmail Blog</a>.</p>
<p><a href="http://www.monocubed.com/?p=549">Play the game yourself</a> (note that you must be using a modern browser)!</p>
<p>[<a href="http://www.linkedin.com/in/bryanneuberg">via Bryan Neuberg</a>]</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/its-gmail-the-game/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>How to Drag Out Files Like Gmail</title>
		<link>http://ajaxian.com/archives/how-to-drag-out-files-like-gmail</link>
		<comments>http://ajaxian.com/archives/how-to-drag-out-files-like-gmail#comments</comments>
		<pubDate>Thu, 26 Aug 2010 11:00:40 +0000</pubDate>
		<dc:creator>Brad Neuberg</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=10076</guid>
		<description><![CDATA[Ryan Seddon, aka the CSS Ninja, has a nice blog post up where he reverse engineers the new feature in Gmail where you can drag attachments from an email on to your desktop. Note that the feature only currently works in Chrome. Ryan begins with the following code: PLAIN TEXT JAVASCRIPT: &#160; var file = <a href="http://ajaxian.com/archives/how-to-drag-out-files-like-gmail">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.ryanseddon.com/">Ryan Seddon</a>, aka <a href="http://www.thecssninja.com/">the CSS Ninja</a>, has a <a href="http://www.thecssninja.com/javascript/gmail-dragout">nice blog post up</a> where he reverse engineers the new feature in Gmail where you can <a href="http://gmailblog.blogspot.com/2010/08/drag-and-drop-attachments-to-save-them.html">drag attachments from an email on to your desktop</a>.</p>
<p style="text-align: center;"><a href="http://ajaxian.com/wp-content/images/drag_attachment2.jpg"><img class="aligncenter size-full wp-image-10077" title="drag_attachment2" src="http://ajaxian.com/wp-content/images/drag_attachment2.jpg" alt="" width="335" height="193" /></a></p>
<p style="text-align: center;"><a href="http://ajaxian.com/wp-content/images/drag_attachment3.jpg"><img class="aligncenter size-full wp-image-10078" title="drag_attachment3" src="http://ajaxian.com/wp-content/images/drag_attachment3.jpg" alt="" width="368" height="190" /></a></p>
<p>Note that the feature only currently works in Chrome.</p>
<p>Ryan begins with the following code:</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-11');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-11">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> file = document.<span style="color: #006600;">getElementById</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"dragout"</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">file.<span style="color: #006600;">addEventListener</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"dragstart"</span>,<span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span>evt<span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; evt.<span style="color: #006600;">dataTransfer</span>.<span style="color: #006600;">setData</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"DownloadURL"</span>,fileDetails<span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span>,<span style="color: #003366; font-weight: bold;">false</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>Describing the code Ryan says:</p>
<blockquote><p>From the code above you attach an ondragstart event listener to something you want to “drag out” and save to your file system. On the dragstart event you set the data using the new “DownloadURL” type and pass file information to it.</p></blockquote>
<p>Note though that in order to pass the correct data to the dragstart event you need to provide a download URL that can be passed to the <code>setData("DownloadURL"</code> call. Ryan uses the <a href="http://ejohn.org/blog/html-5-data-attributes/">HTML5 data-* attribute</a> to pass this custom data in:</p>
<div class="igBar"><a href="javascript:showCodeTxt('html-12');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">HTML:</span>
<div id="html-12">
<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;"><span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;">&lt;a</span></a> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"Eadui.ttf"</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"dragout"</span> draggable=<span style="color: #ff0000;">"true"</span> data-downloadurl=<span style="color: #ff0000;">"</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: #ff0000;">&nbsp; &nbsp; application/octet-stream</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: #ff0000;">&nbsp; &nbsp; :Eadui.ttf</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: #ff0000;">&nbsp; &nbsp; :http://thecssninja.com/gmail_dragout/Eadui.ttf"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>Font file<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/a&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p>The custom attribute uses three different fields of data separated by colons:</p>
<blockquote><p>The files mime type, the name you wish it to be saved as (this can be anything) and the url to where the file can be downloaded from.</p></blockquote>
<p>Nice find Ryan!</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/how-to-drag-out-files-like-gmail/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>HTML5Rocks Gets Awesomer</title>
		<link>http://ajaxian.com/archives/html5rocks-turns-it-up-to-2</link>
		<comments>http://ajaxian.com/archives/html5rocks-turns-it-up-to-2#comments</comments>
		<pubDate>Mon, 16 Aug 2010 10:45:48 +0000</pubDate>
		<dc:creator>Brad Neuberg</dc:creator>
				<category><![CDATA[Announcements]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Google]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=10008</guid>
		<description><![CDATA[Version 2 of HTML5Rocks is hot off the presses! We think HTML5 will make your work more engaging and create a faster, more responsive experience for your users, so we're happy to add today a slew of new content to html5rocks.com. If you want to not only get up to speed, but understand the browser differences <a href="http://ajaxian.com/archives/html5rocks-turns-it-up-to-2">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://ajaxian.com/wp-content/images/html5rocks1.png"><img class="aligncenter size-full wp-image-10011" title="html5rocks1" src="http://ajaxian.com/wp-content/images/html5rocks1.png" alt="" width="774" height="317" /></a></p>
<p>Version 2 of <a href="http://blog.chromium.org/2010/08/html5rocks-v2-more-guides-new-studio.html">HTML5Rocks is hot off the presses</a>!</p>
<blockquote>
<p style="text-align: left;">We think HTML5 will make your work more engaging and create a faster, more responsive experience for your users, so we're happy to add today a slew of new content to <a href="http://html5rocks.com/">html5rocks.com</a>.</p>
<p style="text-align: left;">If you want to not only get up to speed, but understand the browser differences and techniques for a robust implementation, please take a look through the new guides for implementing <a href="http://www.html5rocks.com/tutorials/video/basics/">HTML5 video</a>,<a href="http://www.html5rocks.com/tutorials/offline/whats-offline/">understanding "offline,"</a> <a href="http://www.html5rocks.com/tutorials/developertools/auditpanel/">auditing your webapp</a> with the Chrome developer tools, and using <a href="http://www.html5rocks.com/tutorials/workers/basics/">web workers</a>and <a href="http://www.html5rocks.com/tutorials/webfonts/quick/">@font-face</a>. You can now comment about your experiences with these features and stay up to date on new content via our new <a href="http://www.html5rocks.com/tutorials/index.xml">RSS feed</a>.</p>
<p style="text-align: left;">We're also sharing the new <a href="http://studio.html5rocks.com/">HTML5 Studio</a>, a collection of samples of these features in use, with code you can learn from and hack on.</p>
</blockquote>
<p style="text-align: left;"><a href="http://ajaxian.com/wp-content/images/html5studio.jpg"><img class="aligncenter size-full wp-image-10009" title="html5studio" src="http://ajaxian.com/wp-content/images/html5studio.jpg" alt="" width="540" height="173" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/html5rocks-turns-it-up-to-2/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Google Chrome Frame Gets Beta Love</title>
		<link>http://ajaxian.com/archives/google-chrome-frame-gets-beta-love</link>
		<comments>http://ajaxian.com/archives/google-chrome-frame-gets-beta-love#comments</comments>
		<pubDate>Tue, 08 Jun 2010 23:24:14 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Browsers]]></category>
		<category><![CDATA[Chrome Frame]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Google]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=9553</guid>
		<description><![CDATA[*thump*. That is the sound of Google Chrome Frame getting a beta tag on it with a new version that comes up to Chrome 5 levels: Instead of adding new bells and whistles, we've fixed more than 200 bugs to make integration with Internet Explorer seamless while improving security, stability, and performance. For example, we&#8217;ve <a href="http://ajaxian.com/archives/google-chrome-frame-gets-beta-love">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><img src="http://ajaxian.com/wp-content/images/gcf_html5test.png" alt="" title="gcf_html5test" width="480" height="380" class="alignnone size-full wp-image-9554" /></p>
<p>*thump*. That is the sound of Google Chrome Frame <a href="http://blog.chromium.org/2010/06/google-chrome-frame-now-in-beta.html">getting a beta tag on it</a> with a new version that comes up to Chrome 5 levels:</p>
<blockquote><p>
Instead of adding new bells and whistles, we've fixed more than 200 bugs to make integration with Internet Explorer seamless while improving security, stability, and performance. For example, we&#8217;ve improved our handling of Internet Explorer&#8217;s InPrivate browsing, cache clearing, and cookie blocking. All of the enhancements and features of <a href="http://chrome.blogspot.com/2010/05/new-chrome-stable-release-welcome-mac.html">Google Chrome 5.0</a> are available in Google Chrome Frame too, including HTML5 audio and video, canvas, geolocation, workers, and databases.</p>
<p>As we've worked on these improvements, we&#8217;ve been excited to see sites adopting Google Chrome Frame, including <a href="http://www.meebo.com">Meebo</a> and all the blogs hosted by <a href="http://www.wordpress.com">WordPress</a>. In addition to our launch partner Google Wave, some other Google properties, including Orkut and YouTube are also relying on Google Chrome Frame to deliver HTML5 experiences to millions of users.</p>
<p>For those of you who want to develop HTML5 applications and deploy them broadly, we encourage you to <a href="http://www.google.com/chromeframe/">give Google Chrome Frame a try</a>. Existing users will be auto-updated to the beta, so if you downloaded Google Chrome Frame before, you&#8217;ll automatically get the new version. We&#8217;re also creating a new <a href="http://www.google.com/chromeframe/eula.html?extra=devchannel">dev channel</a> release, where you can try out the cutting-edge features we&#8217;re developing.  For information on getting started with Google Chrome Frame, our project <a href="http://www.chromium.org/developers/how-tos/chrome-frame-getting-started">documentation</a> is the place to start.
</p></blockquote>
<p>Alex gave a talk on how you can sprinkle in the Chrome Frame love, and start using the HTML5 goodness of video, svg, canvas, etc today!</p>
<p><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/Sfe2l8QKxPg&#038;color1=0xb1b1b1&#038;color2=0xd0d0d0&#038;hl=en_US&#038;feature=player_embedded&#038;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/Sfe2l8QKxPg&#038;color1=0xb1b1b1&#038;color2=0xd0d0d0&#038;hl=en_US&#038;feature=player_embedded&#038;fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="385"></embed></object></p>
<p>We hear cries of <a href="http://clubajax.org/ie6-the-end-is-near/">the end is near!</a>, and now you have a new push. Take a breath and spend the IE6 cycles on building amazing Web applications. So, <a href="http://www.chromium.org/developers/how-tos/chrome-frame-getting-started">CFInstall.check({..})</a> away! :)</p>
<p>Alex has a <a href="http://alex.dojotoolkit.org/2010/06/beta/">post on the beta itself</a>:</p>
<blockquote><p>
In some ways it’s a strange product; it’s working best when you notice it least. As a developer, you shouldn’t have to think much harder about it than either to include the header or meta tag or to include a couple of lines of script to prompt users to install the plugin — a process which notably doesn’t require a restart and doesn’t even take users off of your site. There’s no new tool to learn, no new language you have to wrap your head around…in fact, the hardest part might just be putting down all the habits we’ve collected for catering to legacy browsers.</p>
<p>As I’ve begun to build exclusively to modern browsers, the experience of concerted un-learning of hacks and the ability to write directly to the platform again, sans toolkit, has been eye opening. Yes, there’s still a lot that can be improved in DOM, CSS, and HTML, but things are moving, and the tools we need now aren’t the tools we have today. Better yet, there’s every indication that things are progressing fast enough that instead of building tools to bring up the rear, we’ll be building them to shield ourselves from the ferocious pace of improvement should we need them at all.</p>
<p>If you’re starting a new project today, I encourage you to prototype to HTML5 and modern features and then think hard about what you’re building and for whom. Do these apps really need to run on legacy browsers? Why not just use GCF to make that pain and expense go away. Once you’ve experienced how good modern web development can be — how rich and fast the apps you can deliver are — I’m convinced that you’ll find it hard to go back. The rich, open, interoperable web is the platform of the future, and I couldn’t be happier that GCF is going to help deliver that future.
</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/google-chrome-frame-gets-beta-love/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Google I/O Sessions for Web Devs</title>
		<link>http://ajaxian.com/archives/google-io-sessions-for-web-devs</link>
		<comments>http://ajaxian.com/archives/google-io-sessions-for-web-devs#comments</comments>
		<pubDate>Mon, 07 Jun 2010 16:17:03 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Google]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=9523</guid>
		<description><![CDATA[The Google I/O sessions are now live. I/O was a big event this year, and the press liked to focus on the splashy double headed keynotes (day 1: go web!, day 2: go Android :/). The bulk of the real content from Google engineers was very solid indeed, and there are gems for Web developers <a href="http://ajaxian.com/archives/google-io-sessions-for-web-devs">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>The Google I/O <a href="http://code.google.com/events/io/2010/sessions.html">sessions are now live</a>. I/O was a big event this year, and the press liked to focus on the splashy double headed keynotes (day 1: go web!, day 2: go Android :/).</p>
<p>The bulk of the real content from Google engineers was very solid indeed, and there are gems for Web developers out there.</p>
<p>I wanted to highlight a slew of these:</p>
<p><a href="http://code.google.com/events/io/2010/sessions/gwt-html5.html">GWT + HTML5 can do what?!</a></p>
<p>Remember the <a href="http://ajaxian.com/archives/gwt-quake">GWT Quake</a> goodness from April 1st? The crew behind it are back giving a talk about the tech behind it. There are many gems in here, such as the image library by Ray Cromwell that has software and hardware back ends (WebGL). Watching the photoshop-esque filters running via WebGL makes you drool.</p>
<p><object width="480" height="289"><param name="movie" value="http://www.youtube.com/v/aW--Wlf9EFs&#038;color1=0xb1b1b1&#038;color2=0xd0d0d0&#038;hl=en_US&#038;feature=player_embedded&#038;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/aW--Wlf9EFs&#038;color1=0xb1b1b1&#038;color2=0xd0d0d0&#038;hl=en_US&#038;feature=player_embedded&#038;fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="480" height="289"></embed></object></p>
<p>There were other GWT sessions:</p>
<ul>
<li><a href="http://code.google.com/events/io/2010/sessions/fireside-chat-gwt.html">GWT Team fireside chat
<li><a href="http://code.google.com/events/io/2010/sessions/measure-in-milliseconds-speed-tracer-gwt.html">Speed Tracer tooling</a>
</li>
<li><a href="http://code.google.com/events/io/2010/sessions/faster-apps-faster-gwt-compiler.html">Optimizing apps with the GWT compiler</a>
</li>
<li><a href="http://code.google.com/events/io/2010/sessions/architecting-performance-gwt.html">Architecting for performance with GWT</a>
</li>
<li><a href="http://code.google.com/events/io/2010/sessions/gwt-linkers-webworkers-extensions.html">GWT Linkers target HTML5 Web Workers, Chrome Extensions, and more</a>
</li>
<li><a href="http://code.google.com/events/io/2010/sessions/gwt-ui-overhaul.html">GWT's UI overhaul: UiBinder, ClientBundle, and Layout Panels</a>
</li>
<li><a href="http://code.google.com/events/io/2010/sessions/gwt-continuous-build-testing.html">GWT testing best practices</a>
</li>
<li><a href="http://code.google.com/events/io/2010/sessions/architecting-production-gwt.html">Architecting GWT applications for production at Google</a>
</li>
<p></a></li>
</ul>
<p><b>HTML5 and Chrome</b></p>
<p>Google used the "HTML5" word a loooot that week. Here is a blending of talks, part open Web, part Chrome itself. </p>
<p>Ian Fette kicks off a session on HTML5 support:</p>
<p><object width="480" height="289"><param name="movie" value="http://www.youtube.com/v/tC3-NpIGx1U&#038;color1=0xb1b1b1&#038;color2=0xd0d0d0&#038;hl=en_US&#038;feature=player_embedded&#038;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/tC3-NpIGx1U&#038;color1=0xb1b1b1&#038;color2=0xd0d0d0&#038;hl=en_US&#038;feature=player_embedded&#038;fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="480" height="289"></embed></object></p>
<ul>
<li><a href="http://code.google.com/events/io/2010/sessions/webm-open-video-playback-html5.html">WebM Open Video Playback in HTML5</a>
</li>
<li><a href="http://code.google.com/events/io/2010/sessions/developing-with-html5.html">Developing with HTML5</a>
</li>
<li><a href="http://code.google.com/events/io/2010/sessions/using-chrome-frame.html">USing Google Chrome Frame</a>
</li>
<li><a href="http://code.google.com/events/io/2010/sessions/web-apps-chrome-web-store.html">Developing web apps for the Chrome Web Store</a>
</li>
<li><a href="http://code.google.com/events/io/2010/sessions/chrome-extensions.html">Chrome Extensions</a>
</li>
<li><a href="http://code.google.com/events/io/2010/sessions/native-code-chrome.html">Native Client</a>
</li>
<li><a href="http://code.google.com/events/io/2010/sessions/fireside-chat-chrome.html">Chrome fireside chat</a>
</li>
<li><a href="http://blog.chromium.org/2010/06/google-chromes-developer-tools-improve.html">Google Chrome Developer Tools</a>
</li>
</ul>
<p>Oh, and have some fun with Ignite:</p>
<p><object width="480" height="289"><param name="movie" value="http://www.youtube.com/v/-raLZXxLexE&#038;color1=0xb1b1b1&#038;color2=0xd0d0d0&#038;hl=en_US&#038;feature=player_embedded&#038;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/-raLZXxLexE&#038;color1=0xb1b1b1&#038;color2=0xd0d0d0&#038;hl=en_US&#038;feature=player_embedded&#038;fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="480" height="289"></embed></object></p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/google-io-sessions-for-web-devs/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>What can we do with a Web Store, and even an Open Web Store?</title>
		<link>http://ajaxian.com/archives/what-can-we-do-with-a-web-store-and-even-an-open-web-store</link>
		<comments>http://ajaxian.com/archives/what-can-we-do-with-a-web-store-and-even-an-open-web-store#comments</comments>
		<pubDate>Thu, 20 May 2010 19:49:49 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Google]]></category>
		<category><![CDATA[Mozilla]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=9362</guid>
		<description><![CDATA[We have been thinking about the app store models for awhile, and how they port to the Web. With the Chrome Web Store we can take a look at a concrete example and think about how it could potentially grow? Mozilla just came out with a post that aims to start a discussion about what <a href="http://ajaxian.com/archives/what-can-we-do-with-a-web-store-and-even-an-open-web-store">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><img src="http://code.google.com/chrome/apps/images/launcher.png" width="480"/></p>
<p>We have been thinking about the app store models for awhile, and how they port to the Web. With the Chrome Web Store we can take a look at a concrete example and think about how it could potentially grow?</p>
<p>Mozilla just came out with a post that aims to start a discussion about <a href="http://blog.mozilla.com/blog/2010/05/20/an-open-web-app-store/">what an Open Web Store would mean?</a>:</p>
<ul>
<li>exclusively host web applications based upon HTML5, CSS, Javascript and other widely-implemented open standards in modern web browsers — to avoid interoperability, portability and lock-in issues
</li>
<li>ensure that discovery, distribution and fulfillment works across all modern browsers, wherever they run (including on mobile devices)
</li>
<li>set forth editorial, security and quality review guidelines and processes that are transparent and provide for a level playing field<br />
respect individual privacy by not profiling and tracking individual user behavior beyond what’s strictly necessary for distribution and fulfillment
</li>
<li>be open and accessible to all app producers and app consumers
</li>
</ul>
<p>I personally have been taking apart some of the pieces that make the holistic "app store" experience, and think there is room to do more with the various pieces. I would love your thoughts on <a href="http://almaer.com/blog/what-should-the-future-of-web-app-stores-be">what I wrote</a> (pasted contents below):</p>
<p>App Stores. Catalogs. Markets. Gardens. They have been an incredibly hot topic ever since the success of the iPhone App Store. Everyone has wanted to own and control an app store ever since, for many different reasons. Not all of them are good. Not all of them can extract from the App Store experience.</p>
<p>With that, today <a href="http://blog.chromium.org/2010/05/chrome-web-store.html">Google</a> <a href="http://gizmodo.com/5542695">unveiled</a> <a href="http://techcrunch.com/2010/05/19/chrome-os-versus-android/">a</a> <a href="http://code.google.com/chrome/apps/docs/index.html">Chrome Web Store</a>. Many <a href="http://ra-ajax.org/the-problems-of-apple-s-app-store-and-an-open-web-alternative">folks</a> have talked about how the Web, and the Open Web, could benefit from an app store. At a high level, the Web should give developers great options to distribute and monetize (if they so wish) their products, projects, and abilities.</p>
<p>There was a phase where people assumed that Internet meant "everything would be driven to be 'free'", and the model to make money is ads. Ads can potentially be a great avenue depending on your product, but people have always been willing to part with money to get value (or perceived value) back... and it shouldn't be too shocking to have see that play out again via app stores. Deliver great experiences and they may come. There is a lot to be said about "expectations" though, and I feel for some of the business models that are in trouble (media etc).</p>
<p>So, it would be nice if a developer could build something useful, stick a price tag on it, and sell it... using great distribution channels. One model for this is to package the application in a way that works in the distribution channels (e.g. PhoneGap, Titanium, or for us on webOS.... natively) but surely we can do better?</p>
<p>When you look at what an app store is, it consists of many pieces indeed.</p>
<p>For example,</p>
<p><img src="http://almaer.com/blog/uploads/appstorestack.png" alt="appstorestack" title="appstorestack" width="290" height="362" class="alignnone size-full wp-image-2702"/></p>
<p><b>Application Platform</b></p>
<p>This is the set of APIs and technology that you can use to build your applications. We feel strongly that having many fragmented devices with their own set of APIs, and thus their own platform, is a path to madness. To fix that, we need a unifying platform. We could unify on a proprietary platform (e.g. Flash, Cocoa, Silverlight/.NET, or what have you) or we could learn from history and honour the very lucky place that are in as an industry, and choose Open standards... and in concrete, the Web.</p>
<p>The Chrome Web Store very much honours this. Their apps are just Web apps. This is fantastic and a big step forward. The fact that you could take the same codebase and ship it in a store that runs in Chrome and other browsers (and web OS's :) is great news.</p>
<p>But this is only one level of the stack.</p>
<p><b>Application Packaging</b></p>
<p>How do you package up your application to place in a store? Chrome has a prelim crack at this with <a href="http://code.google.com/chrome/apps/docs/developers_guide.html">their crx format that we have seen via Chrome Extensions</a>. There are also others: </p>
<p><a href="http://www.w3.org/TR/widgets/#configuration-document0">W3C widgets</a>, <a href="http://developer.android.com/guide/topics/manifest/manifest-intro.html">Android</a>, <a href="http://developer.palm.com/index.php?option=com_content&#038;view=article&#038;id=1748&#038;Itemid=43">webOS</a>, <a href="http://library.forum.nokia.com/index.jsp?topic=/Web_Developers_Library/GUID-BBA0299B-81B6-4508-8D5B-5627206CBF7B.html">Nokia WRT</a>, and more. Libraries like PhoneGap already have to deal with this world. We need scripts and tools to navigate this world. In the short term lets create and use those tools, but how about all getting together and making a format that we can all live with and extend in the right ways?</p>
<p><b>Distribution</b></p>
<p>How do you distribute your apps? Right now you either: a) put up a website and folks find you (via search {and thus SEO}, the social web, and links), b) put an application into a store itself.</p>
<p>The Web won on distribution. AOL couldn't hold back the tide. Everything was Out There. Do we really want one or two companies in charge of what gets Out There? There is certainly value to curation, and finding applications via places you trust, but I personally want to see us solve the problem is a distributed open way. No entity should own the pipe. There should be no "right way" to censor or review applications. Different systems can choose values. Ideally they are transparent, and consumers can then choose where they want to look for the app content.</p>
<p><b>Discoverability</b></p>
<p>If we had a standard format for "installable web apps" a lot of good can happen. If we had a standard format, we could annotate the Web with it. Browsers could consume it (e.g. <a href="http://almaer.com/firefox/appdiscover/">App Discover</a> and the talk on <a href="http://ajaxian.com/archives/detecting-extensions-in-the-browser-and-beyond">just this</a>.) and search engines could index it.</p>
<p>If I am on a Web site that has an application available, the browser should let me know. If I do a Google search, a one box should tell me about the matching apps for the platforms that I care about.</p>
<p>Anyone could create a merchandising experience and have access to apps to search for. We can go beyond that too of course. We can have web hooks that ping services with information about applications that have been created. A meta service would crop up that looks for the data and then pings the various Web app stores, just like we saw with trackbacks and the like.</p>
<p>There is still a ton of room to innovate in discoverability. Smarter searching that ties deeper than matching on the content will kick in.</p>
<p><b>Merchandising</b></p>
<p>Having access to the application data is important. The Palm ecosystem shares full feeds of the data from the catalog and this allows anyone to merchandize the content. They can be creative and present the right content to the user. There is a lot of innovation to be done here. Ideally, someone could create a great new social algorithm and have it run against all of the web apps out there. Right now, the stack is monolithic and we only have basic merchandising needs in most of the ecosystems. What about affiliate systems and the like which could enable innovation here?</p>
<p><b>Fulfillment</b></p>
<p>How do you pay for a good. How does the developer get paid for the good. This is an obviously crucial layer. Apple has done very well because people already had iTunes accounts coming into the world of the iPhone. In a distributed model, users could choose to fulfill via Amazon, or Paypal, or Checkout, or SimpleBank (one day <a href="http://al3x.net/2010/05/17/something-new.html">right al3x?</a> :)</p>
<p><b>And more....</b></p>
<p>We haven't even gotten into identity, single sign-on, reputation systems, and how reviews can be shared on the same applications in different stores. There is so much to be done here.</p>
<p>Looking forward, where does this next step take us? Is there a path where web applications themselves are back to just being websites that can live in various stores, and a pay gate can be setup in an easy way?</p>
<p>I can't wait to see how this plays out. We could all go off and build ivory towered app stores, or we could come together and work out a better way. Are you in?</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/what-can-we-do-with-a-web-store-and-even-an-open-web-store/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>2010: Web Fonts Are Here and Ready to Use</title>
		<link>http://ajaxian.com/archives/2010-web-fonts-are-here-and-ready-to-use</link>
		<comments>http://ajaxian.com/archives/2010-web-fonts-are-here-and-ready-to-use#comments</comments>
		<pubDate>Wed, 19 May 2010 18:12:56 +0000</pubDate>
		<dc:creator>Brad Neuberg</dc:creator>
				<category><![CDATA[Announcements]]></category>
		<category><![CDATA[Font]]></category>
		<category><![CDATA[Framework]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[Typography]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=9338</guid>
		<description><![CDATA[There's an old saying: "It took me ten years to be an overnight success." We've been waiting for web fonts for at least a decade, and 2010 will finally be the year that web fonts go mainstream. This is in no small part to the work both Typekit and Google have been doing. Today they <a href="http://ajaxian.com/archives/2010-web-fonts-are-here-and-ready-to-use">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><a style="display: block;" href="http://ajaxian.com/wp-content/images/Tangerine.png"><img class="aligncenter size-full wp-image-9339" style="text-align: center;" title="Tangerine" src="http://ajaxian.com/wp-content/images/Tangerine.png" alt="" width="412" height="73" /></a><br />
There's an old saying: "It took me ten years to be an overnight success." We've been waiting for web fonts for at least a decade, and 2010 will finally be the year that web fonts go mainstream.</p>
<p>This is in no small part to the work  both <a href="http://typekit.com/">Typekit</a> and Google have been doing. Today they both <a href="http://googlecode.blogspot.com/2010/05/introducing-google-font-api-google-font.html">announced</a> <a href="http://googlecode.blogspot.com/2010/05/introducing-webfont-loader-in.html">some very cool</a> things in this area.</p>
<p>First up, Google announced that they are releasing high quality open source fonts in the <a href="http://code.google.com/webfonts">Google Font Directory</a>. Since these are open source you can even download the original font files yourself at the <a href="http://code.google.com/p/googlefontdirectory/">font code.google.com project</a>.</p>
<p style="text-align: center;"><a href="http://code.google.com/webfonts"><img class="aligncenter size-full wp-image-9340" title="fontdirectory" src="http://ajaxian.com/wp-content/images/fontdirectory.png" alt="" width="442" height="375" /></a></p>
<p>Next, Google has made it very easy to include these fonts into your page using the new <a href="http://code.google.com/apis/webfonts/">Google Font API</a>. To use a font you simply drop some HTML into your page similar to the following, specifying the font you want to use:</p>
<div class="igBar"><a href="javascript:showCodeTxt('html-14');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">HTML:</span>
<div id="html-14">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/link.html"><span style="color: #000000; font-weight: bold;">&lt;link</span></a> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">'http://fonts.googleapis.com/css?family=Tangerine'</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color: #000066;">rel</span>=<span style="color: #ff0000;">'stylesheet'</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color: #000066;">type</span>=<span style="color: #ff0000;">'text/css'</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</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;">body { font-family: 'Tangerine', serif; } </div>
</li>
</ol>
</div>
</div>
</div>
<p>Doesn't get simpler than that. The new API does alot of things for you <a href="http://googlecode.blogspot.com/2010/05/introducing-google-font-api-google-font.html">behind the scenes</a>:</p>
<blockquote><p>Google’s serving infrastructure takes care of converting the font into a  format compatible with any modern browser (including Internet Explorer 6  and up), sends just the styles and weights you select, and the font  files and CSS are tuned and optimized for web serving. For example,  cache headers are set to maximize the likelihood that the fonts will be  served from the browser’s cache with no need for a network roundtrip,  even when the same font is linked from different websites.</p>
<p>These  fonts also work well with CSS3 and HTML5 styling, including drop  shadows, rotation, etc. In addition, selecting these fonts in your CSS  works just the same as for locally installed fonts, facilitating clean  separation of content and presentation.</p></blockquote>
<p>On a related front, <a href="http://typekit.com/">Typekit</a> and Google <a href="http://googlecode.blogspot.com/2010/05/introducing-webfont-loader-in.html">announced</a> a new <a href="http://code.google.com/apis/webfonts/docs/webfont_loader.html">Web Font Loader</a> that smooths over many of the differences around loading web fonts on a page:</p>
<blockquote><p>The WebFont Loader puts the developer in control of how web fonts are  handled by various browsers. The API fires JavaScript events at certain  points, for example when the web font completes downloading. With these  events, developers can control how web fonts behave on a site so that  they download consistently across all browsers. In addition, developers  can set the fallback font's size to more closely match the web font, so  content doesn't reflow after loading.</p>
<p>Furthermore, the WebFont  Loader is designed to make it easy to switch between different providers  of web fonts, including Google, Typekit, and others. The code is  modular, and we expect to add modules for other major web font providers  in coming weeks.</p></blockquote>
<p>It's great to see <a href="http://typekit.com/">Typekit</a> involved in this; they are a real pioneer in this area and have helped make fonts on the web a reality.</p>
<p><a href="http://typekit.com/"><img class="aligncenter size-full wp-image-9341" title="typekit-site-logo" src="http://ajaxian.com/wp-content/images/typekit-site-logo.gif" alt="" width="95" height="25" /></a></p>
<p>To see all these pieces together navigate over to <a href="http://www.smashingmagazine.com/">Smashing Magazine</a> which relaunched their site using these technologies.</p>
<p>Congrats to the Google Web Fonts and Themes team, including <a href="http://www.advogato.org/person/raph/">Raph Levien</a>, Jeremie Lenfant-Engelmann, <a href="http://mindgarden.de/">Marc Tobias Kunisch</a>, <a href="http://www.ming-ling.net/wfatf/">Meslissa Louie</a>, and David Kuettel.</p>
<p><em>[Disclosure: I work for Google and know the Web Fonts team. However, even if I didn't, I would still be excited about this since I've been waiting for web fonts to happen <a href="http://www.crazyfads.com/90s.htm">since the 90s</a>!]</em></link>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/2010-web-fonts-are-here-and-ready-to-use/feed</wfw:commentRss>
		<slash:comments>21</slash:comments>
		</item>
		<item>
		<title>Chrome Web Store? I want an Open Web Store</title>
		<link>http://ajaxian.com/archives/chrome-web-store-i-want-an-open-web-store</link>
		<comments>http://ajaxian.com/archives/chrome-web-store-i-want-an-open-web-store#comments</comments>
		<pubDate>Wed, 19 May 2010 17:04:02 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Chrome]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Google]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=9334</guid>
		<description><![CDATA[The Chrome Web Store was shown off at the Google I/O keynote (streaming live) today along with the other great news of open codecs, great new tools, and more. I found myself torn about this one. For one, it seems tied into Chrome itself. The problem that Sundar stated (developers needing a good channel; users <a href="http://ajaxian.com/archives/chrome-web-store-i-want-an-open-web-store">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><img src="http://code.google.com/chrome/apps/images/launcher.png" width="480"/></p>
<p>The Chrome Web Store was shown off at the <a href="http://www.youtube.com/GoogleDevelopers">Google I/O keynote (streaming live)</a> today along with the other great news of open codecs, great new tools, and more.</p>
<p>I found myself torn about this one. For one, it seems tied into Chrome itself. The problem that Sundar stated (developers needing a good channel; users having a hard time finding things) is valid for the entire Web. We don't need a Firefox Web Store, IE Web Store, etc etc etc. We have an opportunity to do better here.</p>
<p>That being said, it was great to see the early stages here and how they give developers the ability to place your Web application in to an experience where you can put a price tag on top.</p>
<p>I would love to get details here. How do you package the application? Do you have to upload the package to the store?</p>
<p>I wonder if there is room for a distributed system that allows me to put a price tag on my web application, but keep it at my URL.</p>
<p>What do you think? There is a session on the store... so I look forward to the deets!</p>
<p><img src="http://ajaxian.com/wp-content/images/rodonchromewebstore.png" alt="" title="rodonchromewebstore" width="356" height="66" class="alignnone size-full wp-image-9335"/></p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/chrome-web-store-i-want-an-open-web-store/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>WebM: The On2 codec is here, with support from Google, Mozilla, and Opera</title>
		<link>http://ajaxian.com/archives/webm-the-on2-codec-is-here-with-support-from-google-mozilla-and-opera</link>
		<comments>http://ajaxian.com/archives/webm-the-on2-codec-is-here-with-support-from-google-mozilla-and-opera#comments</comments>
		<pubDate>Wed, 19 May 2010 15:46:50 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[Video]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=9330</guid>
		<description><![CDATA[The WebM project is dedicated to developing a high-quality, open video format for the web that is freely available to everyone. The WebM launch is supported by Mozilla, Opera, Google and more than forty other publishers, software and hardware vendors. WebM is an open, royalty-free, media file format designed for the web. WebM defines the <a href="http://ajaxian.com/archives/webm-the-on2-codec-is-here-with-support-from-google-mozilla-and-opera">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<blockquote><p>The <a href="http://www.webmproject.org/">WebM</a> project is dedicated to developing a high-quality, open video format for the web that is freely available to everyone.</p>
<p>The WebM launch is supported by Mozilla, Opera, Google and more than forty other publishers, software and hardware vendors.</p>
<p>WebM is an open, royalty-free, media file format designed for the web.</p>
<p>WebM defines the file container structure, video and audio formats. WebM files consist of video streams compressed with the VP8 video codec and audio streams compressed with the <a href="http://xiph.org/vorbis/">Vorbis</a> audio codec. The WebM file structure is based on the <a href="http://corecodec.com/products/matroska">Matroska</a> container.</p>
</blockquote>
<p><img style="float:right; padding:8px" src="http://www.webmproject.org/media/images/webm-devpreview.png" alt="" /></p>
<p>It happened. Today, Google is up on stage at I/O unveiling a new <a href="http://www.webmproject.org/">WebM</a> project alongside a slew of partners (notably: Mozilla and Opera on the browser side) that gets the On2 codec out into the open. This is huge news for the fight for Open Video, and everyone will now have eyes on Safari.</p>
<p>YouTube will be a huge push here, and you can go to their html5 version: <a href="http://www.youtube.com/html5">http://www.youtube.com/html5</a> and check it out. Today it is available in trunk builds on <a href="http://build.chromium.org/buildbot/snapshots">Chromium</a> and <a href="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/">Firefox</a>. Soon, an Opera beta, Chrome dev release, and more.</p>
<p>The project is going after:</p>
<ul>
<li>
<p><strong>Openness and innovation.</strong> A key factor in the web’s success is<br /> that its core technologies such as HTML, HTTP, and TCP/IP are open<br /> for anyone to implement and improve.  With video being core to the<br /> web experience, a high-quality, open video format choice is needed.<br /> WebM is 100% free, and open-sourced under a<br /> <a href="http://www.webmproject.org/license/">BSD-style license</a>.</p>
</li>
<li>
<p><strong>Optimized for the web.</strong> Serving video on the web is different<br /> from traditional broadcast and offline mediums. Existing video<br /> formats were designed to serve the needs of these mediums and do<br /> it very well. WebM is focused on addressing the unique needs of<br /> serving video on the web.</p>
<ul>
<li>
<p>Low computational footprint to enable playback on any device,<br /> including low-power netbooks, handhelds, tablets, etc.*</p>
</li>
<li>
<p>Simple container format</p>
</li>
<li>
<p>Highest quality real-time video delivery</p>
</li>
<li>
<p>Click and encode. Minimal codec profiles, sub-options; when<br /> possible, let the encoder make the tough choices.</p>
</li>
</ul>
</li>
</ul>
<p>* Note: The initial developer preview releases of browsers supporting WebM are not yet fully optimized and therefore have a higher computational footprint for screen rendering than we expect for the general releases. The computational efficiencies of WebM are more accurately measured today using the <a title="VP8 SDK" href="http://www.webmproject.org/tools/vp8-sdk/">development tools in the VP8 SDKs</a>. Optimizations of the browser implementations are forthcoming.</p>
<p>Congrats Open Web.</p>
<p><em>Update:</em> <a href="http://blog.streamingmedia.com/the_business_of_online_vi/2010/05/adobe-announces-flash-player-support-for-googles-vp8-video-codec.html">Flash will ship VP8</a>, as will <a href="http://blogs.msdn.com/ie/archive/2010/05/19/another-follow-up-on-html5-video-in-ie9.aspx">IE9</a>. Now everyone looks at the Safari team :)</p>
<p>(One thing though about IE9 support: "In its HTML5 support, IE9 will support playback of H.264 video as well as VP8 video when the user has installed a VP8 codec on Windows."). That is a bummer.</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/webm-the-on2-codec-is-here-with-support-from-google-mozilla-and-opera/feed</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>Native Client now comes with an actual SDK</title>
		<link>http://ajaxian.com/archives/native-client-now-comes-with-an-actual-sdk</link>
		<comments>http://ajaxian.com/archives/native-client-now-comes-with-an-actual-sdk#comments</comments>
		<pubDate>Wed, 12 May 2010 18:12:30 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Google]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=9268</guid>
		<description><![CDATA[A year after the initial Native Client release we have a more polished Native Client SDK for developers. The Native Client SDK preview, in contrast, includes just the basics you need to get started writing an app in minutes: a GCC-based compiler for creating x86-32 or x86-64 binaries from C or C++ source code, ports <a href="http://ajaxian.com/archives/native-client-now-comes-with-an-actual-sdk">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/nP8Mo0jGQDk&#038;rel=0&#038;color1=0xb1b1b1&#038;color2=0xd0d0d0&#038;hl=en_US&#038;feature=player_embedded&#038;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/nP8Mo0jGQDk&#038;rel=0&#038;color1=0xb1b1b1&#038;color2=0xd0d0d0&#038;hl=en_US&#038;feature=player_embedded&#038;fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="385"></embed></object></p>
<p>A year after the <a href="http://ajaxian.com/archives/native-client-open-activex">initial Native Client release</a> we have a <a href="http://blog.chromium.org/2010/05/sneak-peek-at-native-client-sdk.html">more polished Native Client SDK</a> for developers.</p>
<blockquote><p>
The Native Client SDK preview, in contrast, includes just the basics you need to get started writing an app in minutes: a GCC-based compiler for creating x86-32 or x86-64 binaries from C or C++ source code, ports of popular open source projects like zlib, Lua, and libjpeg, and a few samples that will help you get you started developing with the <a href="https://wiki.mozilla.org/NPAPI:Pepper">NPAPI Pepper Extensions</a>. Taken together, the SDK lets you write C/C++ code that works seamlessly in Chromium and gives you access to powerful APIs to build your web app.
</p></blockquote>
<p>Salt and Pepper indeed. A friend at a browser vendor was looking into Pepper and thought that the specs were definitely..... thorough shall we say? Take <a href="https://wiki.mozilla.org/Plugins:PepperAudioAPI">Pepper Audio</a> by itself. A bit of a beast! :)</p>
<p>It is interesting to watch Google give C/C++ developers (and legacy code) a different path to the Web (beyond NPAPI and... ActiveX!). You can imagine this being increasingly important when you think about Chrome OS.</p>
<p>Ideally, the Web platform itself evolves fast enough that this project is always an onramp for legacy code.... what do you think?</p>
<p><a href="http://twitter.com/hbridge">@hbridge</a> has an interesting view:</p>
<blockquote><p>
Pepper is very much a work in progress and we expect it to change -- that's why this is a preview! Feedback welcome :)</p>
<p>ActiveX was designed to provide unrestricted access to native APIs so it wound up being a security nightmare.</p>
<p>NaCl is designed to give access to native code performance, but only to APIs similar to what JS offers, so security model is same.
</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/native-client-now-comes-with-an-actual-sdk/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Great win for WebGL and standards; O3D becomes JS library</title>
		<link>http://ajaxian.com/archives/great-win-for-webgl-and-standards-o3d-becomes-js-library</link>
		<comments>http://ajaxian.com/archives/great-win-for-webgl-and-standards-o3d-becomes-js-library#comments</comments>
		<pubDate>Fri, 07 May 2010 17:56:40 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Toolkit]]></category>
		<category><![CDATA[Utility]]></category>
		<category><![CDATA[WebGL]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=9242</guid>
		<description><![CDATA[This is fantastic news. A lot of people were claiming that O3D was going to beat WebGL because of performance. Then the O3D team showed that the two could be complimentary, and they have taken the next step on that journey. As of today, O3D will stop being a plugin, and will become a JS <a href="http://ajaxian.com/archives/great-win-for-webgl-and-standards-o3d-becomes-js-library">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/uofWfXOzX-g&#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/uofWfXOzX-g&#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>This is fantastic news. A lot of people were claiming that O3D was going to beat WebGL because of performance. Then the O3D team showed that the two could be complimentary, and they have taken the next step on that journey. As of today, <a href="http://blog.chromium.org/2010/05/future-of-o3d.html">O3D will stop being a plugin</a>, and will become a JS library on top of WebGL. This is fantastic, as we need a nice API on top of the OpenGL-y WebGL library.</p>
<p>Here are their thoughts. Congrats to the O3D team, to the WebGL folk, and to the future:</p>
<blockquote><p>
We launched the O3D API about a year ago to start a discussion within the web community about establishing a new standard for 3D graphics on the web. Since then, we’ve also helped develop WebGL, a 3D graphics API based on OpenGL ES 2.0 that has gradually emerged as a standard, and is supported by other browser and hardware vendors like Mozilla, Apple and Opera. </p>
<p>At Google, we’re deeply committed to implementing and advancing standards, so as of today, the O3D project is changing direction, evolving from its current plug-in implementation into a JavaScript library that runs on top of WebGL. Users and developers will still be able to download the O3D plug-in and source code for at least one year, but other than a maintenance release, we plan to stop developing O3D as a plug-in and focus on improving WebGL and O3D as a JavaScript library.</p>
<p>We did not take this decision lightly. In initial discussions we had about WebGL, we were concerned that JavaScript would be too slow to drive a low-level API like OpenGL and we were convinced that a higher level approach like the O3D scene graph would yield better results. We were also cognizant of the lack of installed OpenGL drivers on many Windows machines, and that this could hamper WebGL’s adoption. </p>
<p>Since then, JavaScript has become a lot faster. We've been very impressed by the demos that developers have created with WebGL, and with the ANGLE project, we believe that Chromium will be able to run WebGL content on Windows computers without having to rely on installed OpenGL drivers.</p>
<p>The JavaScript implementation of O3D is still in its infancy, but you <a href="http://code.google.com/p/o3d/">can find a copy of it on the O3D project site</a> and see it running some of the O3D samples from a WebGL enabled browser (alas, no Beach Demo yet). Because browsers lack some requisite functionality like compressed asset loading, not all the features of O3D can be implemented purely in JavaScript. We plan to work to give the browser this functionality, and all capabilities necessary for delivering high-quality 3D content.
</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/great-win-for-webgl-and-standards-o3d-becomes-js-library/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>Telling robots about your crawl-able Ajax apps</title>
		<link>http://ajaxian.com/archives/proposal-for-customizing-google-crawlable-ajax-urls</link>
		<comments>http://ajaxian.com/archives/proposal-for-customizing-google-crawlable-ajax-urls#comments</comments>
		<pubDate>Wed, 28 Apr 2010 05:37:31 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Google]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=9163</guid>
		<description><![CDATA[Weston Ruter wants to talk to the search robots out there and tell them about the URL format for crawling Ajax apps. Google came out with a spec for doing this with hash bang URLs such as: http://shepherdinteractive.com/#!portfolio/interactive/. What if we could tell Google and others something like: PLAIN TEXT HTML: &#160; &#60;meta name="crawlable-fragment-prefix" content="/"&#62; <a href="http://ajaxian.com/archives/proposal-for-customizing-google-crawlable-ajax-urls">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>Weston Ruter wants to talk to the search robots out there and <a href="http://weston.ruter.net/2010/03/17/proposal-for-customizing-google-crawlable-ajax-urls/">tell them about the URL format for crawling Ajax apps</a>.</p>
<p>Google came out with <a href="http://code.google.com/web/ajaxcrawling/">a spec for doing this</a> with hash bang URLs such as: <code>http://shepherdinteractive.com/#!portfolio/interactive/</code>.</p>
<p>What if we could tell Google and others something like:</p>
<div class="igBar"><a href="javascript:showCodeTxt('html-16');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">HTML:</span>
<div id="html-16">
<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;"><span style="color: #009900;"><a href="http://december.com/html/4/element/meta.html"><span style="color: #000000; font-weight: bold;">&lt;meta</span></a> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">"crawlable-fragment-prefix"</span> <span style="color: #000066;">content</span>=<span style="color: #ff0000;">"/"</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;</div>
</li>
</ol>
</div>
</div>
</div>
<p>and Google would grok <code>http://shepherdinteractive.com/#/portfolio/interactive/</code> and convert it to <code>http://shepherdinteractive.com/?_escaped_fragment_=portfolio/interactive/</code>.</p>
<p>Want flexibility? Or want simplicity and think we should all just hash bang away?</meta></p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/proposal-for-customizing-google-crawlable-ajax-urls/feed</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>Chrome Embeds Flash!</title>
		<link>http://ajaxian.com/archives/chrome-embeds-flash</link>
		<comments>http://ajaxian.com/archives/chrome-embeds-flash#comments</comments>
		<pubDate>Wed, 31 Mar 2010 14:00:45 +0000</pubDate>
		<dc:creator>Ben Galbraith</dc:creator>
				<category><![CDATA[Adobe]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[Mozilla]]></category>
		<category><![CDATA[Section]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=8823</guid>
		<description><![CDATA[For some time now, Adobe has been working with platform vendors to include the Flash plug-in pre-loaded. We've seen this ages ago in Windows, and more recently with Adobe's efforts in the Open Screen Project. Now, there's news of something a little bit different. In our second Google-y post of the week, there's the news <a href="http://ajaxian.com/archives/chrome-embeds-flash">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p><img src="http://ajaxian.com/wp-content/images/flashchrome.png" alt="flashchrome" title="flashchrome" width="247" height="121" class="alignnone size-full wp-image-8825" /></p>
<p>For some time now, Adobe has been working with platform vendors to include the Flash plug-in pre-loaded. We've seen this ages ago in Windows, and more recently with Adobe's efforts in the <a href="http://www.openscreenproject.org/">Open Screen Project</a>.</p>
<p>Now, there's news of something a little bit different. In our second Google-y post of the week, there's the news that <a href="http://blogs.adobe.com/flashplayer/2010/03/improved_flash_player_support.html">Chrome now embeds Flash directly in the browser</a>, starting today with the <a href="http://googlechromereleases.blogspot.com/2010/03/dev-channel-update_30.html">developer channel builds of Chrome</a>.</p>
<p>While this doesn't change the game for developers--it won't materially impact Flash market share--it certainly provides a much more pleasant integration for users who will no longer need to think about updating Flash as a separate process to updating their browsers. (And since Chrome auto-updates, it's blissful upgrading indeed.)</p>
<h3>Plug-ins with a Dash of Pepper</h3>
<p>What *may* impact developers more is news of Adobe working with Google and Mozilla to create a new, deeper browser plug-in API. While no timelines are given, some technical details are provided via a <a href="https://wiki.mozilla.org/Plugins:PlatformIndependentNPAPI">Mozilla Wiki page</a>.</p>
<p>Code-named "Pepper", the API provides all kinds of goodies denied to plug-ins before, such as using native GUI controls inside of a plug-in (i.e., scrollbars) instead of being forced to render its own and access to printing and the clipboard. Pepper also provides granular media APIs instead of forcing plug-ins to deal with graphics and audio on its own.</p>
<p>It will be interesting to see how successfully such an API can be implemented consistently cross-platform, but at first glance it seems to embrace about the right set of trade-offs.</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/chrome-embeds-flash/feed</wfw:commentRss>
		<slash:comments>17</slash:comments>
		</item>
		<item>
		<title>A Google-y Post: ANGLE, Native Client and Skipfish</title>
		<link>http://ajaxian.com/archives/a-googly-post-angle-nativeclient-and-skipfish</link>
		<comments>http://ajaxian.com/archives/a-googly-post-angle-nativeclient-and-skipfish#comments</comments>
		<pubDate>Tue, 23 Mar 2010 11:54:43 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Google]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=8758</guid>
		<description><![CDATA[It was a busy day for Google news for web developers, in very different areas. ANGLE This is exciting. On the Chromium blog Henry Bridge announced a new open source project called ANGLE which is implementing OpenGL ES 2.0 on top of Microsoft Direct3D APIs for Windows folk. This is a big deal as you <a href="http://ajaxian.com/archives/a-googly-post-angle-nativeclient-and-skipfish">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>It was a busy day for Google news for web developers, in very different areas.</p>
<p><b>ANGLE</b></p>
<p>This is exciting. On the Chromium blog Henry Bridge announced a new open source project called <a href="http://blog.chromium.org/2010/03/introducing-angle-project.html">ANGLE</a> which is implementing OpenGL ES 2.0 on top of Microsoft Direct3D APIs for Windows folk. This is a big deal as you can't assume good OpenGL drivers on Windows... but with ANGLE live could be better.</p>
<p>Why is this related to Chromium? WebGL:</p>
<blockquote><p>
We're open-sourcing ANGLE under the BSD license as an early work-in-progress, but when complete, it will enable browsers like Google Chrome to run WebGL content on Windows computers without having to rely on OpenGL drivers.</p>
<p>Current browser implementations of WebGL need to be able to issue graphics commands to desktop OpenGL to render content. This requirement isn't a problem on computers running OS X or Linux, where OpenGL is the primary 3D API and therefore enjoys solid support. On Windows, however, most graphics-intensive apps use Microsoft Direct3D APIs instead of OpenGL, so OpenGL drivers are not always available. Unfortunately, this situation means that even if they have powerful graphics hardware, many Windows machines can't render WebGL content because they don't have the necessary OpenGL drivers installed. ANGLE will allow Windows users to run WebGL content without having to find and install new drivers for their system.</p>
<p>Because ANGLE aims to implement most of the OpenGL ES 2.0 API, the project may also be useful for developers who are working on applications for mobile and embedded devices. ANGLE should make it simpler to prototype these applications on Windows, and also gives developers new options for deploying production versions of their code to the desktop.
</p></blockquote>
<p>Check out <a href="http://code.google.com/p/angleproject/">the source</a>.</p>
<p><b>Native Client is ARM'd</b></p>
<p>NaCl allows you to gcc some code and have it run in a browser. Wooah :) The big news from that camp is <a href="http://blog.chromium.org/2010/03/native-client-and-web-portability.html">new support for ARM</a> which means NaCl for mobile..... and Chrome OS:</p>
<blockquote><p>
When we first released Native Client a year ago, we supported all popular operating systems (Windows, Mac OS X, and Linux) but only on machines with x86 processors. Today, we’re happy to say that you can build and run Native Client binaries for all of the most popular processor architectures: x86-32, x86-64, and ARM. Even better, our initial benchmarks indicate that Native Client executables perform at 97% of the speed of an unmodified executable on both ARM and x86-64 processors. These results indicate that a browser running on virtually any modern computer or cell phone could run a fast, performance-sensitive Native Client application.</p>
<p>However, we recognize that just running on today’s most popular architectures isn’t enough; if a new processor architecture emerges, it should be able to run all Native Client modules already released without requiring developers to recompile their code. That’s why we’re also developing technology that will enable developers to distribute a portable representation of Native Client programs using LLVM bitcode. Using this technology, a browser running on any type of processor could translate the portable representation into a native binary without access to the source code of the program.
</p></blockquote>
<p><b>Skipfish</b></p>
<p>For the security concerned .... how about running <a href="http://code.google.com/p/skipfish/">Skipfish</a> "a fully automated, active web application security reconnaissance tool.":</p>
<ul>
<li><b>High speed</b>: pure C code, highly optimized HTTP handling, minimal CPU footprint - easily achieving 2000 requests per second with responsive targets.
</li>
<li><b>Ease of use</b>: heuristics to support a variety of quirky web frameworks and mixed-technology sites, with automatic learning capabilities, on-the-fly wordlist creation, and form autocompletion.
</li>
<li><b>Cutting-edge security logic</b>: high quality, low false positive, differential security checks, capable of spotting a range of subtle flaws, including blind injection vectors.
</li>
</ul>
<p>Some cool news all around.... all Web... and all open source.</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/a-googly-post-angle-nativeclient-and-skipfish/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Addmap.js &#8211; automatically analyse a text for geo locations and add a map</title>
		<link>http://ajaxian.com/archives/addmap-js-automatically-analyse-a-text-for-geo-locations-and-add-a-map</link>
		<comments>http://ajaxian.com/archives/addmap-js-automatically-analyse-a-text-for-geo-locations-and-add-a-map#comments</comments>
		<pubDate>Fri, 29 Jan 2010 15:17:47 +0000</pubDate>
		<dc:creator>Chris Heilmann</dc:creator>
				<category><![CDATA[Examples]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Geo]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Mapping]]></category>
		<category><![CDATA[Yahoo!]]></category>
		<category><![CDATA[analisys]]></category>
		<category><![CDATA[api]]></category>
		<category><![CDATA[maps]]></category>
		<category><![CDATA[placemaker]]></category>
		<category><![CDATA[yql]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=8503</guid>
		<description><![CDATA[As part of an upcoming article on geo location I am putting together a few Geo Toys for myself and here is the first one. Addmap.js is a JavaScript that analyses an elements text content, finds geographical locations and links them to Google Maps. It also adds a map preview and a list of the <a href="http://ajaxian.com/archives/addmap-js-automatically-analyse-a-text-for-geo-locations-and-add-a-map">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>As part of an upcoming article on geo location I am putting together a few <a href="http://github.com/codepo8/geotoys">Geo Toys</a> for myself and here is the first one. Addmap.js is a JavaScript that analyses an elements text content, finds geographical locations and links them to Google Maps. It also adds a map preview and a list of the found locations to the element.</p>
<p>See addmap.js in action below - all the content in the green box is generated from the paragraph of text above it. You can try it out for yourself by clicking the screenshot.</p>
<p><a href="http://isithackday.com/hacks/geo/addmap.html"><img src="http://ajaxian.com/wp-content/images/textandmap.png" alt="Demonstration screenshot of addmap.js" title="Demo of addmap.js" width="557" height="282" class="size-full wp-image-8502" /></a></p>
<p>Using addmap.js is easy - sign up for a <a href="http://code.google.com/apis/maps/signup.html">Google Maps Key</a> and provide it as a configuration parameter. Then call the analyse function with the ID of the element to analyse as the parameter:</p>
<div class="igBar"><a href="javascript:showCodeTxt('xml-18');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">XML:</span>
<div id="xml-18">
<div class="xml">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;script</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">"http://github.com/codepo8/geotoys/raw/master/addmap.js"</span><span style="font-weight: bold; color: black;">&gt;</span></span><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/script<span style="font-weight: bold; color: black;">&gt;</span></span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;script<span style="font-weight: bold; color: black;">&gt;</span></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;">addmap.config.mapkey = 'YOUR_API_KEY';</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">addmap.analyse('content');</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/script<span style="font-weight: bold; color: black;">&gt;</span></span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p>The script uses <a href="http://developer.yahoo.com/yql">YQL</a> and <a href="http://developer.yahoo.com/geo/placemaker">Yahoo PlaceMaker</a> under the hood, for more info and updates on this, <a href="http://www.wait-till-i.com/2010/01/29/adding-map-links-and-a-small-map-to-any-text-using-javascript-addmap-js/">check the blog</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/addmap-js-automatically-analyse-a-text-for-geo-locations-and-add-a-map/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Closure Lite</title>
		<link>http://ajaxian.com/archives/closure-lite</link>
		<comments>http://ajaxian.com/archives/closure-lite#comments</comments>
		<pubDate>Thu, 24 Dec 2009 11:39:52 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Closure]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Google]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=8346</guid>
		<description><![CDATA[Michael Bolin formerly of Google has created Closure Lite as a way to let developers get their feet wet in the Closure library without having to go into the compiler and the like (but they should do that eventually!). Closure Lite itself consists of the following subset of APIs: goog.array goog.Disposable goog.dispose goog.dom goog.dom.DomHelper goog.events.NodeType <a href="http://ajaxian.com/archives/closure-lite">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>Michael Bolin <a href="http://blog.bolinfest.com/2009/10/4-years-2-months-and-1-day.html">formerly of Google</a> has <a href="http://blog.bolinfest.com/2009/12/closure-lite-just-in-time-for-christmas.html">created Closure Lite</a> as a way to let developers get their feet wet in the Closure library without having to go into the compiler and the like (but they should do that eventually!).</p>
<p><a href="http://www.programmingclosure.com/closure-lite/">Closure Lite</a> itself consists of the following subset of APIs:</p>
<ul>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/closure_goog_array_array.js.html">goog.array</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/class_goog_Disposable.html">goog.Disposable</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/closure_goog_disposable_disposable.js.html">goog.dispose</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/closure_goog_dom_dom.js.html">goog.dom</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/class_goog_dom_DomHelper.html">goog.dom.DomHelper</a></li>
<li>goog.events.NodeType</li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/closure_goog_dom_tagname.js.html">goog.dom.TagName</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/closure_goog_dom_classes.js.html">goog.dom.classes</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/closure_goog_dom_xml.js.html">goog.dom.xml</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/closure_goog_events_events.js.html">goog.events</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/class_goog_events_BrowserEvent.html">goog.events.BrowserEvent</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/class_goog_events_Event.html">goog.events.Event</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/class_goog_events_EventHandler.html">goog.events.EventHandler</a></li>
<li>goog.events.EventType</li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/class_goog_events_EventTarget.html">goog.events.EventTarget</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/class_goog_events_KeyEvent.html">goog.events.KeyEvent</a></li>
<li>goog.events.KeyCodes</li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/class_goog_events_KeyHandler.html">goog.events.KeyHandler</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/class_goog_events_Listener.html">goog.events.Listener</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/closure_goog_functions_functions.js.html">goog.functions</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/closure_goog_json_json.js.html">goog.json</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/class_goog_math_Box.html">goog.math.Box</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/class_goog_math_Coordinate.html">goog.math.Coordinate</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/class_goog_math_Rect.html">goog.math.Rect</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/class_goog_math_Size.html">goog.math.Size</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/closure_goog_net_errorcode.js.html">goog.net.ErrorCode</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/closure_goog_net_eventtype.js.html">goog.net.EventType</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/class_goog_net_XhrIo.html">goog.net.XhrIo</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/class_goog_net_XhrMonitor_.html">goog.net.XhrMonitor</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/closure_goog_net_xmlhttp.js.html">goog.net.XmlHttp</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/closure_goog_object_object.js.html">goog.object</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/closure_goog_string_string.js.html">goog.string</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/closure_goog_structs_structs.js.html">goog.structs</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/class_goog_structs_Map.html">goog.structs.Map</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/class_goog_structs_Set.html">goog.structs.Set</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/closure_goog_style_style.js.html">goog.style</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/class_goog_Timer.html">goog.Timer</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/closure_goog_useragent_useragent.js.html">goog.userAgent</a></li>
<li><a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/closure_goog_useragent_product.js.html">goog.userAgent.product</a></li>
<li>goog.window</li>
</ul>
<p>It is build via the closure compiler itself, building from a set of <code>goog.require()</code> calls :)</p>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/closure-lite/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>
		<item>
		<title>A busy Chrome week: Extensions, Web Sockets, and more</title>
		<link>http://ajaxian.com/archives/a-busy-chrome-week-extensions-web-sockets-and-more</link>
		<comments>http://ajaxian.com/archives/a-busy-chrome-week-extensions-web-sockets-and-more#comments</comments>
		<pubDate>Thu, 10 Dec 2009 11:07:01 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
				<category><![CDATA[Chrome]]></category>
		<category><![CDATA[Front Page]]></category>
		<category><![CDATA[Google]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=8188</guid>
		<description><![CDATA[It has been a busy work for Chrome, with some interesting features hitting the various "channels". Web Sockets First up, we have Web Socket support being turned on by default on the developer channel. If you want to be a really cool JS h4x0r you should write a server app using node.js. If you want <a href="http://ajaxian.com/archives/a-busy-chrome-week-extensions-web-sockets-and-more">Read the rest...</a>]]></description>
			<content:encoded><![CDATA[<p>It has been a busy work for Chrome, with some interesting features hitting the various "channels".</p>
<p><a href="http://dev.w3.org/html5/websockets/">Web Sockets</a></p>
<p>First up, we have <a href="http://blog.chromium.org/2009/12/web-sockets-now-available-in-google.html">Web Socket</a> support being turned on by default on the developer channel. If you want to be a really cool JS h4x0r you should write a <a href="http://devthought.com/blog/2009/12/nodejs-and-the-websocket-protocol/">server app using node.js</a>. If you want it to work on older browsers, try out the old favourite shim tale of <a href="http://github.com/gimite/web-socket-js">use Flash to degrade</a>, and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=472529">Mozilla support should be coming soon</a> and surely IE9 will support it too ;)</p>
<p>Now you can code like this:</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: #000066; font-weight: bold;">if</span> <span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"WebSocket"</span> <span style="color: #000066; font-weight: bold;">in</span> window<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #003366; font-weight: bold;">var</span> ws = <span style="color: #003366; font-weight: bold;">new</span> WebSocket<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"ws://example.com/service"</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; ws.<span style="color: #006600;">onopen</span> = <span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// Web Socket is connected. You can send data by send() method.</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; ws.<span style="color: #006600;">send</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"message to send"</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; <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; ws.<span style="color: #006600;">onmessage</span> = <span style="color: #003366; font-weight: bold;">function</span> <span style="color:#006600; font-weight:bold;">&#40;</span>evt<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color: #003366; font-weight: bold;">var</span> received_msg = evt.<span style="color: #006600;">data</span>; ... <span style="color:#006600; font-weight:bold;">&#125;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; ws.<span style="color: #006600;">onclose</span> = <span style="color: #003366; font-weight: bold;">function</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span> <span style="color: #009900; font-style: italic;">// websocket is closed. };</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: #000066; font-weight: bold;">else</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900; font-style: italic;">// the browser doesn't support WebSocket.</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p><a href="http://blog.chromium.org/2009/12/extensions-beta-launched-with-over-300.html">Chrome Extensions Beta</a></p>
<p>Although I curse at the weak support on Chrome Mac (coming by end of week though!), other Chromers can use the new beta extension system pioneered by the awesome Aaron Boodman and team:</p>
<blockquote><p>
Today, we're really happy to release a beta of extensions that begins to deliver on our initial vision. Extensions are as easy to create as webpages. Users can install and uninstall them quickly without restart, and extensions have a great polished look that fits in with Google Chrome's minimalist aesthetic. When developers upload an extension it is available to users immediately, with limited restrictions and manual reviews only in a few situations.</p>
<p>On the technical side, we've been able to use Google Chrome's multiprocess architecture to help keep extensions stable and safe. And Chromium's extensive performance monitoring infrastructure has helped us ensure extensions affect Google Chrome's speed as little as possible. You can learn more details about the internals of our system in the videos below.
</p></blockquote>
<p><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/rNkfs8-uRTE&#038;color1=0xb1b1b1&#038;color2=0xcfcfcf&#038;hl=en_US&#038;feature=player_embedded&#038;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/rNkfs8-uRTE&#038;color1=0xb1b1b1&#038;color2=0xcfcfcf&#038;hl=en_US&#038;feature=player_embedded&#038;fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="425" height="344"></embed></object></p>
<p>I am excited about the new extension systems of Chrome and Jetpack, and wrote up thoughts on <a href="http://almaer.com/blog/out-of-the-page-and-into-the-runtime-extensions-move-the-web-development-model-further">how we are jumping out of the page and into the runtime</a> as Web developers.</p>
<p><a href="http://blog.chromium.org/2009/12/links-that-open-in-new-processes.html">rel="noreferrer" and target="_blank"</a></p>
<p>I missed the fact that in Chrome you can opt-in to a new process from a link. This is important as every tab is NOT necessarily in its own process. People assume that is the case (a one to one mapping) but it isn't (and has interesting security implications):</p>
<blockquote><p>
In many cases, though, Google Chrome needs to keep pages from related tabs in the same process, since they may access each other's contents using JavaScript code. For example, clicking links that open in a new window will generally cause the new and old pages to share a process.</p>
<p>In practice, web developers may find situations where they would like links to other pages to open in a separate process. As one example, links from messages in your webmail client would be nice to isolate from the webmail client itself. This is easy to achieve now, thanks to <a href="http://webkit.org/blog/907/webkit-nightlies-support-html5-noreferrer-link-relation/">new support in WebKit for HTML5's "noreferrer" link relation</a>.</p>
<p>To cause a link to open in a separate process from your web page, just add rel="noreferrer" and target="_blank" as attributes to the <a> tag, and then point it at a URL on a different domain name. For example:<br />
</a></p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/a-busy-chrome-week-extensions-web-sockets-and-more/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

