<?xml version="1.0" encoding="utf-8"?>
<feed
    xmlns="http://www.w3.org/2005/Atom"
    xmlns:at="http://www.sixapart.com/ns/at"
    xmlns:icbm="http://postneo.com/icbm"
    xmlns:rvw="http://purl.org/NET/RVW/0.2/"
    xml:lang="en">
    <title>ydnar</title>
    <link rel="self" type="application/atom+xml" title="ydnar (Atom)" href="http://ydnar.vox.com/library/posts/tags/code/page/1/atom.xml" />
    <link rel="alternate" type="text/html" title="ydnar" href="http://ydnar.vox.com/library/posts/tags/code/page/1/"/> 
    <link rel="service.post" type="application/atom+xml" title="ydnar" href="http://www.vox.com/services/atom/svc=post/collection_id=6a00b8ea0674f2dece00b8ea0715231bc0" /> 
    <link rel="service.subscribe" type="application/atom+xml" title="ydnar" href="http://ydnar.vox.com/library/posts/tags/code/atom.xml" />   
    <link rel="last" type="application/atom+xml" title="ydnar" href="http://ydnar.vox.com/library/posts/tags/code/page/1/atom.xml" />  
    <category term="code" scheme="http://ydnar.vox.com/tags/code/?_c=feed-atom-full" label="code" /> 
    <generator uri="http://www.vox.com/">Vox</generator>
    <updated>2007-04-04T22:15:21Z</updated> 
    <author>
        <name>ydnar</name>
        <uri>http://ydnar.vox.com/?_c=feed-atom-full</uri>
    </author> 
    <id>tag:vox.com,2006:6p00b8ea0674f2dece/tags/code/</id> 
    <subtitle>is living in your future</subtitle>  
    
    <entry>
        <title>Refining Superclass Method Calls in JavaScript</title>   
        <link rel="alternate" type="text/html" title="Refining Superclass Method Calls in JavaScript" href="http://ydnar.vox.com/library/post/refining-superclass-method-calls-in-javascript.html?_c=feed-atom-full" />  
        <link rel="service.post" type="application/atom+xml" title="Refining Superclass Method Calls in JavaScript" href="http://ydnar.vox.com/library/post/refining-superclass-method-calls-in-javascript.html?_c=feed-atom-full#comments" /> 
        <link rel="service.edit" type="application/atom+xml" title="Refining Superclass Method Calls in JavaScript" href="http://www.vox.com/atom/svc=post/asset_id=6a00b8ea0674f2dece00d09e53f262be2b" />          <id>tag:vox.com,2007-02-10:asset-6a00b8ea0674f2dece00d09e53f262be2b</id>
        <published>2007-02-10T05:57:07Z</published>
        <updated>2007-04-04T22:15:21Z</updated>
    
        <author>
            <name>ydnar</name>
            <uri>http://ydnar.vox.com/?_c=feed-atom-full</uri>
        </author>
    
        
        <content type="html" xml:base="http://ydnar.vox.com/?_c=feed-atom-full">
            <![CDATA[
                <div xmlns="http://www.w3.org/1999/xhtml" xmlns:at="http://www.sixapart.com/ns/at">
        
        <p>Last week I was revisiting the always fun problem of
implementing “classical” inheritance in JavaScript. I’d taken a few
stabs at it, and had gotten it to a reasonably good state that borrowed
some good ideas from <a href="http://www.crockford.com/">Doug Crockford</a>, <a href="http://www.prototypejs.org/">Sam Stephenson</a>, and <a href="http://www.dean.edwards.name/">Dean Edwards</a>. Joshua Gertzen wrote a good post about various methods on <a href="http://truecode.blogspot.com/2006/08/object-oriented-super-class-method.html">his blog</a>.</p>
        
        <p>I’ve never been terribly thrilled with the form <code>Class.superClass.method.apply( this, arguments )</code>.
It was redundant: replicating both the class and method names. Copy
&amp; paste of code could lead to subtle errors, and it’s annoying to
type that much. But the alternatives were worse: Recompiling the
function to generate a “magic” lexical for the superclass or wrapper
methods. So the <code>Class</code> object basically sat untouched for a year and a half.</p>
        
        <p>Back to last week…It occurred to me that in all the JavaScript we’d built for <a>Vox</a>,
we almost never shared a method between two objects, except via
inheritance. There were a couple exceptions, but they could be
rewritten (it turned out to be a good idea anyway). Second, functions
are objects like everything else, and can have arbitrary properties.
Third, <code>arguments.callee</code> is available in every function
call in JavaScript. I realized then that storing the superclass was not
as useful as just storing the super<em>method</em>.</p>
        
        <p>For any given method in a class, store its supermethod as a property of the method: <code>method.__super</code>. Instead of the unwieldy construct above, any method could simply use <code>arguments.callee.__super.apply( this, arguments )</code>.</p>
        
        <p>The <code>Class</code> constructor from <a href="http://code.sixapart.com/svn/js/trunk/common/Core.js">Core.js</a>:</p>
        
        <blockquote>
<pre>Class = function( sc ) {<br />    var c = function( s ) {<br />        this.constructor = arguments.callee;<br />        if( s === __SUBCLASS__ )<br />            return;<br />        this.init.apply( this, arguments );<br />    };<br /><br />    c.override( Class );<br />    sc = sc || Object;<br />    c.override( sc );<br />    c.__super = sc;<br />    c.superClass = sc.prototype;<br /><br />    c.prototype = sc === Object ? new sc() : new sc( __SUBCLASS__ );<br />    c.prototype.extend( Class.prototype );<br />    var a = arguments;<br />    for( var i = 1; i &lt; a.length; i++ )<br />        c.prototype.override( a[ i ] );<br /><br />    for( var p in c.prototype ) {<br />        var m = c.prototype[ p ];<br />        if( typeof m != &quot;function&quot; || defined( m.__super ) )<br />            continue;<br />        m.__super = null;<br />        var pr = sc.prototype;<br />        while( pr ) {<br />            if( defined( pr[ p ] ) ) {<br />                m.__super = pr[ p ];<br />                break;<br />            }<br />            if( pr === pr.constructor.prototype )<br />                break;<br />            pr = pr.constructor.prototype;<br />        }<br />    }<br /><br />    return c;<br />}</pre>
        </blockquote>
        
        <p><code>arguments.callee</code> was useful in the constructor too: Instead of creating a circular reference by overriding the constructor like this: <code>constructor.prototype.constructor = constructor</code>, the constructor itself can just set it on the <code>this</code> object when the constructor is called: <code>this.constructor = arguments.callee</code>.</p>
        
        <p>Calling a supermethod can be simplified further, to <code>arguments.callee.applySuper( this, arguments )</code> via a little sugar:</p>
        
        <blockquote>
<pre>Function.prototype.extend( {<br />    applySuper: function( o, args ) {<br />        return this.__super.apply( o, args );<br />    },<br /><br />    callSuper: function( o ) {<br />        var args = [];<br />        for( var i = 1; i &lt; arguments.length; i++ )<br />            args.push( arguments[ i ] );<br />        return this.__super.apply( o, args );<br />    }<br />} );</pre>
        </blockquote>
    
    <p style="clear:both;"> 
    <a href="http://ydnar.vox.com/library/post/refining-superclass-method-calls-in-javascript.html?_c=feed-atom-full#comments">Read and post comments</a>   |   
    <a href="http://www.vox.com/share/6a00b8ea0674f2dece00d09e53f262be2b?_c=feed-atom-full">Send to a friend</a> 
</p>

                </div>
            ]]>
        </content> 
    <category term="javascript" scheme="http://ydnar.vox.com/tags/javascript/" label="javascript" /> 
    <category term="code" scheme="http://ydnar.vox.com/tags/code/" label="code" /> 
    <category term="inheritance" scheme="http://ydnar.vox.com/tags/inheritance/" label="inheritance" /> 
    <category term="superclass" scheme="http://ydnar.vox.com/tags/superclass/" label="superclass" /> 
    </entry> 
    
    <entry>
        <title>Adobe Makes an Open Source Play</title>   
        <link rel="alternate" type="text/html" title="Adobe Makes an Open Source Play" href="http://ydnar.vox.com/library/post/adobe-makes-an-open-source-play.html?_c=feed-atom-full" />  
        <link rel="service.post" type="application/atom+xml" title="Adobe Makes an Open Source Play" href="http://ydnar.vox.com/library/post/adobe-makes-an-open-source-play.html?_c=feed-atom-full#comments" /> 
        <link rel="service.edit" type="application/atom+xml" title="Adobe Makes an Open Source Play" href="http://www.vox.com/atom/svc=post/asset_id=6a00b8ea0674f2dece00cdf39cd267cb8f" />          <id>tag:vox.com,2006-11-07:asset-6a00b8ea0674f2dece00cdf39cd267cb8f</id>
        <published>2006-11-07T15:22:59Z</published>
        <updated>2006-11-07T19:06:28Z</updated>
    
        <author>
            <name>ydnar</name>
            <uri>http://ydnar.vox.com/?_c=feed-atom-full</uri>
        </author>
    
        
        <content type="html" xml:base="http://ydnar.vox.com/?_c=feed-atom-full">
            <![CDATA[
                <div xmlns="http://www.w3.org/1999/xhtml" xmlns:at="http://www.sixapart.com/ns/at">
        <p>Adobe has given the Flash ActionScript (ECMAScript or JavaScript 2.0) interpreter to the Mozilla foundation as the new open source core of SpiderMonkey, the JavaScript engine for Firefox. It&#39;s called <a href="http://www.mozilla.org/projects/tamarin/">Tamarin</a>. Brilliant. </p>   <p style="clear:both;"> 
    <a href="http://ydnar.vox.com/library/post/adobe-makes-an-open-source-play.html?_c=feed-atom-full#comments">Read and post comments</a>   |   
    <a href="http://www.vox.com/share/6a00b8ea0674f2dece00cdf39cd267cb8f?_c=feed-atom-full">Send to a friend</a> 
</p>

                </div>
            ]]>
        </content> 
    <category term="coding" scheme="http://ydnar.vox.com/tags/coding/" label="coding" /> 
    <category term="flash" scheme="http://ydnar.vox.com/tags/flash/" label="flash" /> 
    <category term="javascript" scheme="http://ydnar.vox.com/tags/javascript/" label="javascript" /> 
    <category term="2006" scheme="http://ydnar.vox.com/tags/2006/" label="2006" /> 
    <category term="geek" scheme="http://ydnar.vox.com/tags/geek/" label="geek" /> 
    <category term="adobe" scheme="http://ydnar.vox.com/tags/adobe/" label="adobe" /> 
    <category term="open source" scheme="http://ydnar.vox.com/tags/open+source/" label="open source" /> 
    <category term="code" scheme="http://ydnar.vox.com/tags/code/" label="code" /> 
    <category term="vm" scheme="http://ydnar.vox.com/tags/vm/" label="vm" /> 
    <category term="compiler" scheme="http://ydnar.vox.com/tags/compiler/" label="compiler" /> 
    <category term="interpreter" scheme="http://ydnar.vox.com/tags/interpreter/" label="interpreter" /> 
    <category term="osi" scheme="http://ydnar.vox.com/tags/osi/" label="osi" /> 
    <category term="ecmascript" scheme="http://ydnar.vox.com/tags/ecmascript/" label="ecmascript" /> 
    <category term="js2" scheme="http://ydnar.vox.com/tags/js2/" label="js2" /> 
    </entry> 
    
    <entry>
        <title>Graphics</title>   
        <link rel="alternate" type="text/html" title="Graphics" href="http://ydnar.vox.com/library/post/graphics.html?_c=feed-atom-full" />  
        <link rel="service.post" type="application/atom+xml" title="Graphics" href="http://ydnar.vox.com/library/post/graphics.html?_c=feed-atom-full#comments" /> 
        <link rel="service.edit" type="application/atom+xml" title="Graphics" href="http://www.vox.com/atom/svc=post/asset_id=6a00b8ea0674f2dece00c22523cd8c8e1d" />                <id>tag:vox.com,2006-08-23:asset-6a00b8ea0674f2dece00c22523cd8c8e1d</id>
        <published>2006-08-23T07:21:33Z</published>
        <updated>2006-08-23T16:20:52Z</updated>
    
        <author>
            <name>ydnar</name>
            <uri>http://ydnar.vox.com/?_c=feed-atom-full</uri>
        </author>
    
        
        <content type="html" xml:base="http://ydnar.vox.com/?_c=feed-atom-full">
            <![CDATA[
                <div xmlns="http://www.w3.org/1999/xhtml" xmlns:at="http://www.sixapart.com/ns/at">
        <p>         

    
</p>
    
    
    
<div at:enclosure="asset" at:xid="6a00b8ea0674f2dece00c22522d905549d" at:format="medium" at:align="right"
    class="enclosure enclosure-right enclosure-medium photo-enclosure" 
     style="text-align: center; float: right;">
<div class="enclosure-inner"
    
        style="padding: 9px; border: 1px solid; width: px; margin: 0 0 20px 20px;"
    >
    <div class="enclosure-list">
        <div class="enclosure-item photo-asset last">
    
            <div class="enclosure-image">
        
                <a href="http://ydnar.vox.com/library/photo/6a00b8ea0674f2dece00c22522d905549d.html"><img src="http://a5.vox.com/6a00b8ea0674f2dece00c22522d905549d-200pi" alt="Basis (Sun)" title="Basis (Sun)" /></a>
        
            </div>
            <div class="enclosure-meta">
                <div class="enclosure-asset-name"><a href="http://ydnar.vox.com/library/photo/6a00b8ea0674f2dece00c22522d905549d.html" title="Basis (Sun)">Basis (Sun)</a></div>
            </div>
    
        </div>
    </div>
</div>
</div><!-- end enclosure -->

<p>         

    
</p>
    
    
    
<div at:enclosure="asset" at:xid="6a00b8ea0674f2dece00c22522d6d6604a" at:format="medium" at:align="right"
    class="enclosure enclosure-right enclosure-medium photo-enclosure" 
     style="text-align: center; float: right;">
<div class="enclosure-inner"
    
        style="padding: 9px; border: 1px solid; width: px; margin: 0 0 20px 20px;"
    >
    <div class="enclosure-list">
        <div class="enclosure-item photo-asset last">
    
            <div class="enclosure-image">
        
                <a href="http://ydnar.vox.com/library/photo/6a00b8ea0674f2dece00c22522d6d6604a.html"><img src="http://a6.vox.com/6a00b8ea0674f2dece00c22522d6d6604a-200pi" alt="Negative Lights + Masking Gels" title="Negative Lights + Masking Gels" /></a>
        
            </div>
            <div class="enclosure-meta">
                <div class="enclosure-asset-name"><a href="http://ydnar.vox.com/library/photo/6a00b8ea0674f2dece00c22522d6d6604a.html" title="Negative Lights + Masking Gels">Negative Lights + Masking Gels</a></div>
            </div>
    
        </div>
    </div>
</div>
</div><!-- end enclosure -->

<p>         

    
</p>
    
    
    
<div at:enclosure="asset" at:xid="6a00b8ea0674f2dece00c22522d6d8604a" at:format="medium" at:align="right"
    class="enclosure enclosure-right enclosure-medium photo-enclosure" 
     style="text-align: center; float: right;">
<div class="enclosure-inner"
    
        style="padding: 9px; border: 1px solid; width: px; margin: 0 0 20px 20px;"
    >
    <div class="enclosure-list">
        <div class="enclosure-item photo-asset last">
    
            <div class="enclosure-image">
        
                <a href="http://ydnar.vox.com/library/photo/6a00b8ea0674f2dece00c22522d6d8604a.html"><img src="http://a0.vox.com/6a00b8ea0674f2dece00c22522d6d8604a-200pi" alt="Model Cloud" title="Model Cloud" /></a>
        
            </div>
            <div class="enclosure-meta">
                <div class="enclosure-asset-name"><a href="http://ydnar.vox.com/library/photo/6a00b8ea0674f2dece00c22522d6d8604a.html" title="Model Cloud">Model Cloud</a></div>
            </div>
    
        </div>
    </div>
</div>
</div><!-- end enclosure -->

<p>Recently dug up some old photos, er screenshots from the days when I was a graphics geek. I&#39;m supposed to give a presentation about same one of these Thursdays.<br /></p>   <p style="clear:both;"> 
    <a href="http://ydnar.vox.com/library/post/graphics.html?_c=feed-atom-full#comments">Read and post comments</a>   |   
    <a href="http://www.vox.com/share/6a00b8ea0674f2dece00c22523cd8c8e1d?_c=feed-atom-full">Send to a friend</a> 
</p>

                </div>
            ]]>
        </content> 
    <category term="graphics" scheme="http://ydnar.vox.com/tags/graphics/" label="graphics" /> 
    <category term="quake" scheme="http://ydnar.vox.com/tags/quake/" label="quake" /> 
    <category term="cg" scheme="http://ydnar.vox.com/tags/cg/" label="cg" /> 
    <category term="2006" scheme="http://ydnar.vox.com/tags/2006/" label="2006" /> 
    <category term="geek" scheme="http://ydnar.vox.com/tags/geek/" label="geek" /> 
    <category term="code" scheme="http://ydnar.vox.com/tags/code/" label="code" /> 
    <category term="computer graphics" scheme="http://ydnar.vox.com/tags/computer+graphics/" label="computer graphics" /> 
    <category term="render" scheme="http://ydnar.vox.com/tags/render/" label="render" /> 
    <category term="rendering" scheme="http://ydnar.vox.com/tags/rendering/" label="rendering" /> 
    <category term="q3map2" scheme="http://ydnar.vox.com/tags/q3map2/" label="q3map2" /> 
    </entry> 
    
    <entry>
        <title>Holy War</title>   
        <link rel="alternate" type="text/html" title="Holy War" href="http://ydnar.vox.com/library/post/holy-war.html?_c=feed-atom-full" />  
        <link rel="service.post" type="application/atom+xml" title="Holy War" href="http://ydnar.vox.com/library/post/holy-war.html?_c=feed-atom-full#comments" /> 
        <link rel="service.edit" type="application/atom+xml" title="Holy War" href="http://www.vox.com/atom/svc=post/asset_id=6a00b8ea0674f2dece00c2251c75d0f219" />          <id>tag:vox.com,2006-07-03:asset-6a00b8ea0674f2dece00c2251c75d0f219</id>
        <published>2006-07-03T21:27:34Z</published>
        <updated>2006-07-03T21:27:35Z</updated>
    
        <author>
            <name>ydnar</name>
            <uri>http://ydnar.vox.com/?_c=feed-atom-full</uri>
        </author>
    
        
        <content type="html" xml:base="http://ydnar.vox.com/?_c=feed-atom-full">
            <![CDATA[
                <div xmlns="http://www.w3.org/1999/xhtml" xmlns:at="http://www.sixapart.com/ns/at">
        <p>This is a <a href="http://nickgravgaard.com/elastictabstops/">brilliant solution to the age-old problem of tabs versus spaces</a> in source code. Instead of treating tabs as indent of a fixed size, treat the source code as tabular data, where the tab character jumps to the next logical column, where the width of said column is determined by the widest point in the document.</p><p>(via <a href="http://it.slashdot.org/article.pl?sid=06/07/03/1820235">Slashdot</a>)<br /></p>   <p style="clear:both;"> 
    <a href="http://ydnar.vox.com/library/post/holy-war.html?_c=feed-atom-full#comments">Read and post comments</a>   |   
    <a href="http://www.vox.com/share/6a00b8ea0674f2dece00c2251c75d0f219?_c=feed-atom-full">Send to a friend</a> 
</p>

                </div>
            ]]>
        </content> 
    <category term="editors" scheme="http://ydnar.vox.com/tags/editors/" label="editors" /> 
    <category term="code" scheme="http://ydnar.vox.com/tags/code/" label="code" /> 
    <category term="tabs" scheme="http://ydnar.vox.com/tags/tabs/" label="tabs" /> 
    <category term="slashdot" scheme="http://ydnar.vox.com/tags/slashdot/" label="slashdot" /> 
    </entry> 
</feed>


