<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="http://feeds.feedburner.com/~d/styles/rss2full.xsl" type="text/xsl" media="screen"?><?xml-stylesheet href="http://feeds.feedburner.com/~d/styles/itemcontent.css" type="text/css" media="screen"?><rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>Ajaxian » Front Page</title>
	
	<link>http://ajaxian.com</link>
	<description>Cleaning up the web with Ajax</description>
	<pubDate>Fri, 09 Jan 2009 19:40:49 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.6</generator>
	<language>en</language>
			<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" href="http://ajaxian.com/index.xml" type="application/rss+xml" /><feedburner:browserFriendly>This is an XML content feed. It is intended to be viewed in a newsreader or syndicated to another site, subject to copyright and fair use.</feedburner:browserFriendly><item>
		<title>Beautiful Code Documentation</title>
		<link>http://feeds.feedburner.com/~r/ajaxian/~3/507195610/beautiful-code-documentation</link>
		<comments>http://ajaxian.com/archives/beautiful-code-documentation#comments</comments>
		<pubDate>Fri, 09 Jan 2009 14:11:18 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
		
		<category><![CDATA[Front Page]]></category>

		<category><![CDATA[Library]]></category>

		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=5608</guid>
		<description><![CDATA[Atul Varma (who I have the absolute pleasure to work with now) has created code documentation that actually looks beautiful. Typography matters.

You can check it out via his Ubiquity documentation example that shows you side by side documentation with the actual source code itself. This context is terrific. He does this all dynamically, and uses [...]]]></description>
			<content:encoded><![CDATA[<p>Atul Varma (who I have the absolute pleasure to work with now) has <a href="http://www.toolness.com/wp/?p=441">created code documentation that actually looks beautiful</a>. Typography matters.</p>
<p><img src="http://www.toolness.com/images/20090107161400.jpg" /></p>
<p>You can check it out via his <a href="http://hg.toolness.com/ubiquity-firefox/raw-file/347c22717e86/ubiquity/index.html">Ubiquity documentation example</a> that shows you side by side documentation with the actual source code itself. This context is terrific. He does this all dynamically, and uses border padding to align the documentation with the code itself.</p>
<p>Here is what he has to say about how it is done:</p>
<blockquote>
<p>The <a href="http://hg.toolness.com/ubiquity-firefox/raw-file/347c22717e86/ubiquity/modules/utils.js">raw source code</a> for the file being documented above just has chunks of comments that are marked-up in <a href="http://www.wikicreole.org/">WikiCreole</a>; when the parser runs into such a chunk, it renders it alongside the code it annotates using Ivan Fomichev and Chris Purcell’s <a href="http://www.ivan.fomichev.name/2008/04/javascript-creole-10-wiki-markup-parser.html">JavaScript Creole 1.0 Parser</a>.</p>
<p>The idea of using the documentation to annotate the code—or the code to annotate the documentation, depending on how you look at it—was inspired in part by some of the typography presented in Ellen Lupton’s excellent <a href="http://www.amazon.com/Thinking-Type-Critical-Designers-Students/dp/1568984480/ref=pd_bbs_sr_2?ie=UTF8&amp;s=books&amp;qid=1231374584&amp;sr=8-2">Thinking with Type</a>, which I recommend to anyone interested in the field.</p>
<p>It’s nice not having a separate documentation build step: aside from making the process of writing and editing documentation quicker, it also lowers the barrier for entry to contributors since they don’t need to setup a toolchain.  It also means that we get versioned documentation in every commit for free.</p>
<p>Right now there isn’t much else to the system; the only other feature I added is the auto-generation of quasimodal popup menus that link the names of XPCOM interfaces to their entries on XUL Planet and MDC.  It’d be nice to have more features like this; other niceties would be an automatically-generated table of contents, <a href="http://blog.ianbicking.org/javascript-doctest.html">JavaScript Doctests</a>, search functionality, cross references to other code, and even the ability to fix code formatting errors in-page.  For now, though, I need to focus on actually using this tool to document more code.</p>
</blockquote>
<p>As soon as Ben and I saw this our minds started to race. What if you could navigate the code via hyperlinks too? Or have groups comment inline? Many exciting ideas.</p>
<p>It is fun to see the 80 character column limit in place (and seeing where that is ignored). 80 character limits with wide screen displays? I never get that :)</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/ajaxian?a=C26KRM.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=C26KRM.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=KGww0S.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=KGww0S.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=TW1fXg.p"><img src="http://feeds.feedburner.com/~f/ajaxian?i=TW1fXg.p" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/beautiful-code-documentation/feed</wfw:commentRss>
		<feedburner:origLink>http://ajaxian.com/archives/beautiful-code-documentation</feedburner:origLink></item>
		<item>
		<title>State of the Web 2008</title>
		<link>http://feeds.feedburner.com/~r/ajaxian/~3/507184055/state-of-the-web-2008</link>
		<comments>http://ajaxian.com/archives/state-of-the-web-2008#comments</comments>
		<pubDate>Fri, 09 Jan 2009 14:10:01 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
		
		<category><![CDATA[Front Page]]></category>

		<category><![CDATA[Survey]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=5604</guid>
		<description><![CDATA[John Allsopp has put together the data from his extensive State of the Web 2008 survey. In it you will find details on who was surveyed to set context, the browser / os usage claimed, and answers on the use of technology such as: 

Markup usage
CSS and other presentation technology
JavaScript, Ajax, and the DOM
Flash, Silverlight [...]]]></description>
			<content:encoded><![CDATA[<p>John Allsopp has put together the data from his <a href="http://www.webdirections.org/the-state-of-the-web-2008/">extensive State of the Web 2008</a> survey. In it you will find details on <a href="http://www.webdirections.org/the-state-of-the-web-2008/state-of-the-web-who-was-surveyed/">who was surveyed</a> to set context, the <a href="http://www.webdirections.org/the-state-of-the-web-2008/browsers-and-operating-systems/">browser / os usage</a> claimed, <a href="http://www.webdirections.org/the-state-of-the-web-2008/current-practice-and-technologies/">and answers on the use of technology</a> such as: </p>
<ul>
<li><a href="http://www.webdirections.org/the-state-of-the-web-2008/markup/">Markup usage</a></li>
<li><a href="http://www.webdirections.org/the-state-of-the-web-2008/css-and-other-presentation-technologies/">CSS and other presentation technology</a></li>
<li><a href="http://www.webdirections.org/the-state-of-the-web-2008/javascript-ajax-and-the-dom/">JavaScript, Ajax, and the DOM</a></li>
<li><a href="http://www.webdirections.org/the-state-of-the-web-2008/flash-silverlight-and-other-embedded-content/">Flash, Silverlight and embedded content</a></li>
<li><a href="http://www.webdirections.org/the-state-of-the-web-2008/back-end-development-languages-and-systems">Backend systems</a></li>
</ul>
<p>John and Scroll Magazine have a nice conclusion:</p>
<blockquote><p>
In this first of its kind study, over 1200 web professionals from across the globe, in a broad range of industry sectors and organization types, were surveyed on the browsers, operating systems, development technologies and practices they use when building web sites and applications.</p>
<p>Some surprising results from the survey include</p>
<ul>
<li>Nearly half the respondents use Mac OS X Leopard, and over half use a non Windows Operating system. Windows XP still outweighs Windows Vista among these users by a factor of 4 to 1 as their operating system of choice.</li>
<li>Just a small majority, less than 5%, use any version of Internet Explorer as their primary browser, while Firefox dominates as the browser for choice, with over 60% market share. Safari 3 follows with 21%, and the much talked about Chrome on just 4%.</li>
<li>Only a tiny handful use Internet Explorer 8 beta as their browser of choice.</li>
<li>Despite the hype of the iPhone, less than 20% of respondents use the mobile web, and a similar number develop sites optimized for mobiles.</li>
</ul>
<p><b>Web Development technologies</b></p>
<p>When it comes to web technology use, standards based and open source technologies dominate.</p>
<ul>
<li>Only 3% of respondents say they never validate their sites while 70% say that they frequently or always do.</li>
<li>Only 10% of respondents say they use tables for layout, while well over 90% use CSS for styling their pages.</li>
<li>35% of respondents say they use microformats in their markup.</li>
<li>95% of respondents use JavaScript, and of these, almost all use libraries.</li>
<li>JQuery is the dominant library used by some way, with 60% of respondents saying they use it.</li>
</ul>
<p>With plug-in technologies, Flash continues to dominate, with a market share of around 60%. Silverlight still has a lot of work to do to catch the long time industry leader, with a bare 2%, little more than the Real format. Apple&#8217;s Quicktime has a surprising 20% of the market.<br />
Java applets have all but disappeared from the toolset of these early adopter developers.</p>
<p>On the back end, open source accounts for the majority of technologies used. Among server operating systems Linux at nearly 60% is used more than twice as often as Windows at 28%, with Unix also well represented at 17%. Even Mac OS X, which is usually far down survey lists for server OSs, is used by 5.5% of respondents.<br />
Apache at 70% is the dominant web server, with IIS at 23%.</p>
<p>Over 90% sites are database driven, with the open source MySQL at 70% and PostrgeSQL at 10% together accounting for the significant majority of sites by respondents. Microsoft&#8217;s SQL Server at 22% and Oracle at 9% were the other widely used database systems.</p>
<p>When it comes to server side programming languages, PHP is the most commonly used, at 63%, with JavaScript at 55%, ASP.NET at 17% and Python at 15%. Despite its flavor of the month status, Ruby comes in at 14%, with Java at 12%, indicating that the language which came to prominence with the rise of the web is well and truly being challenged from all sides when it comes to web back end development.
</p></blockquote>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/ajaxian?a=e9avg9.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=e9avg9.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=btOG7P.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=btOG7P.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=haJF4C.p"><img src="http://feeds.feedburner.com/~f/ajaxian?i=haJF4C.p" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/state-of-the-web-2008/feed</wfw:commentRss>
		<feedburner:origLink>http://ajaxian.com/archives/state-of-the-web-2008</feedburner:origLink></item>
		<item>
		<title>defaultValueActsAsHint</title>
		<link>http://feeds.feedburner.com/~r/ajaxian/~3/507031651/defaultvalueactsashint</link>
		<comments>http://ajaxian.com/archives/defaultvalueactsashint#comments</comments>
		<pubDate>Fri, 09 Jan 2009 10:03:22 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
		
		<category><![CDATA[Examples]]></category>

		<category><![CDATA[Front Page]]></category>

		<category><![CDATA[Prototype]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=5606</guid>
		<description><![CDATA[Thomas Fuchs has created defaultValueActsAsHint, an implementation of the Input Prompt pattern:


An often occuring UI pattern is “use the value of a textfield as hint what to input”. These fields all auto-clear when the user first focuses it (by clicking or tabbing it), and if nothing it entered, the hint will be shown once again [...]]]></description>
			<content:encoded><![CDATA[<p>Thomas Fuchs has created <a href="http://mir.aculo.us/2009/1/7/using-input-values-as-hints-the-easy-way">defaultValueActsAsHint</a>, an implementation of the <a href="http://ui-patterns.com/pattern/InputPrompt">Input Prompt pattern</a>:</p>
<blockquote><p>
<img src="http://mir.aculo.us/assets/2009/1/7/quickentry.png" /></p>
<p>An often occuring UI pattern is “use the value of a textfield as hint what to input”. These fields all auto-clear when the user first focuses it (by clicking or tabbing it), and if nothing it entered, the hint will be shown once again once the user leaves it.</p>
<p>Because we decided to go this path for the “Quick entry” box we’re using for freckle time tracking, I dug out an older script I wrote and refreshed it a bit, and I present you defaultValueActsAsHint.</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-2');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-2">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">$<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'element_id'</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">defaultValueActsAsHint</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p>This is all there’s to it, and the file to include is merely 18 lines of code. It works with textareas, too. Just specify whatever should be displayed as hint in the value attribute of the input (or as text within the textarea tag) and off you go. Define a ‘hint’ style if you like to show the text in gray, italics or whatever you fancy.
</p></blockquote>
<p>Check out the <a href="http://github.com/madrobby/prototype_helpers/tree/master/defaultValueActsAsHint/test.html">test sample</a> that lives in his <a href="http://github.com/madrobby/prototype_helpers/tree/master">prototype_helpers</a> library that also includes <a href="http://github.com/madrobby/prototype_helpers/tree/master/deferUntil">deferUntil</a>.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/ajaxian?a=FiBWub.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=FiBWub.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=ToH56o.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=ToH56o.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=Z0vII9.p"><img src="http://feeds.feedburner.com/~f/ajaxian?i=Z0vII9.p" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/defaultvalueactsashint/feed</wfw:commentRss>
		<feedburner:origLink>http://ajaxian.com/archives/defaultvalueactsashint</feedburner:origLink></item>
		<item>
		<title>Palm gets it’s Mojo back?</title>
		<link>http://feeds.feedburner.com/~r/ajaxian/~3/506853647/palm-gets-its-mojo-back</link>
		<comments>http://ajaxian.com/archives/palm-gets-its-mojo-back#comments</comments>
		<pubDate>Fri, 09 Jan 2009 05:01:24 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
		
		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=5619</guid>
		<description><![CDATA[

“The need is obvious for a cross-device mobile javascript library supporting iphone, palm, and android. blackberry browser still blows” -- Joe Hewitt

Joe of course created the popular iUI framework that mimics the native iPhone look and feel and gives you nice simple iPhone features via JavaScript.
Palm is on his list, because it is back in [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://developer.palm.com/images/device.jpg" border="0" style="float: right; padding: 8px;" /></p>
<blockquote><p>
“The need is obvious for a cross-device mobile javascript library supporting iphone, palm, and android. blackberry browser still blows” -- Joe Hewitt
</p></blockquote>
<p>Joe of course created the popular iUI framework that mimics the native iPhone look and feel and gives you nice simple iPhone features via JavaScript.</p>
<p>Palm is on his list, because it is back in the game with their CES announcement of the <a href="http://www.techmeme.com/090108/p70#a090108p70">Palm Pre</a>, an offering that has an SDK that makes me happy. No Objective-C, no Java, just a Web stack!</p>
<p><a href="http://developer.palm.com/"><br />
Announcing Palm WebOS, Palm Mojo Application Framework, and Palm Mojo SDK</a></p>
<blockquote><p>
Palm WebOS, Palm's next generation operating system, integrates the power of a window-based operating system with the simplicity of a browser. The user experience is designed around multitasking, and makes it easy to run background applications, switch between applications in a single step, and handle interruptions and events without losing context. Using WebOS, you’ll be able to develop fast (and beautiful) applications.</p>
<p><b>The Palm Mojo Application Framework</b></p>
<p>Palm WebOS applications are easy to write using Mojo, a new application framework based on the HTML5, CSS, and JavaScript standards that web developers already know and love. WebOS applications are installed and run directly on the device at native speed and have access to a wide range of device services.</p>
<p>  Mojo will enable you to:</p>
<ul class="bulleted">
<li>Build applications with gesture-based navigation, transitions, and scrolling</li>
<li>Use the WebOS notification system to alert users without interrupting them</li>
<li>Leverage the local storage capabilities of HTML5  so that data is available even when users are offline</li>
<li>Use a JSON-based message bus to tap into a wide range of device services, including contacts, calendars, and location</li>
</ul>
<p></p>
<p>
  And good news for Palm OS developers! There are a number of ways to migrate data from a an existing PDB file to your new WebOS app. Stay tuned for more information for developers with Palm OS applications who want to build WebOS applications. </p>
<p></p>
<h3><b>The Palm Mojo SDK</b></h3>
<p>
<p>Besides the Palm Mojo Application Framework, the SDK will include sample code, documentation, and development tools. An Eclipse-based IDE is included, and you will also be able to use your choice of tools to build WebOS applications. The Mojo SDK is currently in private prerelease, and will be available later this year as a free download from the Palm Developer Network.  </p>
<h3><b>The Palm App Catalog</b></h3>
<p>
<p>
    Palm will provide an on-device application catalog to deliver your apps directly to users.</p>
</blockquote>
<p>We are still some time out from the release, but very cool to see!</p>
<p>Clink Ecker of Ars has a nice <a href="http://arstechnica.com/news.ars/post/20090109-the-pres-got-mojo-a-developer-speaks-about-palms-new-sdk.html">piece where he talked to a developer familiar with the SDK</a>. If anyone knows more, please let us know :)</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/ajaxian?a=gXJAWj.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=gXJAWj.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=Ja6zGU.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=Ja6zGU.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=ARzpEZ.p"><img src="http://feeds.feedburner.com/~f/ajaxian?i=ARzpEZ.p" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/palm-gets-its-mojo-back/feed</wfw:commentRss>
		<feedburner:origLink>http://ajaxian.com/archives/palm-gets-its-mojo-back</feedburner:origLink></item>
		<item>
		<title>jQuery pageSlide: throwing content around</title>
		<link>http://feeds.feedburner.com/~r/ajaxian/~3/506227569/jquery-pageslide-throwing-content-around</link>
		<comments>http://ajaxian.com/archives/jquery-pageslide-throwing-content-around#comments</comments>
		<pubDate>Thu, 08 Jan 2009 14:10:26 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
		
		<category><![CDATA[Component]]></category>

		<category><![CDATA[Examples]]></category>

		<category><![CDATA[Front Page]]></category>

		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=5602</guid>
		<description><![CDATA[
Scott Robbin (Songza co-founder) has created a very cool jQuery plugin for pageSlide, an interaction based off of Aza's prototypes for Firefox Mobile and Ubiquity mouse gestures. The plugin wraps body content into a container and shifts it off of the page whenever a click event is fired, revealing a secondary interaction pane.

This plugin allows [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://jquery-pageslide.googlecode.com/files/jquery-pageslide-screenshot.png"/></p>
<p>Scott Robbin (Songza co-founder) has created a very cool jQuery plugin for <a href="http://halobrite.com/blog/jquery-pageslide/">pageSlide</a>, an interaction based off of Aza's prototypes for Firefox Mobile and Ubiquity mouse gestures. The plugin wraps body content into a container and shifts it off of the page whenever a click event is fired, revealing a secondary interaction pane.</p>
<blockquote><p>
This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript. By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.</p>
<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/script.html"><span style="color: #000000; font-weight: bold;">&lt;script</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/javascript"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></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; $(document).ready(function() {</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; $('a.pageslide').pageSlide({</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: &quot;300px&quot;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; });</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &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;"><span style="color: #000000; font-weight: bold;">&lt;/script&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
</blockquote>
<p>For some reason I enjoy thinking of my desktop as a virtual area that I can shift around.... so this can suite me well.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/ajaxian?a=5Tg8gX.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=5Tg8gX.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=VFj3L4.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=VFj3L4.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=dFOa8H.p"><img src="http://feeds.feedburner.com/~f/ajaxian?i=dFOa8H.p" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/jquery-pageslide-throwing-content-around/feed</wfw:commentRss>
		<feedburner:origLink>http://ajaxian.com/archives/jquery-pageslide-throwing-content-around</feedburner:origLink></item>
		<item>
		<title>Firebug 1.3 Final Release</title>
		<link>http://feeds.feedburner.com/~r/ajaxian/~3/506215353/firebug-13-final-release</link>
		<comments>http://ajaxian.com/archives/firebug-13-final-release#comments</comments>
		<pubDate>Thu, 08 Jan 2009 14:00:34 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
		
		<category><![CDATA[Debugging]]></category>

		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=5599</guid>
		<description><![CDATA[Rob Campbell posted on the 1.3 final release of Firebug, the stable release for the Firefox 3 world:

Release notes are here. As mentioned previously, this version will not be compatible with Firefox 3.1 (Shiretoko) and up. For that you’ll need a Firebug 1.4 alpha, soon to be dubbed beta available on getfirebug.com’s releases directory. Notes [...]]]></description>
			<content:encoded><![CDATA[<p>Rob Campbell <a href="http://antennasoft.net/robcee/2009/01/07/firebug-130-final-released/">posted on the 1.3 final release of Firebug</a>, the stable release for the Firefox 3 world:</p>
<blockquote>
<p>Release notes are <a target="_blank" href="http://code.google.com/p/fbug/source/browse/branches/firebug1.3/docs/ReleaseNotes_1.3.txt">here</a>. As mentioned <a href="http://antennasoft.net/robcee/2008/12/17/firebug-in-firefox-31b2-and-beyond/">previously</a>, this version will not be compatible with Firefox 3.1 (Shiretoko) and up. For that you’ll need a Firebug 1.4 alpha, soon to be dubbed beta available on getfirebug.com’s releases <a target="_blank" href="http://getfirebug.com/releases/firebug/">directory</a>. Notes are on the releases <a target="_blank" href="http://getfirebug.com/releases/index.html">page</a>.</p>
<p>If I can babble a bit for a second, I’d like to say that I’m pretty proud of this release. Honza has made some fantastic improvements to the Net panel. John Barton has improved the Script panel and debugging features as well as tweaking the console. Maybe more significantly were some of the changes under the covers. The new Tracing panel (FBTrace) for debugging Firebug itself during development is a huge improvement over the previous console-based system. We’re starting to get some unittest coverage through John Resig’s and Honza’s FireUnit. And I think community involvement is at an all-time high with some excellent testing and bug reporting coming from all corners of the world. The message is getting out that Firebug is a great project to be involved in and that community contribution can really help move it forward.</p>
<p>So, thanks to everybody who helped out with this release. I think it’s the best Firebug yet.</p>
</blockquote>
<p>The team seems to be gelling together and really doing some great work. I am looking forward to see more in 1.4 and above.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/ajaxian?a=or4TRQ.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=or4TRQ.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=oOMVdU.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=oOMVdU.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=bT8pQx.p"><img src="http://feeds.feedburner.com/~f/ajaxian?i=bT8pQx.p" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/firebug-13-final-release/feed</wfw:commentRss>
		<feedburner:origLink>http://ajaxian.com/archives/firebug-13-final-release</feedburner:origLink></item>
		<item>
		<title>Backwards compatibility and HTML 5</title>
		<link>http://feeds.feedburner.com/~r/ajaxian/~3/506159328/backwards-compatibility-and-html-5</link>
		<comments>http://ajaxian.com/archives/backwards-compatibility-and-html-5#comments</comments>
		<pubDate>Thu, 08 Jan 2009 12:39:01 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
		
		<category><![CDATA[Ajax]]></category>

		<category><![CDATA[Front Page]]></category>

		<category><![CDATA[HTML]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=5593</guid>
		<description><![CDATA[John Allsopp has a thoughtful piece that races some old concerns about the new tag set in HTML 5, and how we will ever be able to jump on that train when the cabooze still has IE.old train cars.
It is great to have new semantics for &#60;section&#62; and all, but what will browsers do with [...]]]></description>
			<content:encoded><![CDATA[<p>John Allsopp has a <a href="http://alistapart.com/articles/semanticsinhtml5">thoughtful piece</a> that races some old concerns about the new tag set in HTML 5, and how we will ever be able to jump on that train when the cabooze still has IE.old train cars.</p>
<p>It is great to have new semantics for <code>&lt;section&gt;</code> and all, but what will browsers do with these new tags?</p>
<p>John walks through a simple example with the new tags, shows some issues, and then wonders if we could use the existing extension points (attributes):</p>
<blockquote><p>
Let’s invent a new attribute. I’ll call it “structure,” but the particular name isn’t important. We can use it like this:</p>
<pre>
&lt;div structure="header"&gt;
</pre>
<p>Let’s see how our browsers fare with this.</p>
<p>Of course, all our browsers will style this element with CSS.</p>
<div class="igBar"><a href="javascript:showCodeTxt('html-6');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">HTML:</span>
<div id="html-6">
<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;">div {color: red}</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>But how about this?</p>
<pre>
div[structure] {font-weight: bold}
</pre>
<p>In fact, almost all browsers, including IE7, style the div with an attribute of structure, even if there is no such thing as the structure attribute! Sadly, our luck runs out there, as IE6 does not. But we can use the attribute in HTML and have all existing browsers recognize it. We can even use CSS to style our HTML using the attribute in all modern browsers. And, if we want a workaround for older browsers, we can add a class value to the element for styling. Compare this with the HTML 5 solution, which adds new elements that cannot be styled in Internet Explorer 6 or 7 and you’ll see that this is definitely a more backward-compatible solution.
</p></blockquote>
<p>John then goes on to discuss the potential use of the role attribute, and more.</p>
<p>It feels like there are two issues here:</p>
<ol>
<li>Are new tags the right way to provide new semantic value</li>
<li>Are there work arounds to back/forward compatibility.</li>
</ol>
<p>Without compatibility, it will be impossible to get this off the ground for many people. What if we mix both worlds, and a shim is put in place to convert the new tags to divs and the like at runtime for browsers that don't support it. Is that enough?</p>
<p>You can get IE to support new tags <a href="http://blog.whatwg.org/supporting-new-elements-in-ie">as shown in this example</a> by using <code>document.createElement()</code>.</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/ajaxian?a=QTEjHE.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=QTEjHE.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=5Y6mfi.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=5Y6mfi.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=mA4JoC.p"><img src="http://feeds.feedburner.com/~f/ajaxian?i=mA4JoC.p" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/backwards-compatibility-and-html-5/feed</wfw:commentRss>
		<feedburner:origLink>http://ajaxian.com/archives/backwards-compatibility-and-html-5</feedburner:origLink></item>
		<item>
		<title>Sharing and creating HTML and CSS templates</title>
		<link>http://feeds.feedburner.com/~r/ajaxian/~3/506122033/sharing-and-creating-html-and-css-templates</link>
		<comments>http://ajaxian.com/archives/sharing-and-creating-html-and-css-templates#comments</comments>
		<pubDate>Thu, 08 Jan 2009 11:37:25 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
		
		<category><![CDATA[Design]]></category>

		<category><![CDATA[Front Page]]></category>

		<category><![CDATA[HTML]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=5596</guid>
		<description><![CDATA[There are a slew of HTML/CSS design sharing template sites out there. What if there was a manifest that defined what they had, and tools could work with that so you could import repositories.
That is the vision that Daniel Glazman had when just created the HTML+CSS Templates Manifest 1.0 CC licensed spec.
You would end up [...]]]></description>
			<content:encoded><![CDATA[<p>There are a slew of HTML/CSS design sharing template sites out there. What if there was a manifest that defined what they had, and tools could work with that so you could import repositories.</p>
<p>That is the vision that <a href="http://www.glazman.org/weblog/dotclear/index.php?post/2009/01/07/HTMLCSS-Templates-Repositories">Daniel Glazman had when just created</a> the <a href="http://disruptive-innovations.com/zoo/templatesManifest/1.0/templatesManifest.html">HTML+CSS Templates Manifest 1.0</a> CC licensed spec.</p>
<p>You would end up with a file that looks like the example:</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;">&lt;templates xmlns=<span style="color: #ff0000;">"http://disruptive-innovations.com/zoo/templatesManifest/1.0"</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; <span style="color: #009900;">&lt;template shortname=<span style="color: #ff0000;">"aFarewellToColor"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/title.html"><span style="color: #000000; font-weight: bold;">&lt;title</span></a> xml:<span style="color: #000066;">lang</span>=<span style="color: #ff0000;">"en"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span>A Farewell to Color<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/title&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; &nbsp; <span style="color: #009900;">&lt;description xml:<span style="color: #000066;">lang</span>=<span style="color: #ff0000;">"en"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">&lt;p&gt;</span></a></span>Remember the early days when the Internet was all black and white,</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this is a throwback to those days. In all seriousness, I made this</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;template because it was based on an earlier design that many found</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;useful. Plus I've always had a thing for creating designs on the web</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;with zero color, I guess it is an 'off the beaten path type deal'.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/p&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; &nbsp; &nbsp; <span style="color: #009900;"><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;">&lt;p&gt;</span></a></span>I should also mention that this template has some updates (err...</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;advantages) over the previous designs... this one uses h1 and h2</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tags in the header for better SEO results, and has new image</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rollovers for the navigation.<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/p&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; &nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;</span></a>/description&gt;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;">&lt;author&gt;</span>Bryant Smith<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;</span></a>/author&gt;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;">&lt;version&gt;</span>1.0<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;</span></a>/version&gt;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="color: #808080; font-style: italic;">&lt;!-- the following URL does not exist (yet) --&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; &nbsp; <span style="color: #009900;">&lt;license&gt;</span>http://bryantsmith.com/template/license.txt<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;</span></a>/license&gt;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;">&lt;website&gt;</span>http://bryantsmith.com/template/<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;</span></a>/website&gt;</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;">&lt;support&gt;</span>http://bryantsmith.com/component/option,com_alfcontact/Itemid,55/<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;</span></a>/support&gt;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;">&lt;demo&gt;</span>http://bryantsmith.com/template/afarewelltocolor<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;</span></a>/demo&gt;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;">&lt;thumbnail&gt;</span>http://bryantsmith.com/template/previews/afarewelltocolor.jpg<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;</span></a>/thumbnail&gt;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;">&lt;package&gt;</span>http://bryantsmith.com/template/afarewelltocolor.zip<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;</span></a>/package&gt;</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;">&lt;path&gt;</span>index.html<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;</span></a>/path&gt;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;">&lt;size&gt;</span>228275<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;</span></a>/size&gt;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;">&lt;tags&gt;</span>gray,menus<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;</span></a>/tags&gt;</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;">&lt;format&gt;</span>xhtml<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;</span></a>/format&gt;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;">&lt;width&gt;</span>750px<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;</span></a>/width&gt;</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;">&lt;columns&gt;</span>1<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;</span></a>/columns&gt;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;">&lt;sidebars&gt;</span>0<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;</span></a>/sidebars&gt;</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;">&lt;direction&gt;</span>ltr<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;</span></a>/direction&gt;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;</span></a>/template&gt;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;</span></a>/templates&gt;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p>And, if you are into design, the OmniGraffle wireframe stencils <a href="http://konigi.com/tools/omnigraffle-wireframe-stencils">have been updated!</a></p>
<p><img src="http://s3.amazonaws.com/konigi/tools/og-wireframe-stencil/Forms.png" /></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/ajaxian?a=kU5q9I.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=kU5q9I.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=pRyTvB.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=pRyTvB.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=9QVYIr.p"><img src="http://feeds.feedburner.com/~f/ajaxian?i=9QVYIr.p" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/sharing-and-creating-html-and-css-templates/feed</wfw:commentRss>
		<feedburner:origLink>http://ajaxian.com/archives/sharing-and-creating-html-and-css-templates</feedburner:origLink></item>
		<item>
		<title>Watch out for the zoom; Debugging fun with Canvas</title>
		<link>http://feeds.feedburner.com/~r/ajaxian/~3/505250496/watch-out-for-the-zoom-debugging-fun-with-canvas</link>
		<comments>http://ajaxian.com/archives/watch-out-for-the-zoom-debugging-fun-with-canvas#comments</comments>
		<pubDate>Wed, 07 Jan 2009 13:49:42 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
		
		<category><![CDATA[Canvas]]></category>

		<category><![CDATA[Debugging]]></category>

		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=5586</guid>
		<description><![CDATA[Ben was cursing at a bug in some canvas code that he was playing with, where the rendering was off. One piece of his UI was blurred instead of crisp.
The debugging exersize was fun, and he shares it with you on his personal blog.
The moral of the story is: watch out for that zoom feature [...]]]></description>
			<content:encoded><![CDATA[<p>Ben was cursing at a bug in some canvas code that he was playing with, where the rendering was off. One piece of his UI was blurred instead of crisp.</p>
<p>The debugging <a href="http://benzilla.galbraiths.org/2009/01/06/html-5-canvas-lessons-zooming-and-reusing/">exersize was fun, and he shares it with you on his personal blog</a>.</p>
<p>The moral of the story is: <code>watch out for that zoom feature in today's browsers!</code></p>
<p>Along the way, I got to learn that canvas supports fractional coordinates:</p>
<blockquote><p>
My first thought was that it would be due to fractional coordinates. I have years of experience with drawing APIs that force integer coordinates, so I’m used to relying whacking off the fractional part of a coordinate and making up the difference when necessary in a second pass. Canvas, on the other hand, supports fractional coordinates, which I’m told is the fancy thing to do these days. (How the fraction is converted to an actual pixel is depenendent on whatever drawing system is doing the heavy lifting somewhere down the stack.) When your coordinates are fractional, you can get this kind of fuzziness.</p>
<p>Because the interface I’m working with involves a few layers of rendering code, ensuring that integers ruled the roost took some time. But after quite a bit of poking around, I found no evidence of fractional coordinates. It was around this time I saw Vlad (Mozilla’s graphics guru) walking around the office and asked for some help.</p>
<p>We started looking for evidence of transforms that would introduce fractional coordinates–but ultimately came up empty handed. As we went through this process, he pointed out that the &lt;canvas&gt; context instances are reused, so it’s a really good idea to save() and restore() when obtaining a canvas to avoid polluting the context:</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-10');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-10">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> ctx = canvas.<span style="color: #006600;">getContext</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"2d"</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;">ctx.<span style="color: #006600;">save</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// painting here</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">ctx.<span style="color: #006600;">restore</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p>I had assumed each call produced a fresh, stateless context, so this was welcome news indeed.
</p></blockquote>
<p>But, user error was the true case:</p>
<blockquote><p>
And that’s when we noticed that I had zoomed in a click using Firefox 3’s fancy full page zoom feature. And that was causing the image the be scaled up, and the blurriness.
</p></blockquote>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/ajaxian?a=XqnP2H.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=XqnP2H.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=VHH9FX.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=VHH9FX.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=NHUF7p.p"><img src="http://feeds.feedburner.com/~f/ajaxian?i=NHUF7p.p" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/watch-out-for-the-zoom-debugging-fun-with-canvas/feed</wfw:commentRss>
		<feedburner:origLink>http://ajaxian.com/archives/watch-out-for-the-zoom-debugging-fun-with-canvas</feedburner:origLink></item>
		<item>
		<title>Web Workers update for Firefox 3.1</title>
		<link>http://feeds.feedburner.com/~r/ajaxian/~3/505246663/web-workers-update-for-firefox-31</link>
		<comments>http://ajaxian.com/archives/web-workers-update-for-firefox-31#comments</comments>
		<pubDate>Wed, 07 Jan 2009 13:42:43 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
		
		<category><![CDATA[Browsers]]></category>

		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=5579</guid>
		<description><![CDATA[Ben Turner has nicely written up the state of Web Workers that we will see in Firefox 3.1 (in beta 2 right now).
To show the latest, Ben got a demo working that decrypts Weave data in the client using a Worker:
PLAIN TEXT
JAVASCRIPT:




&#160;


&#160; &#160; &#160; // Launch the main worker.


&#160; &#160; &#160; if &#40;!worker&#41; &#123;


&#160; &#160; [...]]]></description>
			<content:encoded><![CDATA[<p>Ben Turner has nicely <a href="https://developer.mozilla.org/web-tech/2009/01/05/web-workers-part-3/">written up the state of Web Workers</a> that we will see in Firefox 3.1 (in beta 2 right now).</p>
<p>To show the latest, Ben got a demo working that <a href="http://people.mozilla.com/~bturner/weaveworker/weaveDecryptor.html">decrypts Weave data in the client using a Worker</a>:</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-12');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-12">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// Launch the main worker.</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color:#006600; font-weight:bold;">&#40;</span>!worker<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; worker = <span style="color: #003366; font-weight: bold;">new</span> Worker<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"weaveDecryptorWorker.js"</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; worker.<span style="color: #006600;">onerror</span> = <span style="color: #000066;">onerror</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; worker.<span style="color: #006600;">onmessage</span> = onmessage;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; worker.<span style="color: #006600;">postMessage</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#123;</span> types: types,</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;user: document.<span style="color: #006600;">getElementById</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"username"</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">value</span>,</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;phrase: document.<span style="color: #006600;">getElementById</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"passphrase"</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">value</span>,</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;server: document.<span style="color: #006600;">getElementById</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">"server"</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color: #006600;">value</span> <span style="color:#006600; font-weight:bold;">&#125;</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
</ol>
</div>
</div>
</div>
<p>What's changed?</p>
<ol>
<li>The <code>navigator</code> object has been added to the worker scope. It contains the following strings that identify the browser, just as from normal script:
<ul>
<li><code>appName</code></li>
<li><code>appVersion</code></li>
<li><code>platform</code></li>
<li><code>userAgent</code></li>
</ul>
</li>
<li>Workers can now be forcefully killed via the <code>terminate</code> function. Calling this function on a worker will <em>immediately</em> stop the worker’s execution.</li>
<li>Workers may only be created from a worker script that is hosted within the same origin as the parent page.</li>
<li>URIs for subworker scripts and imported scripts are now resolved relative to the parent worker script location instead of the owning page.</li>
<li>Error handling has been reworked according to recent spec changes. A worker script can now define an <code>onerror</code> handler that will be called with an error event with details about the exception. If the handler calls <code>preventDefault</code> on the event object then nothing else happens. If <code>preventDefault</code> is not called then the error event propagates to the parent scope’s (either a worker or the parent page) <code>onerror</code> handler.</li>
<li>Numbers, booleans, and even objects may be passed to <code>postMessage</code> in addition to strings. The only restriction is that objects may not contain functions or cyclical references (since we use JSON under the hood). This simplifies previous code that needed to use the JSON object to manually encode/decode the strings passed to <code>postMessage</code>.</li>
</ol>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/ajaxian?a=788v7h.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=788v7h.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=NefIdL.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=NefIdL.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=A7nZNN.p"><img src="http://feeds.feedburner.com/~f/ajaxian?i=A7nZNN.p" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/web-workers-update-for-firefox-31/feed</wfw:commentRss>
		<feedburner:origLink>http://ajaxian.com/archives/web-workers-update-for-firefox-31</feedburner:origLink></item>
		<item>
		<title>AddressChooser: address picker in real-time</title>
		<link>http://feeds.feedburner.com/~r/ajaxian/~3/505205777/addresschooser</link>
		<comments>http://ajaxian.com/archives/addresschooser#comments</comments>
		<pubDate>Wed, 07 Jan 2009 12:37:12 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
		
		<category><![CDATA[Component]]></category>

		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=5575</guid>
		<description><![CDATA[
Sébastein Gruhier has released a new address component that integrated a map with the address that you are filling. The UX is interesting as when you first get typing it doesn't really narrow down the address so you are seeing maps of bizarre places.
As well as a basic version, you can also tie in auto [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://addresschooser.mapeed.com/doc/"><img src="http://ajaxian.com/wp-content/uploads/addresschooser.png" alt="" title="addresschooser" width="500" height="217" class="alignnone size-full wp-image-5576" /></a></p>
<p>Sébastein Gruhier has released a new address component that integrated a map with the address that you are filling. The UX is interesting as when you first get typing it doesn't really narrow down the address so you are seeing maps of bizarre places.</p>
<p>As well as a basic version, you can also tie in <a href="http://addresschooser.mapeed.com/example/with_prototype.html">auto complete</a>.</p>
<p>Features include:</p>
<ul>
<li>Javascript framework-agnostic. You can use it as is or with any great frameworks like Prototype, JQuery …</li>
<li>Mapping system independent. The current implementation is based on Google Map using a Google Map proxy object.</li>
<li>Interactive map display location while you arex typing an address.</li>
<li>Center map on user location (based on its IP) if mapping system allows it.</li>
<li>Fully customizable.</li>
<li>Fully documented with <a href="http://pdoc.org">pdoc</a>.</li>
<li>Works on Safari, Firefox, <span class="caps">IE 6</span>/7, Chrome and Opera.</li>
<li>...</li>
</ul>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/ajaxian?a=FjpkgL.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=FjpkgL.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=A13HYG.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=A13HYG.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=qGs1dL.p"><img src="http://feeds.feedburner.com/~f/ajaxian?i=qGs1dL.p" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/addresschooser/feed</wfw:commentRss>
		<feedburner:origLink>http://ajaxian.com/archives/addresschooser</feedburner:origLink></item>
		<item>
		<title>Technical Details Behind iWork.com</title>
		<link>http://feeds.feedburner.com/~r/ajaxian/~3/505168271/technical-details-behind-iworkcom</link>
		<comments>http://ajaxian.com/archives/technical-details-behind-iworkcom#comments</comments>
		<pubDate>Wed, 07 Jan 2009 11:30:48 +0000</pubDate>
		<dc:creator>Brad Neuberg</dc:creator>
		
		<category><![CDATA[Apple]]></category>

		<category><![CDATA[Canvas]]></category>

		<category><![CDATA[Front Page]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=5581</guid>
		<description><![CDATA[As soon as I heard about the new iWork.com site launched yesterday, I knew I wanted to know more about how it was made. iWork.com is a web-based way to share and collaborate over your iWork documents. I searched around the blogosphere seeing if anyone knew any technical details, but didn't find anything, so I [...]]]></description>
			<content:encoded><![CDATA[<p>As soon as I heard about the new <a href="http://iwork.com">iWork.com</a> site <a href="http://arstechnica.com/journals/apple.ars/2009/01/06/iwork-09-iwork-com-collaboration-site-make-their-debut">launched yesterday</a>, I knew I wanted to know more about how it was made. iWork.com is a web-based way to share and collaborate over your iWork documents. I searched around the blogosphere seeing if anyone knew any technical details, but didn't find anything, so I had to crack open <a href="http://getfirebug.com/">Firebug</a> and see what was under the covers. I really wanted to know whether the apps were built with Flash or Ajax or something else.</p>
<p>I downloaded a trial version of iWork 2009 and published a Keynote presentation. The new Sharing function unfortunately requires you to configure and use the Apple Mail program, which I did before I could test out to see how the iWork.com shared documents work.</p>
<p>Looking at the JavaScript files, I see <a href="http://www.sproutcore.com/">SproutCore</a> and <a href="http://www.prototypejs.org/">Prototype</a> being pulled in, so everything is built with Ajax and web technologies. It's also using <a href="http://en.wikipedia.org/wiki/WebDAV">WebDAV</a> to pull in the metadata about the document, which is interesting (though it's piping the WebDAV over some kind of proxy):</p>
<p>http://publish.iwork.com/iw/p159985190/.iWork/Share/Untitled.pages/Metadata/?webdav-method=PROPFIND</p>
<p>That URL returns an XML WebDAV document with the document metadata properties:</p>
<div class="igBar"><a href="javascript:showCodeTxt('xml-14');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">XML:</span>
<div id="xml-14">
<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;</span>?xml <span style="color: #000066;">version</span>=<span style="color: #ff0000;">"1.0"</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">"utf-8"</span> ?<span style="font-weight: bold; color: black;">&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;"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;multistatus</span> <span style="color: #000066;">xmlns</span>=<span style="color: #ff0000;">"DAV:"</span><span style="font-weight: bold; color: black;">&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;d</span> :response xmlns:<span style="color: #000066;">D</span>=<span style="color: #ff0000;">"DAV:"</span><span style="font-weight: bold; color: black;">&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/d<span style="font-weight: bold; color: black;">&gt;</span></span></span><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;d</span> :href<span style="font-weight: bold; color: black;">&gt;</span></span>/iw/p159985190/.iWork/Share/Untitled.pages/Metadata/<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/d<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;">&nbsp;<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;d</span> :propstat<span style="font-weight: bold; color: black;">&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/d<span style="font-weight: bold; color: black;">&gt;</span></span></span><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;d</span> :prop<span style="font-weight: bold; color: black;">&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; &nbsp;<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/d<span style="font-weight: bold; color: black;">&gt;</span></span></span><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;d</span> :resourcetype<span style="font-weight: bold; color: black;">&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;d</span> :collection <span style="font-weight: bold; color: black;">/&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; &nbsp;<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/d<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;">&nbsp; &nbsp;<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;d</span> :getlastmodified<span style="font-weight: bold; color: black;">&gt;</span></span>Wed, 07 Jan 2009 02:07:51 GMT<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/d<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;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;d</span> :modificationdate<span style="font-weight: bold; color: black;">&gt;</span></span>2009-01-07T02:07:51Z<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/d<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;">&nbsp; &nbsp;<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;d</span> :comment<span style="font-weight: bold; color: black;">&gt;</span></span>1231293220308<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/d<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;">&nbsp; &nbsp;<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;x</span> :Heckler.pages xmlns:<span style="color: #000066;">X</span>=<span style="color: #ff0000;">"urn:iwork:property"</span><span style="font-weight: bold; color: black;">&gt;</span></span>[{&quot;guid&quot;:1,&quot;type&quot;:&quot;Page&quot;,&quot;w&quot;:612,&quot;h&quot;:792}</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">]</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/x<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;">&nbsp; &nbsp;<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;x</span> :Heckler.downloads xmlns:<span style="color: #000066;">X</span>=<span style="color: #ff0000;">"urn:iwork:property"</span><span style="font-weight: bold; color: black;">&gt;</span></span>[{&quot;size&quot;:198284,&quot;path&quot;:&quot;Untitled.pages&quot;,&quot;guid&quot;:1,&quot;downloadType&quot;:&quot;pages09&quot;,&quot;type&quot;:&quot;Download&quot;},{&quot;size&quot;:73533,&quot;path&quot;:&quot;Untitled.pdf&quot;,&quot;guid&quot;:2,&quot;downloadType&quot;:&quot;pdf&quot;,&quot;type&quot;:&quot;Download&quot;},{&quot;size&quot;:30720,&quot;path&quot;:&quot;Untitled.doc&quot;,&quot;guid&quot;:3,&quot;downloadType&quot;:&quot;word&quot;,&quot;type&quot;:&quot;Download&quot;}]<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/x<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;">&nbsp; &nbsp;<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;x</span> :Heckler.document xmlns:<span style="color: #000066;">X</span>=<span style="color: #ff0000;">"urn:iwork:property"</span><span style="font-weight: bold; color: black;">&gt;</span></span>[{&quot;publishName&quot;:&quot;Untitled.pages&quot;,&quot;publishDate&quot;:1231293215,&quot;title&quot;:&quot;Untitled&quot;,&quot;appBuildDate&quot;:&quot;Dec 21 2008, 01:44:15&quot;,&quot;type&quot;:&quot;Document&quot;,&quot;size&quot;:604363,&quot;viewers&quot;:0,&quot;marketeerPublishName&quot;:&quot;b4d96779c707ea0d05ba5d33989ba0e45f874d3b40204a46895cdac1bd2fafac&quot;,&quot;guid&quot;:&quot;Untitled.pages&quot;,&quot;nativeDownload&quot;:&quot;Untitled.pages&quot;,&quot;authorEmail&quot;:&quot;bradneuberg@gmail.com&quot;,&quot;documentType&quot;:3,&quot;pageCount&quot;:1,&quot;documentVersion&quot;:92008102400,&quot;passwordProtected&quot;:false}]<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/x<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;">&nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;d</span> :status<span style="font-weight: bold; color: black;">&gt;</span></span>HTTP/1.1 200 OK<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/d<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;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</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;/multistatus<span style="font-weight: bold; color: black;">&gt;</span></span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p>Notice how some of the metadata payload is JSON as well.</p>
<p>The web-based iWork apps are themselves built above SproutCore, using that framework to organize and do things. For example, there appears to be something named CoreHeckler that has to do with the commenting system, all built using SproutCore.</p>
<p>Using the Firebug Inspector, I see that the slides are a combination of an image file, the <a href="http://en.wikipedia.org/wiki/Canvas_(HTML_element)">Canvas tag</a>, and transparent DIVs that overlay; if there are hyperlinks on the page they are overlaid on a separate DIV that lies over the canvas. Comments also float on top of the Canvas using another DIV. The Canvas appears to be used for comments somehow, but I'm not sure how. I see CoreHeckler.Graphics being bound to the Canvas element; I'm not super familiar with SproutCore however.</p>
<p>Looking through the CSS I see they are using a few -webkit- specific CSS style rules, mostly around rounded border corners and <a href="http://code.google.com/p/doctype/wiki/WebkitBoxShadowProperty">shadows</a>. They are also using the Webkit CSS Gradients and Clipping.</p>
<p>I wanted to see how things were handled in Internet Explorer. When I look at a published iWork.com document in Internet Explorer a very interesting dialog box first appears:</p>
<p><a href="http://ajaxian.com/wp-content/uploads/using_ie.png"><img src="http://ajaxian.com/wp-content/uploads/using_ie.png" alt="" title="using_ie" width="300" height="205" class="aligncenter size-medium wp-image-5582" /></a></p>
<p>It was indeed slow; it took about 17 seconds to load the document in IE. Clicking on individual slides took about 4 to 5 seconds to show.</p>
<p>I used the <a href="http://en.wikipedia.org/wiki/IE_Developer_Toolbar">Internet Explorer Developer Toolbar</a> to get into the DOM and see how things run on IE. The first thing I see is that the Canvas tag is in the DOM:</p>
<p><a href="http://ajaxian.com/wp-content/uploads/using_ie_2.png"><img src="http://ajaxian.com/wp-content/uploads/using_ie_2.png" alt="" title="using_ie_2" width="300" height="54" class="aligncenter size-medium wp-image-5583" /></a></p>
<p>However, notice a glitch that it has the &lt;CANVAS&gt; and &lt;/CANVAS&gt; tags as separate elements, which can sometimes happen when IE is dealing with unknown tags. They are also definently using <a href="http://en.wikipedia.org/wiki/Vector_Markup_Language">VML (Vector Markup Language)</a> on IE, since I see them pulling in the VML behavior for IE on the main page. I wonder why they didn't just use the <a href="http://excanvas.sourceforge.net/">Google-ExCanvas library</a> that emulates Canvas for Internet Explorer (Disclosure: I work for a team at Google that promotes open web technologies like this).</p>
<p>One other thing I noticed is that if you are on the iPhone you get redirected to an iPhone version of the app. This just replaces the URL /document/ section with /iphone/. When you navigate to this you get a PDF version of the page -- that must be the iPhone version, a PDF file!</p>
<p>I wanted to see how the Pages application does things as well, so I published a document there. The published text is selectable in the browser! The document itself appears to be an image file. To do selection, whenever I run over some text it appears that a Canvas element is created and a 'highlighted' type graphic is drawn over the correct characters. Internet Explorer also supports similar highlighting, though on there it appears to be using VML to do the highlighting.</p>
<p>All in all this is a very interesting web-based application built with Ajax and JavaScript!</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/ajaxian?a=JmvkQm.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=JmvkQm.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=x4svK2.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=x4svK2.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=nzou4J.p"><img src="http://feeds.feedburner.com/~f/ajaxian?i=nzou4J.p" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/technical-details-behind-iworkcom/feed</wfw:commentRss>
		<feedburner:origLink>http://ajaxian.com/archives/technical-details-behind-iworkcom</feedburner:origLink></item>
		<item>
		<title>Detecting twitter users with JavaScript - handy or evil?</title>
		<link>http://feeds.feedburner.com/~r/ajaxian/~3/505113616/detecting-twitter-users-with-javascript-handy-or-evil</link>
		<comments>http://ajaxian.com/archives/detecting-twitter-users-with-javascript-handy-or-evil#comments</comments>
		<pubDate>Wed, 07 Jan 2009 10:06:44 +0000</pubDate>
		<dc:creator>Chris Heilmann</dc:creator>
		
		<category><![CDATA[Examples]]></category>

		<category><![CDATA[Front Page]]></category>

		<category><![CDATA[Security]]></category>

		<category><![CDATA[api]]></category>

		<category><![CDATA[hack]]></category>

		<category><![CDATA[phishing]]></category>

		<category><![CDATA[proofofconcept]]></category>

		<category><![CDATA[twitter]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=5588</guid>
		<description><![CDATA[Earlier this week I blogged about a proof of concept that you can detect if a user is logged in to twitter and display their data with a few lines of JavaScript. This could be used to show for example "tweet this" buttons in a blog application. 
The trick is easy: use the user_timeline to [...]]]></description>
			<content:encoded><![CDATA[<p>Earlier this week I blogged about a <a href="http://www.wait-till-i.com/2009/01/05/detecting-and-displaying-the-information-of-a-logged-in-twitter-user/">proof of concept that you can detect if a user is logged in to twitter and display their data</a> with a few lines of JavaScript. This could be used to show for example "tweet this" buttons in a blog application. </p>
<p>The trick is easy: use the <code>user_timeline</code> to get the correct data back and provide it with a callback:</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;"><span style="color: #003366; font-weight: bold;">function</span> hasTwitter<span style="color:#006600; font-weight:bold;">&#40;</span>data<span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900; font-style: italic;">// gets the user's real name</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000066;">alert</span><span style="color:#006600; font-weight:bold;">&#40;</span>data<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#800000;">0</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color: #006600;">user</span>.<span style="color: #006600;">name</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #009900; font-style: italic;">// other data is .screen_name, .location and</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;">// data[0].text is the latest update</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>
</ol>
</div>
</div>
</div>
<div class="igBar"><a href="javascript:showCodeTxt('html-21');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">HTML:</span>
<div id="html-21">
<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/script.html"><span style="color: #000000; font-weight: bold;">&lt;script</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/javascript"</span> </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;">src</span>=<span style="color: #ff0000;">"'http://twitter.com/statuses/user_timeline.json&amp;count=1&amp;callback=hasTwitter"</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;"><span style="color: #000000; font-weight: bold;">&lt;/script&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p>You can see the proof of concept <a href="http://icant.co.uk/sandbox/twitter-hi-demo.html">here</a>. The only problem with the code above is that if the user is not authenticated, Twitter's API will prompt an authentication dialog. You can work around this one by providing an extra parameter called "suppress_response_codes" which is meant to be used with apps that can only handle 200 response codes and don't allow for authentication (Flash apps for example):</p>
<div class="igBar"><a href="javascript:showCodeTxt('html-22');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">HTML:</span>
<div id="html-22">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/script.html"><span style="color: #000000; font-weight: bold;">&lt;script</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/javascript"</span> </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;">src</span>=<span style="color: #ff0000;">"'http://twitter.com/statuses/user_timeline.json&amp;count=1&amp;hasTwitter&amp;suppress_response_codes"</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;"><span style="color: #000000; font-weight: bold;">&lt;/script&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p>This also means that you need to do your own error handling for cases where the user is not authenticated:</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-23');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-23">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> hasTwitter<span style="color:#006600; font-weight:bold;">&#40;</span>data<span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color: #000066; font-weight: bold;">if</span><span style="color:#006600; font-weight:bold;">&#40;</span>data.<span style="color: #006600;">error</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: #000066;">alert</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'No authenticated user'</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; <span style="color:#006600; font-weight:bold;">&#125;</span> <span style="color: #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; &nbsp; <span style="color: #009900; font-style: italic;">// gets the user's real name</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000066;">alert</span><span style="color:#006600; font-weight:bold;">&#40;</span>data<span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#800000;">0</span><span style="color:#006600; font-weight:bold;">&#93;</span>.<span style="color: #006600;">user</span>.<span style="color: #006600;">name</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// other data is .screen_name, .location and</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900; font-style: italic;">// data[0].text is the latest update</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;"><span style="color:#006600; font-weight:bold;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<div class="igBar"><a href="javascript:showCodeTxt('html-24');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">HTML:</span>
<div id="html-24">
<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/script.html"><span style="color: #000000; font-weight: bold;">&lt;script</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/javascript"</span> </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;">src</span>=<span style="color: #ff0000;">"'http://twitter.com/statuses/user_timeline.json&amp;count=1&amp;hasTwitter&amp;suppress_response_codes"</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;"><span style="color: #000000; font-weight: bold;">&lt;/script&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p>Now, this is pretty cool, but it also caused quite a stir on the twitter developer mailing list as it is a privacy concern. Using this technique I could simulate a user's homepage, fake an error, ask for re-authentication and phish their login data. </p>
<p>Whilst this is a problem, it is not really Twitter's fault - if anything then browsers and the lack of secure sandboxes are to blame. Some questions a proof of concept like this throws up are:</p>
<ul>
<li>Do we need something like "tweet this" buttons (as a call to action they can be very effective)?</li>
<li>If we do, isn't it better to only show them when the user is a twitter user instead of cluttering the interface with all kind of buttons?</li>
<li>Is a provider-unknown secret like <a href="http://security.yahoo.com/article.html?aid=2006102507">Yahoo's sign in seal</a> a step in the right direction (educating users instead of patching technology)?</li>
<li>Is <a href="http://oauth.net/">oAuth</a> the answer?</li>
</ul>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/ajaxian?a=QXKu7d.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=QXKu7d.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=kWn7Be.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=kWn7Be.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=OugoFk.p"><img src="http://feeds.feedburner.com/~f/ajaxian?i=OugoFk.p" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/detecting-twitter-users-with-javascript-handy-or-evil/feed</wfw:commentRss>
		<feedburner:origLink>http://ajaxian.com/archives/detecting-twitter-users-with-javascript-handy-or-evil</feedburner:origLink></item>
		<item>
		<title>SendMeHome with GWT</title>
		<link>http://feeds.feedburner.com/~r/ajaxian/~3/504434807/sendmehome-with-gwt</link>
		<comments>http://ajaxian.com/archives/sendmehome-with-gwt#comments</comments>
		<pubDate>Tue, 06 Jan 2009 16:37:11 +0000</pubDate>
		<dc:creator>Dion Almaer</dc:creator>
		
		<category><![CDATA[Front Page]]></category>

		<category><![CDATA[GWT]]></category>

		<category><![CDATA[Showcase]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=5572</guid>
		<description><![CDATA[
SendMeHome lets you to assign a unique code, called a SendMeHome ID, to any physical item. We are launching our newest feature, Stories, which connects a group of people through an item as it travels the globe. Social networks such as Facebook mainly involve users communicating with their ‘friends’, SendMeHome is unique because it uses [...]]]></description>
			<content:encoded><![CDATA[<blockquote><p>
SendMeHome lets you to assign a unique code, called a SendMeHome ID, to any physical item. We are launching our newest feature, Stories, which connects a group of people through an item as it travels the globe. Social networks such as Facebook mainly involve users communicating with their ‘friends’, SendMeHome is unique because it uses a real-world object to tell a story that enables interaction between new and like-minded people who may otherwise have never known of each other’s existence.</p>
<p>Our beta users have already created stories to write a collaborative novel, share cooking tips, discuss political events, and even transport a statue to Easter Island.
</p></blockquote>
<p>The site uses GWT components and integrates with services such as good ole Google Maps. You can <a href="http://sendmehome.com/#stories&#038;1-SRB">check out a story</a>. Having a code associated to items is a lot of fun (read: Webkinz) and seems to be something that can be useful.</p>
<p><img src="http://ajaxian.com/wp-content/uploads/sendmehome.png" alt="" title="sendmehome" width="500" height="395" class="alignnone size-full wp-image-5573" /></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/ajaxian?a=J4qJoh.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=J4qJoh.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=Zwyzat.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=Zwyzat.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=9fL9xJ.p"><img src="http://feeds.feedburner.com/~f/ajaxian?i=9fL9xJ.p" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/sendmehome-with-gwt/feed</wfw:commentRss>
		<feedburner:origLink>http://ajaxian.com/archives/sendmehome-with-gwt</feedburner:origLink></item>
		<item>
		<title>QEvent: Small, Portable Event Library</title>
		<link>http://feeds.feedburner.com/~r/ajaxian/~3/504396113/qevent-small-portable-event-library</link>
		<comments>http://ajaxian.com/archives/qevent-small-portable-event-library#comments</comments>
		<pubDate>Tue, 06 Jan 2009 15:45:41 +0000</pubDate>
		<dc:creator>Ben Galbraith</dc:creator>
		
		<category><![CDATA[Front Page]]></category>

		<category><![CDATA[JavaScript]]></category>

		<category><![CDATA[Library]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=5570</guid>
		<description><![CDATA[Daniel Steigerwald told us about his labor of love: QEvent, a "powerful tiny extensible standalone event library". He provides this laundry-list of features:

    * lightweight footprint
    * no namespace pollution - everything is wrapped in obj.$QEvent
    * normalizes the DOM event model
    * [...]]]></description>
			<content:encoded><![CDATA[<p>Daniel Steigerwald told us about his labor of love: <a href="http://code.google.com/p/qevent/">QEvent</a>, a "powerful tiny extensible standalone event library". He provides this laundry-list of features:</p>
<blockquote><p>
    * lightweight footprint<br />
    * no namespace pollution - everything is wrapped in obj.$QEvent<br />
    * normalizes the DOM event model<br />
    * work also with Javascript objects<br />
    * fixes common IE bugs including: all common used event properties, IE 2px bug http://ajaxian.com/archives/javascript-tip-cross-browser-cursor-positioning, fix many IE leaks, event handlers are FIFO executed<br />
    * prevents repeated registration of same type and listener<br />
    * 'this' in listeners references to object or element itself<br />
    * fixes window 'beforeunload' issue (doesn't work in Opera)<br />
    * fixes window 'unload' (must be removed by itself)<br />
    * fixes focus and blur events<br />
    * DOM events are more extendable: event keys, event objects ( event.myCustomFn() ), custom events<br />
    * firing events works for elements<br />
    * toggled and flashed events (removed after first fire)<br />
    * tested on (IE6-7, Firefox2/3, Safari, Opera, Chrome)
</p></blockquote>
<p>Isn't event sugar a solved problem? Daniel replies:</p>
<blockquote><p>
    * Occasionally, I need a lightweight library that will work with other frameworks. Frameworks such as jQuery which don't extend the native prototype and therefor have no compatibility issues are not modular enough to meet my needs.<br />
    * No event implementation is perfect. So I took my own approach to the issue and created my dream package.<br />
    * This implementation could serve as a model for others.
</p></blockquote>
<p>The syntax is straight-forward:</p>
<div class="igBar"><a href="javascript:showCodeTxt('javascript-26');">PLAIN TEXT</a></div>
<div class="syntax_hilite"><span style="color:#000000; font-weight:bold;">JAVASCRIPT:</span>
<div id="javascript-26">
<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;">QEvent.<span style="color: #006600;">add</span><span style="color:#006600; font-weight:bold;">&#40;</span>window, <span style="color: #3366CC;">'domready'</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:#006600; font-weight:bold;">&#125;</span> <span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// custom event</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">QEvent.<span style="color: #006600;">add</span><span style="color:#006600; font-weight:bold;">&#40;</span>kitty, <span style="color: #3366CC;">'purr'</span>, onKittyPurr<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;">QEvent.<span style="color: #006600;">fire</span><span style="color:#006600; font-weight:bold;">&#40;</span>kitty, <span style="color: #3366CC;">'purr'</span>, <span style="color: #3366CC;">'Sandy'</span><span style="color:#006600; font-weight:bold;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="color:#000000; font-family: 'Courier New', Courier, monospace; font-weight: normal;">QEvent.<span style="color: #006600;">remove</span><span style="color:#006600; font-weight:bold;">&#40;</span>document.<span style="color: #006600;">getElementById</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color: #3366CC;">'testKeyEnter'</span><span style="color:#006600; font-weight:bold;">&#41;</span>, <span style="color: #3366CC;">'keyenter'</span>, keyenter<span style="color:#006600; font-weight:bold;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/ajaxian?a=hP8Kt2.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=hP8Kt2.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=0rLrzz.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=0rLrzz.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=GTfVoj.p"><img src="http://feeds.feedburner.com/~f/ajaxian?i=GTfVoj.p" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/qevent-small-portable-event-library/feed</wfw:commentRss>
		<feedburner:origLink>http://ajaxian.com/archives/qevent-small-portable-event-library</feedburner:origLink></item>
		<item>
		<title>What Causes the Long-Running Script Warning?</title>
		<link>http://feeds.feedburner.com/~r/ajaxian/~3/504386993/what-causes-the-long-running-script-warning</link>
		<comments>http://ajaxian.com/archives/what-causes-the-long-running-script-warning#comments</comments>
		<pubDate>Tue, 06 Jan 2009 15:33:18 +0000</pubDate>
		<dc:creator>Ben Galbraith</dc:creator>
		
		<category><![CDATA[Browsers]]></category>

		<category><![CDATA[Front Page]]></category>

		<category><![CDATA[JavaScript]]></category>

		<category><![CDATA[Performance]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=5567</guid>
		<description><![CDATA[
Nicholas Zakas decided to dive deep on everyone's favorite sign that you've done something wrong:

Few web developers truly understand what triggers the long-running script dialog in various browsers, including myself. So I decided to sit down and figure out under what circumstances you’ll see this dialog. There are basically two different ways of determining that [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://ajaxian.com/wp-content/uploads/ie_dialog.png" alt="" title="Stop Running the Script" width="444" height="197" class="alignnone size-full wp-image-5568" /></p>
<p>Nicholas Zakas decided to <a href="http://www.nczonline.net/blog/2009/01/05/what-determines-that-a-script-is-long-running/">dive deep on everyone's favorite sign that you've done something wrong</a>:</p>
<blockquote><p>
Few web developers truly understand what triggers the long-running script dialog in various browsers, including myself. So I decided to sit down and figure out under what circumstances you’ll see this dialog. There are basically two different ways of determining that a script is long-running. First is by tracking how many statements have been executed and second is by timing how long the script takes to execute. Not surprisingly, the approach each browser takes is slightly different.
</p></blockquote>
<p>He finds that Internet Explorer's warning is based on total statements executed (5 million, and since it's Windows, you can change it via the Registry), Firefox and Safari time the actual script time (10 and 5 seconds, respectively), Chrome is a bit of a mystery, and Opera doesn't appear to have such a mechanism (and interestingly, appears to put its UI on a different thread than page rendering / script execution).</p>
<p>Regardless of the details, the lesson remains the same (again quoting from Nicholas' post):</p>
<blockquote><p>
Brendan Eich, creator of JavaScript, is quoted as saying, “[JavaScript] that executes in whole seconds is probably doing something wrong…” My personal threshold is actually much smaller: no script should take longer than 100ms to execute on any browser at any time. If it takes any longer than that, the processing must be split up into smaller chunks.
</p></blockquote>
<p>An interesting read!</p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/ajaxian?a=YUM48o.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=YUM48o.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=lwVB3E.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=lwVB3E.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=Rg76Dc.p"><img src="http://feeds.feedburner.com/~f/ajaxian?i=Rg76Dc.p" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/what-causes-the-long-running-script-warning/feed</wfw:commentRss>
		<feedburner:origLink>http://ajaxian.com/archives/what-causes-the-long-running-script-warning</feedburner:origLink></item>
		<item>
		<title>More Ajax Experience Videos: JSON and JavaScript</title>
		<link>http://feeds.feedburner.com/~r/ajaxian/~3/504380529/more-ajax-experience-videos-json-and-javascript</link>
		<comments>http://ajaxian.com/archives/more-ajax-experience-videos-json-and-javascript#comments</comments>
		<pubDate>Tue, 06 Jan 2009 15:23:59 +0000</pubDate>
		<dc:creator>Ben Galbraith</dc:creator>
		
		<category><![CDATA[Front Page]]></category>

		<category><![CDATA[Screencast]]></category>

		<category><![CDATA[The Ajax Experience]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=5565</guid>
		<description><![CDATA[Following-up from our previous posting, we've got some more Ajax Experience videos. This post's theme is JavaScript and JSON:
Advanced Animation &#038; Physics in JavaScript with Paul Bakaus
Forget about Web standards and go way beyond the usual capabilities of Web scripting languages. Learn how to create stunning effects using canvas/svg/vml, how to control animated graphics in [...]]]></description>
			<content:encoded><![CDATA[<p>Following-up from our previous posting, we've got some more Ajax Experience videos. This post's theme is JavaScript and JSON:</p>
<p><b>Advanced Animation &#038; Physics in JavaScript with Paul Bakaus</b></p>
<p><i>Forget about Web standards and go way beyond the usual capabilities of Web scripting languages. Learn how to create stunning effects using canvas/svg/vml, how to control animated graphics in JavaScript, and how to merge all kinds of standards and technologies to create a whole new world of possibilities. Using Paul's latest project as an example, he shows you how to adapt the things he talks about into new projects, featuring his new JavaScript game engine. Paul demonstrates how to control animated graphics in the browser, how to scale and rotate elements smoothly, and how to combine canvas, svg and filters with CSS to adapt new standards in browsers that don't support them. See how to move physics from the real world to the Web browser. In this session you learn how to: Create a walking animated character; Replicate new standards using existing technologies; Combine new standards to create a new experience. </i></p>
<p><object id="1828663479" class="BrightcoveExperience"><param name="bgcolor" value="#FFFFFF"></param><param name="width" value="470"></param><param name="height" value="392"></param><param name="playerID" value="1842749445"></param><param name="publisherID" value="1596741613"></param><param name="isVid" value="true"></param><param name="videoID" value="1828663479"></param></object></p>
<p><b>Adv JavaScript: Closures, Prototypes, Demystified with Stoyan Stefanov</b></p>
<p><i>The times when JavaScript was just a toy language for making image rollovers and other, more irritating effects, are fortunately long gone. Today developers build much more sophisticated and complex applications be they for the Web (GMail), the desktop (Firefox extensions) or the server. JavaScript's prototypal nature makes its object-oriented features really different than "classical" languages like Java and C++, and we have to make sure we use the right tool the right way. In this talk you'll learn about JavaScript's most commonly misunderstood features and how you could put them to a good use.</i></p>
<p><object id="1828032421" class="BrightcoveExperience"><param name="bgcolor" value="#FFFFFF"></param><param name="width" value="470"></param><param name="height" value="392"></param><param name="playerID" value="1842749445"></param><param name="publisherID" value="1596741613"></param><param name="isVid" value="true"></param><param name="videoID" value="1828032421"></param></object></p>
<p><b>Practical Functional JavaScript with Oliver Steele</b></p>
<p><i>This session covers how to use functional programming with JavaScript in real-life applications to implement client-side asynchronous processing, scheduling, and concurrency. These are complex areas that are difficult to think about or implement using straight object-oriented techniques, and become simpler with a handful of idioms that this talk demonstrates. Ajax developers (JavaScript or ActionScript) who are building applications that feature both ambient and reactive functionality, and that perform sophisticated tasks such as precompute display state or prefetch data, will benefit from this session. This session provides: A firmer understanding of closures and when to use them; Insight into implementing time-based and threadlike client-side behavior in the browser. </i></p>
<p><object id="1830067682" class="BrightcoveExperience"><param name="bgcolor" value="#FFFFFF"></param><param name="width" value="470"></param><param name="height" value="392"></param><param name="playerID" value="1842749445"></param><param name="publisherID" value="1596741613"></param><param name="isVid" value="true"></param><param name="videoID" value="1830067682"></param></object></p>
<p><b>Applied JSON: HTTP REST, Ajax Databases &#038; Beyond with Kris Zip</b></p>
<p><i>JSON has proven to be a very easy to use, yet immensely powerful data interchange protocol. However, by itself JSON lacks a number of important expressibility capabilities and efficient client/server data interaction must usually be customized. This session looks at how we can use various open specifications built on JSON to standardize and automate this interaction. We examine REST JSON, JSPON, and JSONPath. We also explore the capabilities of Ajax-accessible REST databases. The dynamic nature of non-relational databases can provide significant benefits for rapidly developing applications and providing JavaScript object persistence. Client-side code can directly participate in database interaction, simplifying the typical Web application stack. CouchDB, Persevere, and ActiveResource utilize a JSON REST interface. In this session, we learn how to interact with these simple interfaces and how to use JSONPath as a query language for JSON data stores. We see how these dynamic databases utilize JavaScript on the server for a consistent client/server JavaScript environment. We look at how Ajax databases affect security and provide an infrastructure for more secure Web applications. Finally, we cover JSON Referencing conventions as a mechanism for further expressing duplicate, circular, and cross-site referencing. Via a live demonstration, see how to use the Persevere open source tools to utilize these extensions to provide RESTful storage and server-side JavaScript. In this session you learn how to: Query JSON data with JSONPath; Use Persevere to provide a powerful persistence object store for JavaScript; Understand how JSON and the JSPON browser interacts with the Persevere object server; Employ JSON extensions and tools to enable open communication formats that can be used for rich and robust serialized object interaction between clients and servers with full object graph descriptiveness.</i></p>
<p><object id="1832200712" class="BrightcoveExperience"><param name="bgcolor" value="#FFFFFF"></param><param name="width" value="470"></param><param name="height" value="392"></param><param name="playerID" value="1842749445"></param><param name="publisherID" value="1596741613"></param><param name="isVid" value="true"></param><param name="videoID" value="1832200712"></param></object></p>
<p><b>JSON SOA-based Client/Server App Dev with Kris Zip</b></p>
<p><i>JSON has proven to be a very easy to use, yet immensely powerful data interchange protocol. However, by itself JSON lacks a number of important expressibility capabilities and efficient client/server data interaction must usually be customized. This session looks at how we can use various open specifications built on JSON to standardize and<br />
automate this interaction.<br />
We examine REST JSON, JSPON, and JSONPath. We also explore the capabilities of Ajax-accessible REST databases. The dynamic nature of non-relational databases can<br />
provide significant benefits for rapidly developing applications and providing JavaScript object persistence. Client-side code can directly participate in database interaction, simplifying the typical Web application stack. CouchDB, Persevere, and ActiveResource utilize a JSON REST interface. In this session, we learn how to interact with these simple interfaces and how to use JSONPath as a query language for JSON data stores.<br />
We see how these dynamic databases utilize JavaScript on the server for a consistent client/server JavaScript environment. We look at how Ajax databases affect security and provide an infrastructure for more secure Web applications. Finally, we cover JSON Referencing conventions as a mechanism for further expressing duplicate, circular, and cross-site referencing. Via a live demonstration, see how to use the Persevere open source tools to utilize these extensions to provide RESTful storage and server-side JavaScript.<br />
In this session you learn how to:<br />
Query JSON data with JSONPath;<br />
Use Persevere to provide a powerful persistence object store for JavaScript;<br />
Understand how JSON and the JSPON browser interacts with the Persevere object server;<br />
Employ JSON extensions and tools to enable open communication formats that can be used for rich and robust serialized object interaction between clients and servers with full object graph descriptiveness.</i></p>
<p><object id="1829999878" class="BrightcoveExperience"><param name="bgcolor" value="#FFFFFF"></param><param name="width" value="470"></param><param name="height" value="392"></param><param name="playerID" value="1842749445"></param><param name="publisherID" value="1596741613"></param><param name="isVid" value="true"></param><param name="videoID" value="1829999878"></param></object></p>
<p><script language="JavaScript" type="text/javascript" src="http://admin.brightcove.com/js/BrightcoveExperiences.js"></script></p>
<div class="feedflare">
<a href="http://feeds.feedburner.com/~f/ajaxian?a=Wgdnvq.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=Wgdnvq.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=Eqbv0D.P"><img src="http://feeds.feedburner.com/~f/ajaxian?i=Eqbv0D.P" border="0"></img></a> <a href="http://feeds.feedburner.com/~f/ajaxian?a=PhG0Js.p"><img src="http://feeds.feedburner.com/~f/ajaxian?i=PhG0Js.p" border="0"></img></a>
</div>]]></content:encoded>
			<wfw:commentRss>http://ajaxian.com/archives/more-ajax-experience-videos-json-and-javascript/feed</wfw:commentRss>
		<feedburner:origLink>http://ajaxian.com/archives/more-ajax-experience-videos-json-and-javascript</feedburner:origLink></item>
		<item>
		<title>Special Offer for Ajaxian Readers: TheServerSide Java Symposium</title>
		<link>http://feeds.feedburner.com/~r/ajaxian/~3/503689597/special-offer-for-ajaxian-readers-theserverside-java-symposium</link>
		<comments>http://ajaxian.com/archives/special-offer-for-ajaxian-readers-theserverside-java-symposium#comments</comments>
		<pubDate>Mon, 05 Jan 2009 20:46:32 +0000</pubDate>
		<dc:creator>tberardi</dc:creator>
		
		<category><![CDATA[Conferences]]></category>

		<category><![CDATA[Front Page]]></category>

		<category><![CDATA[Java]]></category>

		<category><![CDATA[Add new tag]]></category>

		<guid isPermaLink="false">http://ajaxian.com/?p=5562</guid>
		<description><![CDATA[Hello Ajaxians!
We're inviting all of the Java developers out there to an event organized by our sister site, TheServerSide.com, the Web's largest enterprise Java community. As a member of Ajaxian, you save an extra $100 off the registration fee with the code AJAXIAN. (Register before January 16 to save a total of $400 and get [...]]]></description>
			<content:encoded><![CDATA[<p>Hello Ajaxians!</p>
<p>We're inviting all of the Java developers out there to an event organized by our sister site, TheServerSide.com, the Web's largest enterprise Java community. As a member of Ajaxian, you save an extra $100 off the registration fee with the code <strong>AJAXIAN</strong>. (<a href="http://javasymposium.techtarget.com/html/register.html?Offer=JSajaxpost105">Register</a> before January 16 to save a total of $400 and get a free book!)</p>
<p><a href="http://javasymposium.techtarget.com/?Offer=JSajaxpost105">TheServerSide Java Symposium</a> explores current and emerging trends in enterprise Java and how they apply to your daily work. Choose from over 45 technical sessions on new technologies, best practices and practical tips from some of the brightest minds in the industry, including Rod Johnson, Neal Ford, Scott Davis and <a href="http://javasymposium.techtarget.com/html/speakers.html?Offer=JSajaxpost105">35 Java experts</a>.</p>
<p>Tracks include <a href="http://javasymposium.techtarget.com/html/frameworks.html?Offer=JSajaxpost105">Frameworks</a>, <a href="http://javasymposium.techtarget.com/html/architecture.html?Offer=JSajaxpost105">Architecture</a>, <a href="http://javasymposium.techtarget.com/html/soa.html?Offer=JSajaxpost105">SOA</a>, <a href="http://javasymposium.techtarget.com/html/language.html?Offer=JSajaxpost105">Language</a>, <a href="http://javasymposium.techtarget.com/html/tools_tech.html?Offer=JSajaxpost105">Tools and Techniques</a>.</p>
<p>Project and spec leads dive into:</p>
<ul>
<li>The latest features of Spring, JSF, Wicket, Tapestry, Google Web Toolkit and more frameworks.</li>
<li>New Java language features, such as EJB 3.1, Glassfish and JavaFX</li>
<li>Popular open source tools, including Eclipse, Maven, Lucene, soapUI, HtmlUnit for testing SOA, Ajax and RIAs.</li>
<li>Expert recommendations on the use of Groovy, Scala and JRuby</li>
<li>Building and maintaining a large-scale SOA</li>
<li>How to create and consume RESTful Web Services.</li>
<li>How and when to use an ESB.</li>
<li>Best practices and tools for optimizing performance and scalability.</li>
<li>And much more!</li>
</ul>
<p>View TheServerSide Java Symposium <a href="http://javasymposium.techtarget.com/html/agenda.html?Offer=JSajaxpost105">agenda</a> to see all of the sessions being presented. <a href="http://javasymposium.techtarget.com/html/register.html?Offer=JSajaxpost10