<?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"
	>

<channel>
	<title>Foo Hack &#187; Javascript</title>
	<atom:link href="http://foohack.com/category/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://foohack.com</link>
	<description>Isaac Schlueter on Web Development</description>
	<pubDate>Wed, 06 Jan 2010 01:26:21 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.6.3</generator>
	<language>en</language>
			<item>
		<title>Simple Node Server</title>
		<link>http://foohack.com/2009/12/simple-node-serve/</link>
		<comments>http://foohack.com/2009/12/simple-node-serve/#comments</comments>
		<pubDate>Mon, 21 Dec 2009 18:09:00 +0000</pubDate>
		<dc:creator>Isaac</dc:creator>
		
		<category><![CDATA[Javascript]]></category>

		<category><![CDATA[nodejs]]></category>

		<guid isPermaLink="false">http://foohack.com/?p=140</guid>
		<description><![CDATA[Here is an example of a very simple lighttpd/nginx-style web server written in NodeJS.

I&#8217;ve called it simple-node-server or &#8220;sns&#8221; for short, and you can fork it on my github account.

There are a lot of folks building SSJS clones of Django and WSGI and Rack the like.  However, Python and Ruby have blocking IO, and <small><a href="http://foohack.com/2009/12/simple-node-serve/">...Read More</a></small>]]></description>
			<content:encoded><![CDATA[<p>Here is an example of a very simple lighttpd/nginx-style web server written in <a href="http://nodejs.org">NodeJS</a>.</p>
<p>I&#8217;ve called it <a href="http://github.com/isaacs/simple-node-server">simple-node-server</a> or &#8220;sns&#8221; for short, and you can <a href="http://github.com/isaacs/simple-node-server">fork it on my github account</a>.</p>
<p>There are a lot of folks building <abbr title="Server Side JavaScript">SSJS</abbr> clones of Django and WSGI and Rack the like.  However, Python and Ruby have blocking <abbr title="input/output">IO</abbr>, and even while they have the <em>capacity</em> for asynchronous behavior, it&#8217;s not the <em>default</em>.</p>
<p>I believe that, in order to get a really good JavaScript application framework, and cultivate new development in this green field, we must start with what we have, and iterate until it is closer to the ideal.  I am skeptical that we&#8217;ll be able to get there by cloning the productions of synchronicity, no matter how sophisticated they may be.</p>
<p>It is possible today to build a web server in a day, in a flexible dynamic language, which can serve an alarming number of requests per second, by embracing asynchronous architecture.</p>
<p>Let&#8217;s play: <a href="http://github.com/isaacs/simple-node-server">simple-node-server</a></p>
]]></content:encoded>
			<wfw:commentRss>http://foohack.com/2009/12/simple-node-serve/feed/</wfw:commentRss>
		</item>
		<item>
		<title>The Haiku OOO Email</title>
		<link>http://foohack.com/2008/11/the-haiku-ooo-email/</link>
		<comments>http://foohack.com/2008/11/the-haiku-ooo-email/#comments</comments>
		<pubDate>Mon, 03 Nov 2008 17:00:35 +0000</pubDate>
		<dc:creator>Isaac</dc:creator>
		
		<category><![CDATA[Code Beauty]]></category>

		<category><![CDATA[Javascript]]></category>

		<category><![CDATA[Psychology of Programming]]></category>

		<guid isPermaLink="false">http://foohack.com/?p=79</guid>
		<description><![CDATA[When I started at Yahoo on the Games team, there was a custom that resonated deeply with me, which was started by Dean Yu.

All &#8220;work from home&#8221; emails or &#8220;out of office&#8221; emails had to be sent in the form of a haiku.  This rule was not enforced, but it&#8217;s the kind of thing <small><a href="http://foohack.com/2008/11/the-haiku-ooo-email/">...Read More</a></small>]]></description>
			<content:encoded><![CDATA[<p>When I started at Yahoo on the <a href="http://games.yahoo.com/">Games</a> team, there was a custom that resonated deeply with me, which was started by Dean Yu.</p>
<p>All &#8220;work from home&#8221; emails or &#8220;out of office&#8221; emails had to be sent in the form of a <a href="http://en.wikipedia.org/wiki/Haiku">haiku</a>.  This rule was not enforced, but it&#8217;s the kind of thing that one person does, and then a few others pick up.  Once someone starts doing it, they rarely stop.</p>
<p>Here are some examples:</p>
<pre>Sick on an airplane.
Second carry-on: virus.
Infect passengers.</pre>
<pre>OS API:
Sadly, not writing itself.
Avoid distractions.</pre>
<pre>Roommate needs his car.
Internet works in new place.
May as well use it!</pre>
<pre>Nothing in iCal:
Must take advantage of this.
Work in pajamas.</pre>
<pre>Still not feeling well
Resting and working from home
Please ping or call me</pre>
<pre>Have suffered relapse
To this weekend's brief illness
So I work from home</pre>
<pre>Sneezing mightily
Wish not to infect colleagues
Thus working from home</pre>
<p>A couplet for my recent vacation:</p>
<pre>Been a busy year.
No vacations since ’06
Burnt out: Do not want.

Visit with old friends.
New England trees in autumn.
Rejuvenation.</pre>
<p>Having worked on a bunch of teams, I&#8217;ve taken this custom with me as much as possible, to the Brand Universe team, and the Buzz team, and most recently the YAP team.  There&#8217;s no proselytizing involved.  I just send a haiku I&#8217;m working from home.  Some people think it&#8217;s fun, and play a round of &#8220;speaking in poetry&#8221; via email.  Some people adopt the custom, and it sticks.  Others, for whatever reason, never get involved.</p>
<p>I&#8217;m not sure why some seem to instinctively carry it on, and others instead prefer just the subject of &#8220;wfh&#8221; or &#8220;ooo&#8221; with no message body.  I&#8217;ve been told that there are other teams at Yahoo and elsewhere that this custom has spread.  In Games, it&#8217;s all but gone, now that Dean has moved on.</p>
<p>Like the Twitter of the Edo Period, haiku (then called <a href="http://en.wikipedia.org/wiki/Haikai">haikai</a>) used terse imagery to elevate the normal and mundane to the deep and meaningful.</p>
<p>Most people learn in grade school that a haiku is 3 lines, with syllables numbering 5/7/5.  While this is the typical standard, it&#8217;s not just about fitting into the right number of syllables.</p>
<p>The goal of haiku is to find powerful expression in a small intense dose, to elicit an &#8220;AH HA!&#8221; experience by virtue of succinctly expressing meaning via simple language and powerful imagery.</p>
<p>Limitation—whether 5/7/5 or 140 characters—is part of the equation.  Because the limits are so draconian, the writer is forced to be clear.  <strong>Squeezing ideas into uncomfortably small packages shaves off the excess.</strong>  When the excess is removed, enlightenment remains.</p>
<p>Like Twitter, haiku can be terribly inane and useless.  That is bad haiku.  Truth be told, most WFH emails basically are expressing a single sentiment, and the form adds little to the composition.  It&#8217;s just fun.</p>
<p>Good programming is like good poetry.  The best programmers I&#8217;ve known are obsessively minimalist in their code, and do tremendously powerful things with simple logic and short functions.  The same can be said for all levels of design: a simple business model, a straightforward user flow, a clean visual treatment.</p>
<p>Less is more.  Like the kendō master who practices calligraphy, or the actor who studies yoga, the pursuit of excellence in one area can balance and ready the mind for one&#8217;s primary activity.</p>
<p>The next time you have to send an email to your team telling them that you&#8217;ll be out of the office for some reason, put it in the form of a haiku.  Don&#8217;t explain it or call attention to it.  It will be your gift.  Watch how it is received.</p>
<p class="small">In case you&#8217;ve never hit them organically: <a href="http://foohack.com/error/missing.html">404</a> <a href="http://foohack.com/error/authorization.html">401</a> <a href="http://foohack.com/error/forbidden.html">403</a> <a href="http://foohack.com/error/gone.html">410</a></p>
]]></content:encoded>
			<wfw:commentRss>http://foohack.com/2008/11/the-haiku-ooo-email/feed/</wfw:commentRss>
		</item>
		<item>
		<title>YUI&#8217;s &#8220;Module Pattern&#8221; vs. Prototype&#8217;s Class Function</title>
		<link>http://foohack.com/2007/08/yui-crockford-module-pattern-vs-prototypes-class-function/</link>
		<comments>http://foohack.com/2007/08/yui-crockford-module-pattern-vs-prototypes-class-function/#comments</comments>
		<pubDate>Mon, 13 Aug 2007 17:47:36 +0000</pubDate>
		<dc:creator>Isaac</dc:creator>
		
		<category><![CDATA[Code Ecosystems]]></category>

		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://foohack.com/2007/08/yui-crockford-module-pattern-vs-prototypes-class-function/</guid>
		<description><![CDATA[Via Geoffery Moller, I came across this article on Matt Snider&#8217;s blog.  I&#8217;m surprised that no one noticed what (to me) was the most relevant difference in the libraries that he evaluated.

The &#8220;YUI method of class creation&#8221; is not distinctively YUI&#8212;it&#8217;s just what Javascript gives you for free.  You can use the &#8220;Module <small><a href="http://foohack.com/2007/08/yui-crockford-module-pattern-vs-prototypes-class-function/">...Read More</a></small>]]></description>
			<content:encoded><![CDATA[<p>Via <a href="http://geoffreymoller.com/2007/05/15/when-javascript-libraries-attack/">Geoffery Moller</a>, I came across <a href="http://mattsnider.com/javascript/prototype-vs-yui-round-1-oop-architecture/">this article</a> on Matt Snider&#8217;s blog.  I&#8217;m surprised that no one noticed what (to me) was the most relevant difference in the libraries that he evaluated.</p>
<p>The &#8220;YUI method of class creation&#8221; is not distinctively YUI&#8212;it&#8217;s just what Javascript gives you for free.  You can use the &#8220;Module Pattern&#8221; alone on a page with no library at all!  You can call it Crockford&#8217;s Module Pattern, but it seems to me that he discovered or popularized it more than &#8220;invented&#8221; it.</p>
<p>This, to me, highlights the biggest difference in approach between YUI and every other library: YUI doesn&#8217;t attempt to re-write the language, but rather to show off what the language can do and how those features can be effectively put to use.  My experience with Prototype and Dojo and Mochikit all made me feel a bit like the author must not have liked Javascript very much.  (Dojo actually goes a bit further&#8212;it rewrites HTML as well!)  It seems like the other libraries say, &#8220;This Javascript language is too hard and confusing.  Let&#8217;s make it into something else.&#8221;  YUI says, &#8220;This language is beautiful and powerful, but it would be handy if we had some conventions and a common approach to these rough edges.  Let&#8217;s build those common pieces.&#8221;  It&#8217;s the difference between teaching someone to fish and giving them a fish, except instead of giving him a fish, you pass the fish through a slow and complex machine that spits out Java code.</p>
<p>Of course, I&#8217;m a bit biased.  I <a href="http://www.codinghorror.com/blog/archives/000921.html">imprinted upon YUI</a> at a fairly early stage in my Javascript development.  I work <a href="http://yahoo.com">here</a>, so I get to request features directly through our internal bugzilla instead of pleading in the public arenas.  But the approach is one that I&#8217;ve always favored.  If you feel the need to rewrite the language, then just go use another language.  Javascript is the common tongue of the internet, and will remain so for the indefinite future.  Don&#8217;t fight it. (<a href="http://www.codinghorror.com/blog/archives/000857.html">Hat-tip</a> to Jeff Atwood.)</p>
<p>Crockford&#8217;s &#8220;Module Pattern&#8221; is a great way to create a singleton that has some private methods.  In fact, in my opinion, it&#8217;s the best and only way that this task should be done.  (There are others, but they tend to be more obtuse, IMO.)  But that&#8217;s not the only task of an object-oriented development.  Sometimes, you need to have a bunch of objects, and if they have shared functionality, then that should be handled with a class of sorts.  In Javascript, that means that they&#8217;re stamped from the same Constructor and Prototype.  The Module Pattern does not address this in a very clear way, but it does highlight the principle of data-hiding through a closure that is the key to OOP in Javascript.</p>
<p>To create a class, I usually do something like this, which takes the essence of the Module Pattern and uses it to create a reusable class.</p>
<p><code class="block javascript">(function () {<br />
&nbsp;&nbsp;// these are properly private static, not just private<br />
&nbsp;&nbsp;// but with scope correction, that&#8217;s good enough for functions.<br />
&nbsp;&nbsp;// private function, called with privateFunction.call(this, a, b, c);<br />
&nbsp;&nbsp;var privateFunction = function (a, b) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;this.a = a;<br />
&nbsp;&nbsp;&nbsp;&nbsp;this.b = b;<br />
&nbsp;&nbsp;};<br />
&nbsp;&nbsp;// private static data.  Shared between all instances!<br />
&nbsp;&nbsp;var privateStaticData = &#8220;I&#8217;m private and static.  All instances share me.&#8221;;<br />
&nbsp;&nbsp;YAHOO.myProject.myClass = function (a, b, id) {<br />
&nbsp;&nbsp;&nbsp;&nbsp;// a and b are public, since they&#8217;re set on this.<br />
&nbsp;&nbsp;&nbsp;&nbsp;this.a = a;<br />
&nbsp;&nbsp;&nbsp;&nbsp;this.b = b;<br />
&nbsp;&nbsp;&nbsp;&nbsp;YAHOO.myProject.myClass.instances[id] = this;<br />
&nbsp;&nbsp;};<br />
&nbsp;&nbsp;YAHOO.myProject.myClass.instances = {};<br />
&nbsp;&nbsp;YAHOO.myProject.myClass.prototype = {<br />
&nbsp;&nbsp;&nbsp;&nbsp;myPublicProperty : &#8220;I&#8217;m accessible as <object reference>.myPublicProperty.&#8221;,<br />
&nbsp;&nbsp;&nbsp;&nbsp;myPublicMethod : function () {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var a = (new Date()).getTime();<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var b = a + 10000;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// note the way that private functions are called.<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;privateFunction.call(this, a, b);<br />
&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;<br />
&nbsp;&nbsp;};<br />
})(); // close the closure and execute the code.<br />
// later on&#8230;<br />
(function () {<br />
&nbsp;&nbsp;var myInstance = new YAHOO.myProject.myClass(1,2,&#8217;blahblah&#8217;);<br />
&nbsp;&nbsp;// now you can deal with it as &#8220;myInstance&#8221; within this closure,<br />
&nbsp;&nbsp;// or as YAHOO.myProject.myClass.instances.blahblah elsewhere.<br />
})();</object></code></p>
<p>(When in doubt, wrap it in a closure.  <a href="http://yuiblog.com/blog/2006/06/01/global-domination/">Global variables are evil.</a>)</p>
<p>I&#8217;d rather work with someone who is a bit green with Javascript but can learn, rather than someone who is an expert with Prototype or Dojo.  <em>The more time someone spends building applications with a library like Prototype, the further they get from Javascript, and the more dependent they become on the library.</em>  By contrast, time spent using YUI tends to breed developers who are experts in <em>Javascript</em>, and that skill is far more useful than being an expert in a particular library.</p>
]]></content:encoded>
			<wfw:commentRss>http://foohack.com/2007/08/yui-crockford-module-pattern-vs-prototypes-class-function/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Javascript Style Tip: Use &#8220;in&#8221; and &#8220;delete&#8221;</title>
		<link>http://foohack.com/2007/06/javascript-style-tip-use-in-and-delete/</link>
		<comments>http://foohack.com/2007/06/javascript-style-tip-use-in-and-delete/#comments</comments>
		<pubDate>Mon, 18 Jun 2007 17:00:03 +0000</pubDate>
		<dc:creator>Isaac</dc:creator>
		
		<category><![CDATA[Code Beauty]]></category>

		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://foohack.com/2007/06/javascript-style-tip-use-in-and-delete/</guid>
		<description><![CDATA[Javascript provides two very handy operators, in and delete.

Consider this code fragment:

var obj = {

&#160;foo : 'quux',

&#160;bar : 'baz',

&#160;doSomething : function () {

&#160;&#160;// do something...

&#160;}

};

So, we&#8217;ve created an object, and then some other things happen.  Later in the code, we want to remove the &#8220;foo&#8221; property, so we do this:

obj.foo = undefined;

Still later, we <small><a href="http://foohack.com/2007/06/javascript-style-tip-use-in-and-delete/">...Read More</a></small>]]></description>
			<content:encoded><![CDATA[<p>Javascript provides two very handy operators, <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Operators:Special_Operators:in_Operator">in</a> and <a href="http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Operators:Special_Operators:delete_Operator">delete</a>.</p>
<p>Consider this code fragment:</p>
<p><code class="block javascript">var obj = {<br />
&nbsp;foo : 'quux',<br />
&nbsp;bar : 'baz',<br />
&nbsp;doSomething : function () {<br />
&nbsp;&nbsp;// do something...<br />
&nbsp;}<br />
};</code></p>
<p>So, we&#8217;ve created an object, and then some other things happen.  Later in the code, we want to remove the &#8220;foo&#8221; property, so we do this:</p>
<p><code class="javascript block">obj.foo = undefined;</code></p>
<p>Still later, we only want to do something if the foo property has not been unset, so we check it:</p>
<p><code class="javascript block">if ( obj.foo !== undefined ) {<br />
&nbsp;// do something<br />
}</code></p>
<p>That works, and it&#8217;s fairly common, but it&#8217;s klunky, and not as readable as this:</p>
<p><code class="javascript block">delete obj.foo;</code></p>
<p><code class="javascript block">if ( 'foo' in obj ) {<br />
&nbsp;// do something<br />
}</code></p>
<p>The first one says, <q>Delete &#8220;foo&#8221; from the object.</q>  The second asks, <q>Is &#8220;foo&#8221; in the object?</q>  The difference between the first and second approaches is that the second uses intuitive wording in the code.</p>
<p>Note: You <em>must</em> use <code>delete</code> if you want to use <code>in</code>.  Setting something to <code>undefined</code> manually will not cause it to return false when testing whether the property is <code>in</code> the object.</p>
<p>As an added bonus, using the <code>delete</code> operator also removes the property from the for/in iteration loop, since it actually removes it from the object&#8217;s key list rather than simply setting it&#8217;s value to <code>undefined</code>.</p>
<p><code class="block javascript">var obj = {asdf:'foo',bar:'baz'};<br />
obj.asdf = undefined;<br />
for ( var i in obj ) {<br />
&nbsp;console.log(i,obj[i]);<br />
}<br />
// outputs:<br />
// asdf undefined<br />
// bar baz</code></p>
<p><code class="block javascript">var obj = {asdf:'foo',bar:'baz'};<br />
delete obj.asdf;<br />
for ( var i in obj ) {<br />
&nbsp;console.log(i,obj[i]);<br />
}<br />
// outputs:<br />
// bar baz</code></p>
<p>Note: you&#8217;ll need to wrap the &#8220;in&#8221; statement in parentheses if you want to negate it.  For example, this is a bug:</p>
<p><code class="block javascript">var obj = { asdf:'foo',bar:'baz' };<br />
var f = 'quux';<br />
if ( !f in obj ) {<br />
&nbsp;alert( 'not there!' );<br />
}</code></p>
<p>The alert will never fire.  Can you figure out what&#8217;s happening?  Here&#8217;s a clue:</p>
<p><code class="block javascript">var obj = { 'false':1, asdf:'foo', bar:'baz' };<br />
var f = 'quux';<br />
if ( !f in obj ) {<br />
&nbsp;alert( 'not there!' );<br />
}</code></p>
<p>Now the alert will fire.  What&#8217;s up?</p>
<p>The order of operations is this:</p>
<ol>
<li>Process the !f, which converts &#8216;quux&#8217; to a boolean (true), and then gets the opposite (false).</li>
<li>The &#8220;in&#8221; operator converts the value back to a string, and false.toString() is the string &#8216;false&#8217;.</li>
<li>Since &#8216;false&#8217; is not a key in the object, the &#8220;in&#8221; operator returns false, and the conditional fails.</li>
</ol>
<p>In the second case, since the string &#8216;false&#8217; <em>is</em> a key in the object, the &#8220;in&#8221; operator returns true, and the conditional fires.  Of course, using &#8220;false&#8221; as a key in an object is a really stupid thing to do, but if some bunk data comes into your program somehow, it can happen.  Always wrap your &#8220;in&#8221; clauses in parentheses, and you&#8217;ll never have a problem.  In this case, it works as expected:</p>
<p><code class="block javascript">var obj = { asdf:'foo', bar:'baz' };<br />
var f = 'quux';<br />
if ( !(f in obj) ) {<br />
&nbsp;alert( 'not there!' );<br />
}</code></p>
<h3>Update</h3>
<p>I&#8217;m finding that a lot of people are hitting this page with search queries that seem to indicate they&#8217;re looking to remove a style property from a Dom node.  <code>delete</code> won&#8217;t help you much there, since the <code>style</code> property is a get-and-set-only property.  (IE, you can read from and write to it, but you can&#8217;t delete from it.)</p>
<p>Most of the time, you shouldn&#8217;t be messing with the <code>style</code> property directly in Javascript, anyhow.  Instead, add and remove semantically meaningful class names, and put the style information related to those states in the CSS.  Of course that&#8217;s not always an option, I know.  So, you can remove the inline setting by simply setting it to an empty string, like this:</p>
<p><code class="block javascript">document.body.style.background="red"; // turns the page red.<br />
document.body.style.background=""; // turns the page back to whatever it was.</code></p>
<p>Cheers!</p>
]]></content:encoded>
			<wfw:commentRss>http://foohack.com/2007/06/javascript-style-tip-use-in-and-delete/feed/</wfw:commentRss>
		</item>
	</channel>
</rss>

<!-- Dynamic Page Served (once) in 0.231 seconds -->
