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

<channel>
	<title>Topper's Blog &#187; User Experience</title>
	<atom:link href="http://blog.toppingdesign.com/category/user-experience/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.toppingdesign.com</link>
	<description>Usability, Information Management, Rails, Javascript &#38; (oh no) Web 2.0</description>
	<lastBuildDate>Tue, 24 Jan 2012 19:52:28 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Review:  Byline app for iPhone</title>
		<link>http://blog.toppingdesign.com/2010/06/10/review-byline-app-for-iphone/</link>
		<comments>http://blog.toppingdesign.com/2010/06/10/review-byline-app-for-iphone/#comments</comments>
		<pubDate>Thu, 10 Jun 2010 13:41:17 +0000</pubDate>
		<dc:creator>Topper</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[General Web work - technical]]></category>
		<category><![CDATA[User Experience]]></category>

		<guid isPermaLink="false">http://blog.toppingdesign.com/?p=214</guid>
		<description><![CDATA[The Byline reader for iPhone is awesome. It syncs your google reader account into an offline cache that is simply perfect for the subway. I am currently using the new free version which is ad supported. The ads are unobtrusive and the app just seems to work. I did have one problem that after reading [...]]]></description>
			<content:encoded><![CDATA[<p>The <a href="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?url=aHR0cDovL3d3dy5waGFudG9tZmlzaC5jb20vYnlsaW5lLmh0bWw=">Byline reader for iPhone</a> is awesome.  It syncs your google reader account into an offline cache that is simply perfect for the subway.  I am currently using the new free version which is ad supported. The ads are unobtrusive and the app just seems to work.</p>
<p>I did have one problem that after reading several articles I would keep getting a white screen.  I have hundreds of feeds with thousands of articles and interrupted a sync &#8211; so maybe that was the cause.</p>
<p>The app is so good I missed two subway stops on the way to work.  Woops! But I recommend anyone who has an iPhone and a Google Reader account to get this app.</p>
<p><em>I am in no way affiliated with the Byline team.</em></p>
 <img src="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=214" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://blog.toppingdesign.com/2010/06/10/review-byline-app-for-iphone/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Game Theory</title>
		<link>http://blog.toppingdesign.com/2010/02/23/game-theory/</link>
		<comments>http://blog.toppingdesign.com/2010/02/23/game-theory/#comments</comments>
		<pubDate>Tue, 23 Feb 2010 12:31:54 +0000</pubDate>
		<dc:creator>Topper</dc:creator>
				<category><![CDATA[business]]></category>
		<category><![CDATA[General Web work - technical]]></category>
		<category><![CDATA[Social Web]]></category>
		<category><![CDATA[User Experience]]></category>

		<guid isPermaLink="false">http://blog.toppingdesign.com/2010/02/23/game-theory/</guid>
		<description><![CDATA[Wii Games &#8211; E3 2010 &#8211; Guitar Hero 5 You can skip the last 10 minutes or so when he dives into this odd crazy future&#8230; but the beginning part really makes you think about how you can add game theory to any business you&#8217;re in. I really like the idea of experience points and [...]]]></description>
			<content:encoded><![CDATA[<p><object classId="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="480" height="418" id="VideoPlayerLg44277"><param name="movie" value="http://g4tv.com/lv3/44277" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><embed src="http://g4tv.com/lv3/44277" type="application/x-shockwave-flash" name="VideoPlayer" width="480" height="382" allowScriptAccess="always" allowFullScreen="true" /></object>
<div style="margin:0;text-align:center;width:480px;font-family:Arial,sans-serif;font-size:12px;color:#FF9B00;"><a href="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?url=aHR0cDovL2c0dHYuY29tL2dhbWVzL3dpaS9pbmRleA==" style=\"color:#FF9B00;\" target=\"_blank\">Wii Games</a> &#8211; <a href="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?url=aHR0cDovL2c0dHYuY29tL2UzMjAxMA==" style=\"color:#FF9B00;\" target=\"_blank\">E3 2010</a> &#8211; <a href="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?url=aHR0cDovL2c0dHYuY29tL2dhbWVzL3BzMy82MTg5OS9ndWl0YXItaGVyby01L2luZGV4" style=\"color:#FF9B00;\" target=\"_blank\">Guitar Hero 5</a></div>
<p>You can skip the last 10 minutes or so when he dives into this odd crazy future&#8230; but the beginning part really makes you think about how you can add game theory to any business you&#8217;re in.  I really like the idea of experience points and leveling up for class. That&#8217;s something any event-based business could really get into.</p>
<p>h/t Andrew Holz. via <a href="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?url=aHR0cDovL2Z1cnkuY29tLzIwMTAvMDIvamVzc2Utc2hlbGxzLW1pbmRibG93aW5nLXRhbGstb24tdGhlLWZ1dHVyZS1vZi1nYW1lcy1kaWNlLTIwMTAv">fury.com</a></p>
 <img src="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=181" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://blog.toppingdesign.com/2010/02/23/game-theory/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Excellent UXMatters artice: &#8220;First, Do No Harm&#8221;</title>
		<link>http://blog.toppingdesign.com/2009/11/16/excellent-uxmatters-artice-first-do-no-harm/</link>
		<comments>http://blog.toppingdesign.com/2009/11/16/excellent-uxmatters-artice-first-do-no-harm/#comments</comments>
		<pubDate>Mon, 16 Nov 2009 18:31:18 +0000</pubDate>
		<dc:creator>Topper</dc:creator>
				<category><![CDATA[business]]></category>
		<category><![CDATA[General]]></category>
		<category><![CDATA[Social Web]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[article]]></category>
		<category><![CDATA[blog]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[experience]]></category>
		<category><![CDATA[resource]]></category>
		<category><![CDATA[ui]]></category>
		<category><![CDATA[user interface]]></category>
		<category><![CDATA[ux]]></category>
		<category><![CDATA[uxmatters]]></category>

		<guid isPermaLink="false">http://blog.toppingdesign.com/2009/11/16/excellent-uxmatters-artice-first-do-no-harm/</guid>
		<description><![CDATA[First, Do No Harm :: UXmatters Being able to make the necessary tradeoffs between conflicting constraints takes skill. Iâ€™ve always viewed constraints as my friends. They make me more creative. By thoroughly understanding the limitations that constrain a design solution, I can make the right tradeoffs and come up with the best design solution possible [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?url=aHR0cDovL25ldy51eG1hdHRlcnMuY29tL210L2FyY2hpdmVzLzIwMDkvMTEvZmlyc3QtZG8tbm8taGFybS5waHA=">First, Do No Harm :: UXmatters</a></p>
<blockquote><p>Being able to make the necessary tradeoffs between conflicting constraints takes skill. Iâ€™ve always viewed constraints as my friends. They make me more creative. By thoroughly understanding the limitations that constrain a design solution, I can make the right tradeoffs and come up with the best design solution possible under those constraints. Plus, balancing different constraints often forces me to think outside the box, so inspires innovative design solutions.</p></blockquote>
<p>Excellent and long article talking about various user-time-wasting or user-annoying things to avoid in your UI.</p>
<div class="zemanta-pixie"><img class="zemanta-pixie-img" alt="" src="http://img.zemanta.com/pixy.gif?x-id=293b20fc-9c66-817c-8e7e-7f9a48de4699" /></div>
 <img src="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=177" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://blog.toppingdesign.com/2009/11/16/excellent-uxmatters-artice-first-do-no-harm/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Seth Godin lists the questions to ask before building a website</title>
		<link>http://blog.toppingdesign.com/2009/09/18/seth-godin-lists-the-questions-to-ask-before-building-a-website/</link>
		<comments>http://blog.toppingdesign.com/2009/09/18/seth-godin-lists-the-questions-to-ask-before-building-a-website/#comments</comments>
		<pubDate>Fri, 18 Sep 2009 16:25:12 +0000</pubDate>
		<dc:creator>Topper</dc:creator>
				<category><![CDATA[business]]></category>
		<category><![CDATA[General]]></category>
		<category><![CDATA[Social Web]]></category>
		<category><![CDATA[User Experience]]></category>

		<guid isPermaLink="false">http://blog.toppingdesign.com/2009/09/18/seth-godin-lists-the-questions-to-ask-before-building-a-website/</guid>
		<description><![CDATA[Seth&#8217;s Blog: Things to ask before you redo your website I think these are perhaps the tenth and eleventh questions you should ask, not the first two. Here&#8217;s my list of difficult and important questions you have to answer before you spend a nickel:]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?url=aHR0cDovL3NldGhnb2Rpbi50eXBlcGFkLmNvbS9zZXRoc19ibG9nLzIwMDkvMDkvdGhpbmdzLXRvLWFzay1iZWZvcmUteW91LXJlZG8teW91ci13ZWJzaXRlLmh0bWw=">Seth&#8217;s Blog: Things to ask before you redo your website</a></p>
<blockquote><p>I think these are perhaps the tenth and eleventh questions you should ask, not the first two. Here&#8217;s my list of difficult and important questions you have to answer before you spend a nickel:
</p></blockquote>
<div class="zemanta-pixie"><img class="zemanta-pixie-img" alt="" src="http://img.zemanta.com/pixy.gif?x-id=766f2bbc-b3d1-81aa-ac41-b04233dfeb05" /></div>
 <img src="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=172" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://blog.toppingdesign.com/2009/09/18/seth-godin-lists-the-questions-to-ask-before-building-a-website/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Mamoo released as open source</title>
		<link>http://blog.toppingdesign.com/2009/03/15/mamoo-released-as-open-source/</link>
		<comments>http://blog.toppingdesign.com/2009/03/15/mamoo-released-as-open-source/#comments</comments>
		<pubDate>Mon, 16 Mar 2009 02:50:28 +0000</pubDate>
		<dc:creator>Topper</dc:creator>
				<category><![CDATA[General Web work - technical]]></category>
		<category><![CDATA[User Experience]]></category>

		<guid isPermaLink="false">http://blog.toppingdesign.com/2009/03/15/mamoo-released-as-open-source/</guid>
		<description><![CDATA[I just put the Motionbox Advanced Model Observer Observer (Mamoo) up on Github. It's a light-weight (13k), but fairly powerful framework for javascript built on top of Prototype and the Motionbox EventHandler. It's fairly well documented and has a full suite of specs written in ScrewUnit. Mamoo let's you stop thinking about the "glue code" [...]]]></description>
			<content:encoded><![CDATA[<p>I just put the <a href="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?url=aHR0cDovL2dpdGh1Yi5jb20vdG9ib3dlcnMvbWFtb28vdHJlZS9tYXN0ZXI=">Motionbox Advanced Model Observer Observer (Mamoo) up on Github</a>. It's a light-weight (13k), but fairly powerful framework for javascript built on top of <a href="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?url=aHR0cDovL3Byb3RvdHlwZWpzLm9yZy8=">Prototype</a> and the <a href="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?url=aHR0cDovL2dpdGh1Yi5jb20vdG9ib3dlcnMvbW90aW9uYm94LWV2ZW50aGFuZGxlci90cmVlL21hc3Rlcg==">Motionbox EventHandler</a>.</p>
<p>It's <a href="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?url=aHR0cDovL3RvYm93ZXJzLmdpdGh1Yi5jb20vbWFtb28v">fairly well documented</a> and has a full <a href="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?url=aHR0cDovL2dpdGh1Yi5jb20vdG9ib3dlcnMvbWFtb28vdHJlZS8yODAzY2Q0ZjUwYzBmZjZlN2Y0ZDQ0NzA1YWY3ZGE0NmRmMDcyNGIyL3NwZWNzL3NwZWNz">suite of specs</a> written in <a href="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?url=aHR0cDovL2dpdGh1Yi5jb20vdG9ib3dlcnMvc2NyZXctdW5pdC90cmVlL21hc3Rlcg==">ScrewUnit</a>.</p>
<p>Mamoo let's you stop thinking about the "glue code" you need on a client-side app - and start thinking like "when this happens, I want this to happen." - Event driven architecture in JS.</p>
<p>Checkout the <a href="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?url=aHR0cDovL2dpdGh1Yi5jb20vdG9ib3dlcnMvbWFtb28vYmxvYi8yODAzY2Q0ZjUwYzBmZjZlN2Y0ZDQ0NzA1YWY3ZGE0NmRmMDcyNGIyL1JFQURNRS5tYXJrZG93bg==">readme for a romp through most of the features</a>.</p>
<p>To whet your appetite, here's a really small, but useful app written with Mamoo.</p>
<div class="igBar"><span id="ljavascript-2"><a href="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?url=Iw==" onclick=\"javascript:showPlainTxt('javascript-2'); return false;\">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">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="font-family: 'Courier New', Courier, monospace; font-weight: normal;">Message = MBX.<span style="color: #006600;">JsModel</span>.<span style="color: #006600;">create</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"Message"</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">MBX.<span style="color: #006600;">MessageView</span> = MBX.<span style="color: #006600;">JsView</span>.<span style="color: #006600;">create</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; model: Message,</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; onInstanceCreate: <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #66cc66;">&#40;</span>message<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> li = <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #006600;">buildLi</span><span style="color: #66cc66;">&#40;</span>message<span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; $<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"message_list"</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">insert</span><span style="color: #66cc66;">&#40;</span>li<span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span>,</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; buildLi: <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #66cc66;">&#40;</span>message<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> li = <span style="color: #003366; font-weight: bold;">new</span> Element<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">"li"</span>, <span style="color: #66cc66;">&#123;</span> id: message.<span style="color: #006600;">primaryKey</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; li.<span style="color: #006600;">update</span><span style="color: #66cc66;">&#40;</span>message.<span style="color: #006600;">get</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'body'</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; li.<span style="color: #006600;">updatesOn</span><span style="color: #66cc66;">&#40;</span>message, <span style="color: #3366CC;">"body"</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">return</span> li;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// This will add the ui element</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> message = Message.<span style="color: #006600;">create</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span> body: <span style="color: #3366CC;">"this is my body!"</span> <span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// and if you change body, the ui will automatically update as well</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">message.<span style="color: #006600;">set</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'body'</span>, <span style="color: #3366CC;">"some other body"</span><span style="color: #66cc66;">&#41;</span>; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Assuming you have an ol with the id of "message_list" in your html page, now everytime you create a message, it'll get populated into the DOM.</p>
<p>I also put together a 15minute screencast that gives you a quick demo of a bunch of the features of Mamoo.</p>
<p><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="416" height="234" id="mbox_player_3099deb21614e2c2be"><param name="movie" value="http://player.motionbox.com/VideoPlayer.swf?" /><param name="allowScriptAccess" value="always" /><param name="allowFullscreen" value="true" /><param value="video_uid=3099deb21614e2c2be&#038;security_token=prod1.6f067ddd4187eb15&#038;type=sd" name="flashvars" /><embed src="http://player.motionbox.com/VideoPlayer.swf?" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" width="416" height="234" allowFullscreen="true" allowScriptAccess="always" name="mbox_player_3099deb21614e2c2be" flashvars="video_uid=3099deb21614e2c2be&#038;security_token=prod1.6f067ddd4187eb15&#038;type=sd"></embed></object></p>
<p>Nifty?</p>
 <img src="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=163" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://blog.toppingdesign.com/2009/03/15/mamoo-released-as-open-source/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Beauty is the most important thing in software.</title>
		<link>http://blog.toppingdesign.com/2009/01/07/beauty-is-the-most-important-thing-in-software/</link>
		<comments>http://blog.toppingdesign.com/2009/01/07/beauty-is-the-most-important-thing-in-software/#comments</comments>
		<pubDate>Wed, 07 Jan 2009 23:02:26 +0000</pubDate>
		<dc:creator>Topper</dc:creator>
				<category><![CDATA[business]]></category>
		<category><![CDATA[General Web work - technical]]></category>
		<category><![CDATA[User Experience]]></category>

		<guid isPermaLink="false">http://blog.toppingdesign.com/2009/01/07/beauty-is-the-most-important-thing-in-software/</guid>
		<description><![CDATA[Beauty is more important in computing than anywhere else in technology because software is so complicated. Beauty is the ultimate defense against complexity. David Gelernter, Machine Beauty: Elegance and the Heart of Technology Amen. Amen. I hate it when people use the argument: "but this worked." h/t: A design and usability blog: Signal vs. Noise [...]]]></description>
			<content:encoded><![CDATA[<blockquote><p>
Beauty is more important in computing than anywhere else in technology because software is so complicated. Beauty is the ultimate defense against complexity.
</p></blockquote>
<p><cite><br />
David Gelernter, Machine Beauty: Elegance and the Heart of Technology<br />
</cite></p>
<p>Amen. Amen.</p>
<p>I hate it when people use the argument:  "but this worked."</p>
<p>h/t: <a href="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?url=aHR0cDovL3d3dy4zN3NpZ25hbHMuY29tL3N2bi9wb3N0cy8xNTA0LWJlYXV0eS1pcy1tb3JlLWltcG9ydGFudC1pbi1jb21wdXRpbmctdGhhbg==">A design and usability blog: Signal vs. Noise (by 37signals)</a></p>
 <img src="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=155" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://blog.toppingdesign.com/2009/01/07/beauty-is-the-most-important-thing-in-software/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Pownce is shutting down</title>
		<link>http://blog.toppingdesign.com/2008/12/02/pownce-is-shutting-down/</link>
		<comments>http://blog.toppingdesign.com/2008/12/02/pownce-is-shutting-down/#comments</comments>
		<pubDate>Tue, 02 Dec 2008 15:34:04 +0000</pubDate>
		<dc:creator>Topper</dc:creator>
				<category><![CDATA[business]]></category>
		<category><![CDATA[General]]></category>
		<category><![CDATA[Social Web]]></category>
		<category><![CDATA[User Experience]]></category>

		<guid isPermaLink="false">http://blog.toppingdesign.com/2008/12/02/pownce-is-shutting-down/</guid>
		<description><![CDATA[http://www.sixapart.com/pownce/pro.html People are saying this was a twitter rival. I think their product could have been great with a slight twist on marketing - making it for "small group file and links sharing" rather than micro-blogging... they already had the features - but didn't push it in that direction.]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?url=aHR0cDovL3d3dy5zaXhhcGFydC5jb20vcG93bmNlL3Byby5odG1s">http://www.sixapart.com/pownce/pro.html</a></p>
<p>People are saying this was a twitter rival.  I think their product<br />
could have been great with a slight twist on marketing - making it for<br />
"small group file and links sharing" rather than micro-blogging...<br />
they already had the features - but didn't push it in that direction.</p>
 <img src="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=150" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://blog.toppingdesign.com/2008/12/02/pownce-is-shutting-down/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Letting users know about OpenID</title>
		<link>http://blog.toppingdesign.com/2008/10/15/letting-users-know-about-openid/</link>
		<comments>http://blog.toppingdesign.com/2008/10/15/letting-users-know-about-openid/#comments</comments>
		<pubDate>Wed, 15 Oct 2008 18:48:16 +0000</pubDate>
		<dc:creator>Topper</dc:creator>
				<category><![CDATA[business]]></category>
		<category><![CDATA[General]]></category>
		<category><![CDATA[General Web work - technical]]></category>
		<category><![CDATA[Social Web]]></category>
		<category><![CDATA[User Experience]]></category>

		<guid isPermaLink="false">http://blog.toppingdesign.com/2008/10/15/letting-users-know-about-openid/</guid>
		<description><![CDATA[Yahoo recently did some research on OpenID. The results were pretty poor, but I'm not surprised. I think the big problem with OpenID right now is that we're all thinking about it like geeks. The main benefit to the user is that he/she doesn't have to sign up for yet another account - or give [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?url=aHR0cDovL2RldmVsb3Blci55YWhvby5uZXQvYmxvZy9hcmNoaXZlcy8yMDA4LzEwL29wZW5faWRfcmVzZWFyY2guaHRtbA==">Yahoo recently did some research on OpenID</a>. The results were pretty poor, but I'm not surprised.</p>
<p>I think the big problem with OpenID right now is that we're all thinking about it like geeks.  The main benefit to the user is that he/she doesn't have to sign up for yet another account - or give out a potentially sensitive password (considering most users only use 1 password everywhere).</p>
<p>I don't know what the percentage is, but I would bet nearly all (US) users have accounts at one of yahoo, aol, google (and maybe a handful of other openID providers - google is only supported through an AppEngine app).</p>
<p>I think the UI below would make openID more understandable to more users.  You have any thoughts?</p>
<p><a href="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?url=aHR0cDovL2Jsb2cudG9wcGluZ2Rlc2lnbi5jb20vd3AtY29udGVudC91cGxvYWRzLzIwMDgvMTAvb3BlbmlkX3VpLmpwZw==" title='A better openID UI?'><img src='http://blog.toppingdesign.com/wp-content/uploads/2008/10/openid_ui.jpg' alt='A better openID UI?' /></a></p>
 <img src="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=147" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://blog.toppingdesign.com/2008/10/15/letting-users-know-about-openid/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>SproutCore models</title>
		<link>http://blog.toppingdesign.com/2008/07/01/sproutcore-models/</link>
		<comments>http://blog.toppingdesign.com/2008/07/01/sproutcore-models/#comments</comments>
		<pubDate>Tue, 01 Jul 2008 13:34:50 +0000</pubDate>
		<dc:creator>Topper</dc:creator>
				<category><![CDATA[General Web work - technical]]></category>
		<category><![CDATA[User Experience]]></category>

		<guid isPermaLink="false">http://blog.toppingdesign.com/2008/07/01/sproutcore-models/</guid>
		<description><![CDATA[http://github.com/sproutit/sproutcore/wikis/sproutcore-s-modern-model-layer http://github.com/sproutit/sproutcore/wikis/sproutcore-s-modern-model-layer-part-2 http://github.com/sproutit/sproutcore/wikis/sproutcore-s-modern-model-layer-part-3 Those links (if you haven't checked 'em out) provide some nice insight into how the SproutCore team is thinking about javascript models. It's an interesting pattern of separation. Basically: In a model you use MyModel.get('blah') and MyModel.set('blah') and then (it uses ruby helpers) in a view you do something like this: PLAIN [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?url=aHR0cDovL2dpdGh1Yi5jb20vc3Byb3V0aXQvc3Byb3V0Y29yZS93aWtpcy9zcHJvdXRjb3JlLXMtbW9kZXJuLW1vZGVsLWxheWVy">http://github.com/sproutit/sproutcore/wikis/sproutcore-s-modern-model-layer</a><br />
<a href="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?url=aHR0cDovL2dpdGh1Yi5jb20vc3Byb3V0aXQvc3Byb3V0Y29yZS93aWtpcy9zcHJvdXRjb3JlLXMtbW9kZXJuLW1vZGVsLWxheWVyLXBhcnQtMg==">http://github.com/sproutit/sproutcore/wikis/sproutcore-s-modern-model-layer-part-2</a><br />
<a href="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?url=aHR0cDovL2dpdGh1Yi5jb20vc3Byb3V0aXQvc3Byb3V0Y29yZS93aWtpcy9zcHJvdXRjb3JlLXMtbW9kZXJuLW1vZGVsLWxheWVyLXBhcnQtMw==">http://github.com/sproutit/sproutcore/wikis/sproutcore-s-modern-model-layer-part-3</a></p>
<p>Those links (if you haven't checked 'em out) provide some nice insight into how the SproutCore team is thinking about javascript models.  It's an interesting pattern of separation.</p>
<p>Basically:</p>
<p>In a model you use MyModel.get('blah') and MyModel.set('blah') and then (it uses ruby helpers) in a view you do something like this:</p>
<div class="igBar"><span id="lruby-4"><a href="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?url=Iw==" onclick=\"javascript:showPlainTxt('ruby-4'); return false;\">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">RUBY:</span>
<div id="ruby-4">
<div class="ruby">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&lt;%= progress_view :progress_bar_id,</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;:minimum =&gt; <span style="color:#006666;color:#800000;">0</span>,</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;:maximum =&gt; <span style="color:#006666;color:#800000;">100</span>,</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;:indeterminate =&gt; <span style="color:#0000FF; font-weight:bold;">true</span> | <span style="color:#0000FF; font-weight:bold;">false</span>,</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;:value =&gt; <span style="color:#006666;color:#800000;">50</span>,</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;:bind =&gt; <span style="color:#006600; font-weight:bold;">&#123;</span> :value =&gt; 'MyModel.<span style="color:#9900CC;">blah</span>' <span style="color:#006600; font-weight:bold;">&#125;</span> %&gt; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>where bind is telling it to update the view everytime the value 'blah' changes.</p>
<p>It seems like a relatively simple pattern (at least for simple updates).  I'm not totally sold on SproutCore itself (and it's defacto lock-in to certain UI) but all-in-all those guys are real smart and are paving the way for real client-side javascript frameworks (not just these libraries that we have now).</p>
 <img src="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=121" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://blog.toppingdesign.com/2008/07/01/sproutcore-models/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Rails Conf: Joel Spolsky</title>
		<link>http://blog.toppingdesign.com/2008/05/30/rails-conf-joel-spolsky/</link>
		<comments>http://blog.toppingdesign.com/2008/05/30/rails-conf-joel-spolsky/#comments</comments>
		<pubDate>Fri, 30 May 2008 17:49:43 +0000</pubDate>
		<dc:creator>Topper</dc:creator>
				<category><![CDATA[business]]></category>
		<category><![CDATA[General]]></category>
		<category><![CDATA[User Experience]]></category>

		<guid isPermaLink="false">http://blog.toppingdesign.com/2008/05/30/rails-conf-joel-spolsky/</guid>
		<description><![CDATA[Joel today gave a pretty good keynote on the importance of aesthetics and technology today. He pointed to the success of Amazon's checkout page. His thought is that their checkout page is so well received because it allows users total control of the experience rather than the locked-in Step 1, Step 2, Step 3 process. [...]]]></description>
			<content:encoded><![CDATA[<p>Joel today gave a pretty good keynote on the importance of aesthetics and technology today.</p>
<p>He pointed to the success of Amazon's checkout page.  His thought is that their checkout page is so well received because it allows users total control of the experience rather than the locked-in Step 1, Step 2, Step 3 process.</p>
<p>It's an interesting idea:  allow your users to "play" in your software.  The "lipstick" becomes much less important.</p>
 <img src="http://blog.toppingdesign.com/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=104" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://blog.toppingdesign.com/2008/05/30/rails-conf-joel-spolsky/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

