<?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>Aaron As a Chimp &#187; Sachimp Labs</title>
	<atom:link href="http://sachimp.com/category/sachimp-labs/feed/" rel="self" type="application/rss+xml" />
	<link>http://sachimp.com</link>
	<description>with a typewriter</description>
	<lastBuildDate>Thu, 15 Jul 2010 00:01:37 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Why plain, vanilla, anchors are a bad idea.</title>
		<link>http://sachimp.com/2010/03/29/bad-anchors/</link>
		<comments>http://sachimp.com/2010/03/29/bad-anchors/#comments</comments>
		<pubDate>Mon, 29 Mar 2010 16:32:17 +0000</pubDate>
		<dc:creator>AaronAsAChimp</dc:creator>
				<category><![CDATA[Sachimp Labs]]></category>
		<category><![CDATA[anchors]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[UI]]></category>

		<guid isPermaLink="false">http://sachimp.com/?p=153</guid>
		<description><![CDATA[A few days ago I was testing a soon to be released site. I followed a link I had never seen before and suddenly found my self confused and disoriented. In retrospect it could&#8217;ve been the fact I had just ran into a glass door on my way in (I totally didn&#8217;t see it there). [...]]]></description>
			<content:encoded><![CDATA[<p>A few days ago I was testing a soon to be released site. I followed a link I had never seen before and suddenly found my self confused and disoriented.  In retrospect it could&#8217;ve been the fact I had just ran into a glass door on my way in (I totally didn&#8217;t see it there).</p>
<p>But, never the less, it lead me to tweet this:</p>
<p><a class="tweet" href="http://twitter.com/AaronAsAChimp/status/11090674594">GUIDELINE: Users should never &#8220;teleport&#8221; between areas of the page. This can be disorienting. Show the movement from one place to the other.</a></p>
<h3>Ice, Ice, Baby</h3>
<p>The reason why I suggested that is not because of the severe &#8220;bling&#8221; deficiency on the internet. Which, I might add, is getting worse by the day. Its, also, definitely not because I just got laid off and really need a job (see <a href="http://hire.sachimp.com/resume.html">my resume</a>). Its because its just plain <strong>bad UI design</strong>.</p>
<p>Now, don&#8217;t get me wrong. There are a lot of reasons you want link to a specific part of a document, but the way browsers implement this functionality is bad. Fortunately this is an easy fix if you use the <a href="http://flesler.blogspot.com/2007/10/jqueryscrollto.html">scrollTo jQuery plugin</a></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;a[href^='#']&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> element <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">hash</span><span style="color: #339933;">;</span>
		e.<span style="color: #660066;">preventDefault</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		$.<span style="color: #660066;">scrollTo</span><span style="color: #009900;">&#40;</span>element<span style="color: #339933;">,</span> <span style="color: #CC0000;">1000</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>
			offset<span style="color: #339933;">:</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">50</span><span style="color: #339933;">,</span>
			onAfter<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				$<span style="color: #009900;">&#40;</span>element<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">&quot;background&quot;</span><span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;red&quot;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>



<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-shr">
<ul class="socials">
		<li class="shr-comfeed">
			<a href="http://sachimp.com/2010/03/29/bad-anchors/feed" rel="nofollow" class="external" title="Subscribe to the comments for this post?">Subscribe to the comments for this post?</a>
		</li>
		<li class="shr-delicious">
			<a href="http://delicious.com/post?url=http://sachimp.com/2010/03/29/bad-anchors/&amp;title=Why+plain%2C+vanilla%2C+anchors+are+a+bad+idea." rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-digg">
			<a href="http://digg.com/submit?phase=2&amp;url=http://sachimp.com/2010/03/29/bad-anchors/&amp;title=Why+plain%2C+vanilla%2C+anchors+are+a+bad+idea." rel="nofollow" class="external" title="Digg this!">Digg this!</a>
		</li>
		<li class="shr-googlebuzz">
			<a href="http://www.google.com/buzz/post?url=http://sachimp.com/2010/03/29/bad-anchors/&amp;imageurl=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a>
		</li>
		<li class="shr-stumbleupon">
			<a href="http://www.stumbleupon.com/submit?url=http://sachimp.com/2010/03/29/bad-anchors/&amp;title=Why+plain%2C+vanilla%2C+anchors+are+a+bad+idea." rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a>
		</li>
		<li class="shr-twitter">
			<a href="http://twitter.com/home?status=Why+plain%2C+vanilla%2C+anchors+are+a+bad+idea.+-+http://b2l.me/mmcfz&amp;source=shareaholic" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
		<li class="shr-technorati">
			<a href="http://technorati.com/faves?add=http://sachimp.com/2010/03/29/bad-anchors/" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a>
		</li>
</ul>
<div style="clear:both;"></div>
</div>

]]></content:encoded>
			<wfw:commentRss>http://sachimp.com/2010/03/29/bad-anchors/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Dr. JavaScript and Mr. PHP</title>
		<link>http://sachimp.com/2009/01/21/dr-javascript-and-mr-php/</link>
		<comments>http://sachimp.com/2009/01/21/dr-javascript-and-mr-php/#comments</comments>
		<pubDate>Thu, 22 Jan 2009 00:27:40 +0000</pubDate>
		<dc:creator>AaronAsAChimp</dc:creator>
				<category><![CDATA[Sachimp Labs]]></category>
		<category><![CDATA[Billy Hoffman]]></category>
		<category><![CDATA[Hak .5]]></category>
		<category><![CDATA[hybrid code]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[php]]></category>

		<guid isPermaLink="false">http://sachimp.com/?p=35</guid>
		<description><![CDATA[In my last post I wrote about JavaScript variables.  It stemmed from realizing that the dollar sign ($) was a valid character in JavaScript.  I struggled to find any use for all of these new characters – other than making code unreadable.  One thing stuck out in my mind.  An old episode of Hak .5 where [...]]]></description>
			<content:encoded><![CDATA[<p>In my <a title="The many lives of JavaScript variables" href="/2008/12/13/javascript-variables/">last post</a> I wrote about JavaScript variables.  It stemmed from realizing that the dollar sign ($) was a valid character in JavaScript.  I struggled to find any use for all of these new characters – other than making code unreadable.  One thing stuck out in my mind.  An <a href="http://www.hak5.org/episodes/episode-2x09-release">old episode of Hak .5</a> where Billy Hoffman described a <a href="http://en.wikipedia.org/wiki/Computer_worm">worm</a> that would be written in a hybrid of Perl and JavaScript.  A <em>Dr. Jekyll and Mr. Hyde</em> scenario where the worm would embed itself in a web page and search for a &#8220;host&#8221;, and then infect that host.  That host would then serve pages with the worm embedded in it, creating exponential growth.  Unfortunately at the time he didn&#8217;t have a proof of concept.</p>
<h3>Hybrid Means Better Gas Mileage</h3>
<p>Unlike Billy&#8217;s technique I chose to use PHP instead of Perl.  Many of the language constructs are identical between PHP and JavaScript.  However there are few snags.</p>
<ul>
<li>PHP scripts have to start and end with &#8216;&lt;?&#8217; and &#8216;?&gt;&#8217; respectively.</li>
<li>PHP variables must start with a &#8216;$&#8217;.</li>
<li>Most of JavaScript&#8217;s standard functions are wrapped in objects.  Math, String, etc.</li>
<li>PHP uses the &#8216;.&#8217; for concatenation, while JavaScript uses &#8216;+&#8217;.</li>
<li>PHP uses C++ style definition for objects, while JavaScript uses a prototype definition.</li>
<li>JavaScript uses the C++ style const keyword to define constants, while PHP uses the define() function.</li>
</ul>
<h3>The Lucky Ones</h3>
<p>Not all of these problems can be worked around, but enough of them can be worked around that functioning code can be written.</p>
<dl>
<dt>PHP scripts have to start and end with &#8216;&lt;?&#8217; and &#8216;?&gt;&#8217; respectively.</dt>
<dd>The workaround for this is to run the script using the eval() function.  The PHP&#8217;s eval() function doesn&#8217;t require the opening and closing tags as feature.</dd>
<dt>PHP variables must start with a &#8216;$&#8217;.</dt>
<dd>The dollar sign is a valid character in JavaScript variables, so starting them with the dollar sign poses no problem.</dd>
<dt>Most of JavaScript&#8217;s standard functions are wrapped in objects.  Math, String, etc.</dt>
<dd><a title="PHP.js" href="http://phpjs.org/">PHP.js</a> can be used to wrap the standard JavaScript functions.  Acting as a compatibility layer.</dd>
<dt>JavaScript uses the C++ style const keyword to define constants, while PHP uses the define() function.</dt>
<dd>PHP version 5.3.0 allows for the const keyword.</dd>
</dl>
<h3>Taking the Plunge</h3>
<p>As a proof of concept I wrote a small function to calculate  the <a href="http://en.wikipedia.org/wiki/Great-circle_distance">great circle distance</a>.  It computes the distance in both PHP and JavaScript.  You can find it <a href="http://code.sachimp.com/labs/dualcode/">here</a> and hybrid PHP / JavaScript code <a href="http://code.sachimp.com/labs/dualcode/dualcode.js">here</a>.</p>


<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-shr">
<ul class="socials">
		<li class="shr-comfeed">
			<a href="http://sachimp.com/2009/01/21/dr-javascript-and-mr-php/feed" rel="nofollow" class="external" title="Subscribe to the comments for this post?">Subscribe to the comments for this post?</a>
		</li>
		<li class="shr-delicious">
			<a href="http://delicious.com/post?url=http://sachimp.com/2009/01/21/dr-javascript-and-mr-php/&amp;title=Dr.+JavaScript+and+Mr.+PHP" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-digg">
			<a href="http://digg.com/submit?phase=2&amp;url=http://sachimp.com/2009/01/21/dr-javascript-and-mr-php/&amp;title=Dr.+JavaScript+and+Mr.+PHP" rel="nofollow" class="external" title="Digg this!">Digg this!</a>
		</li>
		<li class="shr-googlebuzz">
			<a href="http://www.google.com/buzz/post?url=http://sachimp.com/2009/01/21/dr-javascript-and-mr-php/&amp;imageurl=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a>
		</li>
		<li class="shr-stumbleupon">
			<a href="http://www.stumbleupon.com/submit?url=http://sachimp.com/2009/01/21/dr-javascript-and-mr-php/&amp;title=Dr.+JavaScript+and+Mr.+PHP" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a>
		</li>
		<li class="shr-twitter">
			<a href="http://twitter.com/home?status=Dr.+JavaScript+and+Mr.+PHP+-+http://b2l.me/acup3&amp;source=shareaholic" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
		<li class="shr-technorati">
			<a href="http://technorati.com/faves?add=http://sachimp.com/2009/01/21/dr-javascript-and-mr-php/" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a>
		</li>
</ul>
<div style="clear:both;"></div>
</div>

]]></content:encoded>
			<wfw:commentRss>http://sachimp.com/2009/01/21/dr-javascript-and-mr-php/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The many lives of JavaScript variables</title>
		<link>http://sachimp.com/2008/12/13/javascript-variables/</link>
		<comments>http://sachimp.com/2008/12/13/javascript-variables/#comments</comments>
		<pubDate>Sun, 14 Dec 2008 03:42:30 +0000</pubDate>
		<dc:creator>AaronAsAChimp</dc:creator>
				<category><![CDATA[Sachimp Labs]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[special characters]]></category>
		<category><![CDATA[variables]]></category>

		<guid isPermaLink="false">http://sachimp.com/?p=13</guid>
		<description><![CDATA[So, It was about three months ago when I first met jQuery.  It&#8217;s a neat little library that helps JavaScript programmers easily do relatively complex things.  Among many of its features one stood out to me.  The $() function is an interesting beast that takes a CSS selector or XPath and returns a set of [...]]]></description>
			<content:encoded><![CDATA[<p>So, It was about three months ago when I first met jQuery.  It&#8217;s a neat little library that helps JavaScript programmers easily do relatively complex things.  Among many of its features one stood out to me.  The $() function is an interesting beast that takes a CSS selector or XPath and returns a set of matching nodes.  However, the application of it was not what attracted me to it.</p>
<h3>The Revelation</h3>
<p>The name, a single dollar sign, is what struck me.  I never knew that such a character could be used in a variable name.  As I, and many others, were taught the only character allowed were:</p>
<ol>
<li>letters</li>
<li>underscores</li>
<li>and numbers so long they are not the first character</li>
</ol>
<p>I was interested and decided to embark on quest to figure out what characters were allowed and which weren&#8217;t.  This took me to the <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMA-262 specification</a>, the standard for JavaScript, or ECMA Script as its formally called. The standard states:</p>
<blockquote><p>Identifiers are interpreted according to the grammar given in Section 5.16 of the upcoming version 3.0 of the Unicode standard, with some small modifications.</p></blockquote>
<p>The <a href="http://www.unicode.org/reports/tr31/">Unicode Standard</a> allows for nearly 14,000 characters to be used in variables, as opposed to the measly 63 that are commonly used.</p>
<h3>The Disappointment</h3>
<p>I instantly tried to stuff Sigmas (Σ) and Double Struck N&#8217;s (ℕ) in to my code, but to my dismay, they didn&#8217;t work.  Disappointing? Yes.  Surprising? No.  It seems to be this way with all web standard&#8217;s, either implemented wrongly or incompletely (or both, heres looking at you Microsoft).  So, to test compliance I wrote a small JavaScript that creates a variable, using one of the Unicode characters, and assigns a value to it.  If throws an exception, then that means the browser doesn&#8217;t support that character.  Simple enough, but who wins this browser compliance battle.  So far Opera, it supports 99.5% of all characters.  Heres the data I&#8217;ve collected so far:</p>
<table border="0">
<thead>
<tr>
<td>Browser</td>
<td>Chars Tested</td>
<td>Non Supported Chars</td>
<td>% Not Supported</td>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Opera 9.27<br />
</strong>(Ubuntu Linux)</td>
<td>13935</td>
<td>78</td>
<td>0.5597416576964478</td>
</tr>
<tr>
<td><strong>Opera 9.63<br />
</strong>(Windows XP &amp; Ubuntu Linux)</td>
<td>13935</td>
<td>80</td>
<td>0.5740940078937926</td>
</tr>
<tr>
<td><strong>Internet Explorer 8<br />
</strong>(Windows 7 and XP)</td>
<td>13935</td>
<td>2131</td>
<td>15.292429135270902</td>
</tr>
<tr>
<td><strong>Google Chrome<br />
</strong>(Windows XP)</td>
<td>13935</td>
<td>2746</td>
<td>19.705776820954434</td>
</tr>
<tr>
<td><strong>Internet Explorer 7 &amp; 6<br />
</strong>(Windows XP)</td>
<td>13935</td>
<td>4340</td>
<td>31.144599928238246</td>
</tr>
<tr>
<td><strong>Firefox 3.0, 3.5, 3.6<br />
</strong>(Windows XP &amp; Ubuntu Linux)</td>
<td>13935</td>
<td>7220</td>
<td>51.811984212414785</td>
</tr>
</tbody>
</table>
<p>Yeah, I know thats a pathetically small dataset, but you can help run <a title="READ THE WARNING FIRST" href="http://code.sachimp.com/labs/unicode-support.html">the test script</a> and then post the last three lines in the comments along with the browser, version, and OS.  WARNING: This script takes a very long time to execute, it may appear to lock your browser up, but be patient.</p>
<p>On an unrelated note, Chrome&#8217;s Javascript engine was suprisingly fast.</p>


<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-shr">
<ul class="socials">
		<li class="shr-comfeed">
			<a href="http://sachimp.com/2008/12/13/javascript-variables/feed" rel="nofollow" class="external" title="Subscribe to the comments for this post?">Subscribe to the comments for this post?</a>
		</li>
		<li class="shr-delicious">
			<a href="http://delicious.com/post?url=http://sachimp.com/2008/12/13/javascript-variables/&amp;title=The+many+lives+of+JavaScript+variables" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-digg">
			<a href="http://digg.com/submit?phase=2&amp;url=http://sachimp.com/2008/12/13/javascript-variables/&amp;title=The+many+lives+of+JavaScript+variables" rel="nofollow" class="external" title="Digg this!">Digg this!</a>
		</li>
		<li class="shr-googlebuzz">
			<a href="http://www.google.com/buzz/post?url=http://sachimp.com/2008/12/13/javascript-variables/&amp;imageurl=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a>
		</li>
		<li class="shr-stumbleupon">
			<a href="http://www.stumbleupon.com/submit?url=http://sachimp.com/2008/12/13/javascript-variables/&amp;title=The+many+lives+of+JavaScript+variables" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a>
		</li>
		<li class="shr-twitter">
			<a href="http://twitter.com/home?status=The+many+lives+of+JavaScript+variables+-+http://b2l.me/acup4&amp;source=shareaholic" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
		<li class="shr-technorati">
			<a href="http://technorati.com/faves?add=http://sachimp.com/2008/12/13/javascript-variables/" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a>
		</li>
</ul>
<div style="clear:both;"></div>
</div>

]]></content:encoded>
			<wfw:commentRss>http://sachimp.com/2008/12/13/javascript-variables/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
